React入门教程

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了

一、HTML的模板

上面的代码要注意的有两点：
一、最后的script标签的type属性为text/babel。这是因为React独有的JSX语法。和JavaScript不兼容。凡是使用到JSX的地方，都要加上 type="text/babel"
二、上面的代码引用了三个库。react.js、react-dom.js、browser.js,他们引用的顺序不能改变。其中，react.js 是React的核心库，react-dom.js是提供DOM相关的功能，browser.js的作用是将JSX语法转为JavaScript语法。

二、ReactDOM.render()

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。render的方法有两个参数，第一个参数是要写入的模板，第二个参数是要插入的节点。

ReactDOM.render(
  
hello world
,
document.getElementById('app');
)

注意： 第一个参数的顶层标签只能有一个，什么意思呢？就是 不可以写成：

hello world

我是div

上面这种样子的

上面代码的意思是将一个h1标签插入id名为app节点，运行的结果如下：

hello world

三、JSX语法
上一节的代码，HTML语法直接写在JavaScript语言中，不加引号，这就是JSX语法，它允许HTML与JavaScript的混写

var str = '我是字符串';
ReactDOM.render(
  ,
  document.getElementById("app")
);

上面的代码体现了jsx的基本语法规则：遇到HTML标签（以标签开头），就用HTML规则解析；遇到代码块（以{}开头），就用JavaScript规则解析。上面代码的运行结果如下：

str

JSX可以遍历数组，不过用的是map方法代码如下：

var arr = ['张三','李四','王五'];
ReactDOM.render(
  

    {
          arr.map(function(v,k){
            return 
你好,{v}
;
    })
  }
,
document.getElementById('app')
)

效果如下：

arr

上面的代码有一个要注意的点：
就是return的标签要要加上key值，用来标识唯一。
不然会报警告：

error

JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员

var arr = [
 你好世界 
,
 你好朋友 
];
ReactDOM.render(
  
{arr}
,
  document.getElementById('app')
)

arr1.png

四、组件 Components

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

var Hello = React.createClass({
  render:function(){
    return 
我是hello 组件,姓名是{this.props.name}
  }
});
ReactDOM.render(
  , //这里单双标签都行
document.getElementById('app');
)

组件的另外一种写法：

class Hello extends React.Component{
        render(){
            return 
我是hello 组件,姓名是{this.props.name}
;
        }
    }
ReactDOM.render(
  , //这里单双标签都行
document.getElementById('app');
)

效果如下：

component

上面的代码中：变量 Hello 就是一个组件类。模板插入 时，会自动生成** Hello**的一个实例。所有的组件都必须有自己的render方法，用于输出组件。

注意：组件的第一个字母必须大写，否则会报错，比如：Hello 不能写成hello。另外，组件类智能包括有一个顶层标签，否则会报错。

组件的用法和原生的HTML标签完全一致，可以加入任意属性。比如：,就是Hello 组件加入一个name属性，值为张三。组件的属性可以在组件类的this.props 对象上获取，比如name属性可以通过 this.props.name 读取。

添加组件属性，有一个地方需要注意，就是class属性要写成className，for属性要写成htmlFor，这是因为class和for是JavaScript的保留字

五、this.props.children

this.props对象的属性与组件的属性一一对应，但是有一个例外，就是this.props.children 属性。它表示组件的所有子节点。

var Hello = React.createClass({
         render:function(){
             return 
 生前何必久睡，死后必定长眠{React.Children.map(this.props.children,function(v){return 
{v}
})}
;
         }
     });
     ReactDOM.render(
         
             天王盖地虎
             宝塔镇河妖
         ,
         document.getElementById("app")
     )

效果如下：

childrens