因公司项目需要，所以菜渣如我（jq都没玩明白的人），也要开始学习react了
这里是后面的整理，并无抄袭之意
废话不多说，开始
一、起手式
1.1首先，肯定是引入react
import react from 'react';
如果已经
npm install react，那就直接引入吧，如果没有，那就在html里<script src = '../js/react.min.js'></script>
let Demo = React.createClass({
render(){
return (
<h1>Hello, world!</h1>
)
}
});
const app = document.createElement('div');
document.body.appendChild(app);
ReactDOM.render(<Demo/>, app);
解释一下这一坨子是什么东西：
声明一个组件类，个人理解就是创建一个自定义的dom标签，但是呢，这个首字母要大写。
（PS：如果使用的是webstorm，file→settings→languages&frameworks→javascript，右侧选择JSX Harmony 或者选择Flow,这个是为了让webstorm支持JSX语法。）
1.2再补一个新的知识点
let Test = React.createClass({
render(){
return(
<div>
<h1>初学react</h1>
<h2>撸两行试试</h2>
<p data-test="test">我笨，就要更努力</p>
</div>
)
}
});
这个是说明一个事情，就是，render的return中，只能有一个顶级标签，也就是外层的那个div，不然编译不通过会报错，有的，编辑器在编译之前就报错了。另外，这里return之后的dom没有引号，因为jsx语法可以不用，但是类似于className，data私有属性等则需要加引号。
注意：在react编写过程中，记得要使用className代替元素标签的class，htmlFor代替label的for，原因是，因为是jsx语法，所以，js和html混合写在一起，class和for都是关键字，所以把html中的这两个替换掉
2.1 render中逻辑语法相关
let Test = React.createClass({
render(){
return (
<div>
<h1>{1+1}</h1>
</div>)
}
})
在render的return里，如果有js语法需要添加到{}里，在return中，元素标签里的{}里写的是js代码，可以写代码中的这种，{}中的js要写成表达式，可以是带有return的function，如果要写判断，请使用三元。如下
ReactDOM.render(
<div>
{
names.map((name) =>{
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);
或者
var i = 1;
ReactDOM.render(
<div>
<h1>{i==1?'True。':'False。'}</h1>
</div>,
document.getElementById('test')
);
3.1允许加入js中的变量（如果是数组，则会展示全部）
var arr = [
'<h1>Hello world!</h1>',
'<h2>React is awesome</h2>',
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
4、写了，样式也得加不是？
React要使用camelCase语法来设置内联样式，React会在指定元素数字后面自动添加px，如下：
var testStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {testStyle}>样式Demo</h1>,
document.getElementById('example')
);
或者
ReactDOM.render(
<h1 style = {{"fontSize":"100","color":"#ff0000"}}>样式Demo</h1>,
document.getElementById('example')
);
这里补一刀，return里的注释要在{}中写
ReactDOM.render(
<div>
<h1>测试注释</h1>
{/*注释...*/}
</div>,
document.getElementById('example')
);
补一个小知识点
const arr = [1,2,3,4,5,6,7];
render(){
return (
<div>
arr.map((item,index)=>{
return (
<span key={index}>{item}</span>
)
})
</div>)
}
敲黑板敲黑板，react的遍历中，记得加入key={}
这个key通常是唯一不变的，最好是id之类，这里是示例，就用了index
但是，最好不要使用index当成key，如果是可拖动列表，index会改变的。
这个key，是告诉state，在比对的时候以什么为参考
不加key，浏览器的控制台会报warning的
以上，是react基础中的基础，反正我是这么认为的。下一页，是state和props。
