1. 安装/创建应用
react可以直接下载使用，也可以引入在线reactJS库，在这里我用的是npm 安装react
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org
$ cnpm install -g create-react-app
$ create-react-app template
$ cd template/
$ npm start
完成后目录结构为下图显示，通过 http://localhost:3000 查看页面效果
2. React元素渲染
刚创建的应用的HTML界面只有一个React根节点，如下
<div id="root"></div>
在此根节点中的内容都将由React DOM来管理，一般用React来开发只会定义一个根节点，如果是在一个已有的项目当中引入React的话，可能需要在不同的部分单独定义React根节点。
现在我们用ReactDOM.render()的方法，往React根节点上渲染元素，即往这个div中插入dom节点或内容。
在index.js 中添加代码
ReactDOM.render(
<p>hello react</p>
,document.getElementById('root'));
页面上会出现hello react，原先的根节点下的dom元素会被覆盖，只剩下一个<p>元素，至此成功将<p>元素渲染到页面上。
3. React JSX
JSX 即 JavaScript XML，基于JavaScript融合了XML，可以在js中书写XML。在react如果想向页面输出一标签，必须用到react内置的JSX语法，否则输出的只是普通字符串。
语法/特点
a. 可以在js中书写xml 如上述元素渲染
b. 可以嵌套多个HTML标签，需要一个div元素包裹它，当然它也可以不是div元素，但是要保证你的JSX表达式有且仅有一个顶层元素，如将上述元素渲染改为
ReactDOM.render(
<div>
<p>hello</p>
<p>react</p>
</div>
,document.getElementById('root'));
c. 自定义属性
你可以为你的标签添加自定义的属性，但是要以 data- 为前缀，如
ReactDOM.render(
<div><p data-name="hello">hello</p>
<p>react</p>
</div>
,document.getElementById('root'));
d. JavaScript表达式
JSX中可以使用JavaScript表达式，要写在{}中
ReactDOM.render(
<p>{ 2+2}</p>
,document.getElementById('root'));
JSX不能使用if else，可以用三目运算符来代替
ReactDOM.render(
<p>{ 5>2?'true':'false'}</p>
,document.getElementById('root'));
e. 样式
React推荐使用内联样式，将样式封装为对象，再用{}添加，样式书写为小驼峰命名法，如 background-color写为backgroundColor
var myStyle = {
fontSize:100,
color:'red'
}
ReactDOM.render(
<p style={ myStyle }>{ 5>2?'true':'false'}</p>
,document.getElementById('root'));
f. 注释
在标签内部的注释需要使用花括号{}，标签外的注释不能使用花括号
ReactDOM.render(
/*标签外的注释*/
<p>哈哈{/*标签内的注释*/}</p>
,document.getElementById('root'));
g. 数组
JSX允许在模板中插入数组，数组内容会被自动展开
var arr = [<p>小白</p>,<p>学习笔记</p>];
ReactDOM.render(
<div>{arr}</div>, document.getElementById('example'));
