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'));