React 初始化项目
这里只写出完善环境下的初始化命令，具体的环境搭建可参考 React JSX | 菜鸟教程
使用终端命令快速构建项目：
cnpm install -g create-react-app
create-react-app my-app
cd my-app/
npm start
项目结构
my-app/
README.md - 自述文件
node_modules/ - node模块（存放npm install 的组件）
package.json - 包管理文件（管理npm的安装包）
.gitignore - git忽略文件
public/- 存放了项目的启动页面及依赖文件
favicon.ico - 网页标题logo
index.html - 网页首页
src/ - 页面各种资源
App.css - app页面css
App.js - App页面组件及js
App.test.js - 测试文件，删除没有影响（存疑）
index.css - 启动页样式
index.js - 启动页组件
logo.svg - logo
registerServiceWorker.js - 用于在生产环境中为用户在本地创建一个service worker 来缓存资源到本地，提升应用的访问速度
React JSX文件
JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。
优点
JSX 语法介绍
JSX本身就和XML语法类似，可以定义属性以及子元素。唯一特殊的是可以用大括号来加入JavaScript表达式，如：
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
一般每个组件都定义了一组属性（props，properties的简写）接收输入参数，这些属性通过XML标记的属性来指定。大括号中的语法就是纯JavaScript表达式，返回值会赋予组件的对应属性，因此可以使用任何JavaScript变量或者函数调用。上述代码经过JSX编译后会得到：
var person = React.createElement(
Person,{name: window.isLoggedIn ? window.name : ''}
);
子元素也是类似，既可以在{}内写入xml，又可以在xml中插入{}形式的js，如此不断递归使用，如：
var node = (
<div className="container">
{
person ? <span>Welcome back,<b>{person.firstName} {person.lastName}</b>!</span>
: <span>Please log in</span>
}
</div>
);
如果需要展现一组子节点，只需表达式返回一个JavaScript数组，数组的每个元素都是一个React组件，如：
var ul = (
<ul class="unstyled">
{lis}
</ul>
);
其中lis就是有多个“li”元素的数组。
在JSX中使用事件
和原生HTML定义事件的唯一区别就是JSX采用驼峰写法来描述事件名称，大括号中仍然是标准的JavaScript表达式，返回一个事件处理函数。在JSX中你不需要关心什么时机去移除事件绑定，因为React会在对应的真实DOM节点移除时就自动解除了事件绑定。
<button onClick={this.checkAndSubmit.bind(this)}>Submit</button>
React并不会真正的绑定事件到每一个具体的元素上，而是采用事件代理的模式：在根节点document上为每种事件添加唯一的Listener，然后通过事件的target找到真实的触发元素。这样从触发元素到顶层节点之间的所有节点如果有绑定这个事件，React都会触发对应的事件处理函数。这就是所谓的React模拟事件系统。
在JSX中使用样式
在JSX中使用样式，不像常规的那样需要个一个单独的CSS文件，而是通过style属性来定义，但和真实DOM不同的是，属性值不能是字符串而必须为对象，如：
<div style={{color: '#ff0000',fontSize: '14px'}}>Hello World.</div>
其中双大括号具有不同的含义，外层大括号为JSX的语法，内层大括号为JS代码，为了代码更直观，也可以先把JS赋值给一个对象，然后传进去，如：
var style = {
color: '#ff0000',fontSize: '14px'
};
var node = <div style={style}>HelloWorld.</div>;
在JSX中可以使用所有的的样式，基本上属性名的转换规范就是将其写成驼峰写法，例如“background-color”变为“backgroundColor”,“font-size”变为“fontSize”，这和标准的JavaScript操作DOM样式的API是一致的。
使用自定义组件
在JSX中，我们不仅可以使用React自带div,input…这些虚拟DOM元素，还可以自定义组件。组件定义之后，也都可以利用XML语法去声明，而能够使用的XML Tag就是在当前JavaScript上下文的变量名，这一点非常好用，你不必再去考虑某个Tag是如何对应到相应的组件实现。例如React官方教程中的例子：
class HelloWorld extends React.Component{
render() {
return (
<p>
Hello,<input type="text" placeholder="Your name here" />!
It is {this.props.date.toTimeString()}
</p>
);
}
};
setInterval(function() {
React.render(
<HelloWorld date={new Date()} />,document.getElementById('example')
);
},500);
其中声明了一个名为HelloWorld的组件，那么就可以在XML中使用，这个Tag就是JavaScript变量名，我们可以用任意变量名：
var MyHelloWorld = HelloWorld; React.render(<MyHelloWorld />,…);
而且还可以引入命名空间
var sampleNameSpace = {
MyHelloWorld: HelloWorld
};
React.render(<sampleNameSpace.MyHelloWorld />,…);
HTML转义
在组件内部添加HTML代码,并将HTML代码渲染到页面上。React默认会进行HTML的转义，但有些特殊情况会转义的不够准确，如使用 添加空格时，这时可以使用dangerouslySetInnerHTML进行转义：
<div dangerouslySetInnerHTML={{__html: '<h3>hahhah</h3>'}}></div>
dangerouslySetInnerHTML必须是一个对象，所以也可以赋值给对象，使代码更加直观：
function createMarkup() {
return {__html: 'First Second'};
}
function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()}></div>;
}
注释规则
ReactDOM.render(
<h1>Hello,world!{/*在标签内*/}</h1>,// 在标签外
document.getElementById('example')
);
组件的生命周期
这一篇应该就够了
React Native 中组件的生命周期
