菜比如我的漫漫react学习路(一)

因公司项目需要、所以，菜渣如我（jq都没玩明白的人），也开始学习react了。

以下内容为个人学习时整理，无抄袭之意。

1、起手式

　　首先，肯定是引入react

　　装个B import react from 'react'

　　　　也可以在html里用script标签引入 <script src = '../js/react.min.js'></script>

　　然后，写一个简单的demo（我没有用jsx去编写）

html :

js:

　　let Demo = React.createClass({

　　 render(){
            return (
                <h1>Hello, world!</h1>
            )
        }

　　});

　　ReactDOM.render(
        <Demo />,
        document.getElementById('example')
    );

解释一下这都是些什么玩意儿

将h1标签丢给html中id为test的div节点（这是目的）。而let 出来的Demo那一坨，就是声明创建一个组件类（所以Demo的首字母要大写）。在render中使用<Demo />时，会生成一个Demo的实例。

每个组件都要有自己的render方法，来输出组件。声明出来的组件在使用的时候，<Demo /> 或者<Demo></Demo> 都可以。

　（PS：file→settings→languages&frameworks→javascript，右侧选择JSX Harmony或者选择Flow，这个是为了让webstorm支持JSX语法。）

再来一发

　　let Test = React.createClass({
    　　render(){
       　　 return (
            　　<div>
               　　 <h1>初学react</h1>
                　　<h2>撸两行试试</h2>
                　　<p data-test="test">我笨，就要更努力</p>
            　　</div>
        　　)
    　　}
　　});
　　ReactDOM.render(
　　<Test />,
　　document.getElementById('example'));

　　第二种写法拿出来，只是为了说明一件事情，就是render里的return中，只能有一个顶级标签，这里就是这个div标签。这个是react中，组件里只能有一个顶级标签，不然就GG思密达。（另外，标签外面没有写双引号，反而只是在data属性上给了双引号。）

2、再来一发表达式的

let Test = React.createClass({

　　render(){

　　　　return (

　　<div>
<h1>{1+1}</h1>
</div>)

}

})
ReactDOM.render(
<Test />
document.getElementById('test')
);

在render的return里（注意，是return里），如果有js语法要添加在{}里，在return中，元素标签里的{}里写的是js代码，例如<div className = {1 == 1 ? "aa" : "bb"}>{dd.id}</div>这样的。

也就是说，{}中的js语法是表达式，而不是逻辑，可以是带有return的function。所以不能写if，但是可以写三目。

如下这两种

　　ReactDOM.render(
    <div>
        {
          names.map(function (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、允许在模版里加入javascript的变量（如果是数组，则会展示全部）
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')
);
这里补一刀，注释在{}里写
ReactDOM.render(
    <div>
        <h1>测试注释而已</h1>
        {/*注释...*/}
    </div>,
document.getElementById('example')
);

当你终于脱胎换骨，一定会感谢曾经的孤独。