1.必须先引入的文件。
react.js是 是 React 的核心库；
react-dom.js.是提供与 DOM 相关的功能；
browser.js 将JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>2.react独有的语法是JSX，跟js是互不兼容的，写react的语法是，需要将script是我type设置成 text/babel
<script type="text/babel">
//这里写react的逻辑代码
</script>3.react的语法：
（1）reactDOM.render .基本语法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react学习</title>
</head>
<body>
<div id='example'></div>
</body>
</html>
<!-- 1.引用文件 -->
<script src="./react-demos-master/build/react.js"></script>
<script src="./react-demos-master/build/react-dom.js"></script>
<script src="./react-demos-master/build/browser.min.js"></script>
<!-- 2.-->
<script type="text/babel">
ReactDOM.render(
<p>hello react<p>,//这里分隔必须用 逗号 隔开
document.getElementById("example")
)
</script>上面可以看出，JSX 语法 中， HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。
JSX语法的基本规则是：
遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。 注意{}和,
<script type="text/babel">
var arr=['你','我','他'];
ReactDOM.render(
<div>
{
arr.map(function(value){
return <p>{value}</p>
})
}
</div>,
document.getElementById('example')
)
</script>
以上也可以这样写：
JSX语法 允许直接在模板插入js变量 ，如果这个变量是一个数组，则会展开这个数组的全部成员
<script type="text/babel">
//var arr=['你','我','他'];
var arr=[<p>hello ni</p> , <p>hello wo</p>]
ReactDOM.render(
<p>{arr}</p>
document.getElementById('example')
)
</script>（2）.React.createClass:生成组件类
React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类;
注意：下面这里的One就是一个组件类 所有组件类都必须有自己的 render 方法，用于输出组件 组件的首字母必须大写 ，组件类只能包含一个顶层标签，否则也会报错。
<script type="text/babel">
var One=React.createClass({
render:function(){
return <p>{this.props.name}</p>
}
})
ReactDom.render(
<One name="xiaojuan" age={18} />,
document.getElementById('example')
)
</script><script type="text/babel">
var One=React.createClass({
render:function(){
//当渲染很多内容时，放一个顶层标签（只能放一个）
return (
<div>
<p>hello {this.props.name} {this.props.age}</p>
<p> {this.props.age}</p>
</div>
)
}
})
ReactDom.render(
<One name="xiaojuan" age={18} />,
document.getElementById('example')
)
</script>
这里还有个注意点：当绑定的是值是字符串时，可以直接name="xiaojuan" 或者name={"xiaojuan"}； 但是如果是数字类型的话，必须用{} 例：age={18}，否则会报错。