React学习笔记(一) 基础知识

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS，ReactJs的虚拟DOM（Virtual DOM）和组件化的开发深深的吸引了我。

React的基础很简单，极易上手。

React全都是围绕着组件的，所以React基础也就是：写组件的jsx、组件的生命周期以及组件的属性和状态。

jsx，只要是用过html模板的分分钟就能写了；
生命周期就是组件在创建、销毁、更新阶段的那几个回调函数，让你有机会再这几个关键点上对组件和环境做点手脚；
属性就像html标签里的属性一样决定了这个组件是什么样的；
状态，像是属性很像也和属性很不同，它是可变的，是控制组件的唯一入口，这个以后可得细说。
redux，其实就是在鼓捣状态。

React一个标新立异的地方：jsx（js扩展）

JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

在text/jsx中的代码最初不会被浏览器理会，他会被react的JSXTransformer编译为常规的JS，然后浏览器才能解析。

<script src="react/build/react.js"></script>
<script src="react/build/JSXTransformer.js"></script>

或者

<script src="react/build/react.js"></script>
<script src="babel/browser.js"></script>

前者对应的type="text/jsx"，后面对应的type="text/babel"

推荐使用text/babel，因为它支持ES6语法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>React学习</title>
    <script  src="./js/react.js"></script>
    <script  src="./js/react-dom.js"></script>
    <script  src="./js/browser.min.js"></script>
</head>
<body>
    <div id="example"></div>
    <script type="text/babel">
        ReactDOM.render(
          <h1>Hello, world!</h1>,
          document.getElementById('example')
        );
    </script>
</body>
</html>

react.js 是 React 的核心库

react-dom.js 是提供与 DOM 相关的功能

Browser.js 的作用是将 JSX 语法转为 JavaScript 语法

ReactDOM.render()

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

React.createClass()

React.createClass 方法就用于生成一个组件类

var Myfirst = React.createClass({
　　render : function(){
　　　　return    <div>我的第一个组件</div>;
　　}
})
ReactDOM.render(
　　<Myfirst />,
　　document.getElementById('example')
);

ReactJS有一些奇怪的地方：

　　1 ：组件首字母必须大写

　　2 ： render 是表达的意思，它的匿名函数必须有一个return

组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage name="John" />,
  document.getElementById('example')
);

组件嵌套(component)：组件的高复合应用

一个页面我们可以认为是一个组件集合，它是由多个组件嵌套而成

    <script type="text/babel">
        var Myfirst = React.createClass({
            render : function(){
                return    (
                    <div>我的第一个组件</div>
                    <MySecond />
                );
            }
        })

        var MySecond = React.createClass({
            render : function(){
                return  (
                    <h3>我的第二个组件</h3>
                    <MyThird />
                );
            }
        })

        var MyThird = React.createClass({
            render : function(){
                return (<h6>我的第六个组件</h6>)
            }
        })

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

上面的代码会报错：Uncaught SyntaxError: embedded: Adjacent JSX elements must be wrapped in an enclosing tag

提示我们，嵌套的组件(component),必须要用一个标签包含，修改如下：

    <script type="text/babel">
        var Myfirst = React.createClass({
            render : function(){
                return    (
                    <div>            {/* 添加的包含标签 */}
                        <div>我的第一个组件</div>
                        <MySecond />
                    </div>
                );
            }
        })

        var MySecond = React.createClass({
            render : function(){
                return  (
                    <div>           {/* 添加的包含标签 */}
                        <h3>我的第二个组件</h3>
                        <MyThird />
                    </div>
                );
            }
        })

        var MyThird = React.createClass({
            render : function(){
                return (<h6>我的第六个组件</h6>)
            }
        })

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