因公司项目需要，所以菜渣如我（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。

react入门学习(一)