初学react

React特点：

声明式设计；建议使用JSX来描述用户界面;构建组件；单向响应的数据流；

JSX:JSX是一种JAVASCRIPT的语法扩展，元素是构成react的最小单位，JSX就是用来声明REACT中的元素的。

1.指定属性：JSX可以用引号来指定已字符串为值的属性；const element = <div tableIndex = "0"></div>

　　　　　　JSX可以用大括号来定义以javascript表达式为值的属性；const element = <div>{name}</div>? ? 小驼峰命名；

2.嵌套格式：JSX像HTML一样，闭合标签，也可以相互嵌套；

　　　　　　const element = ( <div> <img src="***"/></div>)

3.使用表达式： 在JSX中可以任意使用javascript表达式，但要放在大括号里；同时在JSX代码的外面加一个小括号，防止分号自动插入的bug;

　　　　　const element = ( <div>? <h1>{ hi,{format(createTime)}}</h1></div>)

　　　　　可以在if或for里面使用，将他赋值给变量，当作参数传入，也可以作为返回值；

1 function gettingData(user){
2   if(user){
3   　return <h1>hello,{format(user)}</h1>      
4 　}else{
5 　　return <h2>hello,stranger!</h2>
6 　}
7 }

4.防注入攻击： 所有的内容在渲染之前都被转换成字符串了，这样可以有效防止XSS。

5.表示对象： Babel转译器会把JSX转换成一个名为React.createElement()的方法调用；

　　以下两段类似：

　　const element = (<div> <h1 className="getting">hello</h1></div>)

　　React.createElement(‘h1‘,{className: ‘getting‘},‘hello‘)

安装：

通过NPM使用react，安装淘宝镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org npm config set registry https://registry.npm.taobao.org
使用creat-react-app快速构建React开发环境；creat-react-app自动创建的项目是基于webpack+ES6;

$ cnpm install -g create-react-app $ create-react-app my-app $ cd my-app/ $ npm start