React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了
一、HTML的模板
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="react-dom.js"></script>
<script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
</script>
</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(
<h1>hello world</h1>,
document.getElementById('app');
)
注意： 第一个参数的顶层标签只能有一个，什么意思呢？就是 不可以写成：
<h1>hello world</h1> <div>我是div</div>
上面这种样子的
上面代码的意思是将一个h1标签插入id名为app节点，运行的结果如下：
hello world
三、JSX语法
上一节的代码，HTML语法直接写在JavaScript语言中，不加引号，这就是JSX语法，它允许HTML与JavaScript的混写
var str = '我是字符串';
ReactDOM.render(
<h1{str}</h1>,
document.getElementById("app")
);
上面的代码体现了jsx的基本语法规则：遇到HTML标签（以标签开头），就用HTML规则解析；遇到代码块（以{}开头），就用JavaScript规则解析。上面代码的运行结果如下：
str
JSX可以遍历数组，不过用的是map方法代码如下：
var arr = ['张三','李四','王五'];
ReactDOM.render(
<div>
{
arr.map(function(v,k){
return <p key={k}>你好,{v}</p>;
})
}
</div>,
document.getElementById('app')
)
效果如下：
arr
上面的代码有一个要注意的点：
就是return的标签要要加上key值，用来标识唯一。
不然会报警告：
error
JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员
var arr = [
<h1 key='1'> 你好世界 </h1>,
<h1 key='2'> 你好朋友 </h1>
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('app')
)
arr1.png
四、组件 Components
React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类
var Hello = React.createClass({
render:function(){
return <h1>我是hello 组件,姓名是{this.props.name}</h1>
}
});
ReactDOM.render(
<Hello name='张三'/>, //这里单双标签都行
document.getElementById('app');
)
组件的另外一种写法：
class Hello extends React.Component{
render(){
return <div>我是hello 组件,姓名是{this.props.name}</div>;
}
}
ReactDOM.render(
<Hello name='张三'/>, //这里单双标签都行
document.getElementById('app');
)
效果如下：
component
上面的代码中：变量 Hello 就是一个组件类。模板插入 <Hello/> 时，会自动生成** Hello**的一个实例。所有的组件都必须有自己的render方法，用于输出组件。
注意：组件的第一个字母必须大写，否则会报错，比如：Hello 不能写成hello。另外，组件类智能包括有一个顶层标签，否则会报错。
组件的用法和原生的HTML标签完全一致，可以加入任意属性。比如：<Hello name='张三' />,就是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 <h1> 生前何必久睡，死后必定长眠{React.Children.map(this.props.children,function(v){return <div>{v}</div>})}</h1>;
}
});
ReactDOM.render(
<Hello>
<span>天王盖地虎</span>
<span>宝塔镇河妖</span>
</Hello>,
document.getElementById("app")
)
效果如下：
childrens
网友评论