懂你所需,做你所想
当前位置: 仙桃云科 > 新闻资讯 > 技术指导 >

ReactJS入门基础

发表日期:2017-06-12文章编辑:仙桃云科网络科技有限公司

React JSX

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX,但它有以下优点:

  • JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
  • 它是类型安全的,在编译过程中就能发现错误。
  • 使用 JSX 编写模板更加简单快速。

使用JSX

<div id="example"></div>
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。

我们可以在以上代码中嵌套多个 HTML 标签,需要使用一个 div 元素包裹它,实例中的 p 元素添加了自定义属性 data-myattribute,添加自定义属性需要使用 data- 前缀。

上面代码将一个 h1 标题,插入id为example中.

运行结果:

独立文件

 我们也可以将React JSX 代码写在一个独立文件里,例如我们创建一个 helloworld_react.js 文件,代码如下:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

然后可以在HTML中引入

<body>
  <div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>
</body>

JSX 语法

 JSX的语法,它允许 HTML 与 JavaScript 的混写。

遇到 HTML 标签(以 < 开头的),就用 HTML 规则解析;遇到代码块(以 { 开头的),就用 JavaScript 规则解析。

复制代码
    var names = ['lisi', 'wanger', 'zhangsan'];

    ReactDOM.render(
      <div>
      {
        names.map(function (name) {
          return <div>Hello, {name}!</div>
        })
      }
      </div>,
      document.getElementById('example')
    );
复制代码

JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组,则会展开这个数组的所有成员。上面程序运行结果如下

组件

React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。React.createClass 方法就用于生成一个组件类

复制代码
    var HelloMessage = React.createClass({
      render: function() {
        return <h1>Hello {this.props.name}</h1>;
      }
    });

    ReactDOM.render(
      <HelloMessage name="John" />,
      document.getElementById('example')
    );
复制代码

以上代码中,变量 HelloMessage 就是一个组件类。模板插入 <HelloMessage /> 时,会自动生成 HelloMessage 的一个实例。所有组件类都必须有自己的 render 方法,用于输出组件。

注意,组件类的第一个字母必须大写,否则会报错,比如HelloMessage不能写成helloMessage。因为原生 HTML 元素名以小写字母开头,而自定义的 React 类名以大写字母开头另外,组件类只能包含一个顶层标签,否则也会报错。

组件的用法与原生的 HTML 标签完全一致,如果我们需要向组件传递参数,可以使用 this.props 对象。以上实例中 name 属性通过 this.props.name 来获取。

复合组件

我们可以通过创建多个组件来合成一个组件,即把组件的不同功能点进行分离。

以下实例我们实现了输出网站名字和网址的组件:

复制代码
var WebSite = React.createClass({
  render: function() {
    return (
      <div>
        <Name name={this.props.name} />
        <Link site={this.props.site} />
      </div>
    );
  }
});
 
var Name = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
});
 
var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
});
复制代码
ReactDOM.render(
  <WebSite name="博客园" site=" http://www.cnblogs.com" />,
  document.getElementById('example')
);

实例中 WebSite 组件使用了 Name 和 Link 组件来输出对应的信息,可以理解为 WebSite 拥有 Name 和 Link 的实例。

以上就是RejectJS入门基础,看懂就可以继续深锐学习了。

其实学习ReactJS的要求并不高。有HTML5,CSS和JavaScript的基础就可以了

如没特殊注明,文章均为仙桃云科网络原创,转载请注明来自>
相关新闻

Java6和Java8在Windows上共存...

最近在做一个Android的项目,一开始安装的是Java8用于项目的开发。但是在项目后期需要用到drozer用于检测项目的安全性,要搭建drozer的测试环境必须要使用Java6,否则会出...

日期:2017-08-30

OpenGL与CUDA互操作方式总结...

一、介绍 CUDA是Nvidia推出的一个通用GPU计算平台,对于提升并行任务的效率非常有帮助。本人主管的项目中采用了OpenGL做图像渲染,但是在数据处理方面比较慢,导致帧率一直...

日期:2017-08-18

nodejs-基础与深入...

01-nodejs介绍 1.什么是nodejs 1. (javascript跑在机器端,服务端)Javascript on the machine 2. (跑在谷歌v8引擎上)A runtime for Google Chrome s V8 Javascript eng...

日期:2017-08-07

InnoDB关键特性之刷新邻接页-异...

Flush neighbor page 1、工作原理 2、参数控制 AIO 1、开启异步IO 一、刷新邻接页功能 1、工作原理 当刷新一个脏页时,innodb存储引擎会检测该页所在区(extent)的所有页,...

日期:2017-07-31

Java8 Stream代码详解+BenchMark...

1、基本介绍 1、创建方式 1、Array的Stream创建 1、直接创建 // main Stream stream = Stream. of ( a , b , c );String [] strArray = new String[] { a , b , c };stream...

日期:2017-07-24

Java 数据类型在实际开发中应用...

在实际编程中,往往存在着这样的数据集,它们的数值在程序中是稳定的,而且数据集中的元素是有限的。在JDK1.5之前,人们用接口来描述这一种数据类型。 1.5以后引入枚举 一...

日期:2017-07-17