初识React

React

是Facebook开源的一个用于构建用户界面的Javascript库，已经应用于Facebook及旗下Instagram

React专注于MVC架构中的V，即视图

React引入了虚拟DOM的概念：开发者操作虚拟DOM，React在必要的时候将它们渲染到真正的 DOM上

在引入React库之后，开发API就通过React对象暴露出来了，我们要做的就是

在虚拟DOM上创建元素，然后将它们渲染到真实DOM上。

createElement(type,[props],[children...]) - 在虚拟DOM上创建指定的React元素

　　type用来指定要创建的元素类型

　　props是可选的JSON对象，用来指定元素的附加属性，比如样式、CSS类等

　　children开始的所有参数，都被认为是这个元素的子元素

var el = React.createElement(
    "ul",
    null,
    React.createElement("li",null,"China"),
    React.createElement("li",null,"Japan"),
    React.createElement("li",null,"Korea")
);

render(element,container,[callback]) - 将虚拟DOM上的对象渲染到真实DOM上

　　element是使用createElement()方法创建的React元素

　　container是真实DOM中的HTML元素，作为渲染的目标容器

　　callback参数是可选的函数，当渲染完成或更新后被执行

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>First</title>
    <!--1.引入React库-->
    <script src="lib/react.min.js"></script>
</head>
<body>
    <!--2.在真实DOM上定义容器-->
    <div id="content"></div>
    <script>   
        //3.在虚拟DOM上创建p元素
        var el = React.createElement(
          "ul",
          null,
          React.createElement("li",null,"aa"),
          React.createElement("li",null,"bb"),
          React.createElement("li",null,"cc")
        );
        //4.将虚拟DOM上的ul元素渲染到真实DOM上的#content容器
        React.render(el,document.querySelector("#content"));
    </script>
</body>
</html>

Web应用中通常会在单页内有大量的DOM操作，而这些DOM操作很慢。React在每次需要渲染时，会先比较当前DOM内容和待渲染内容的差异，然后再决定如何最优地更新DOM。提供了一种一致的开发方式来开发服务端应用、Web应用和手机端应用。有了虚拟DOM这一层，所以通过配备不同的渲染器，就可以将虚拟DOM的内容渲染到不同的平台。

React组件就是一个实现预定义接口的JavaScript类：

React.createClass(meta)

meta是一个实现预定义接口的JavaScript对象

在meta中，至少需要实现一个render()方法，而这个方法，必须而且只能返回一个有效的React元素

如果组件是由多个元素构成的，那么必须在外边包一个顶层元素，然后返回这个顶层元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>LED Display</title>
    <script src="lib/react.min.js"></script>
    <!--组件样式-->
    <style>
        @font-face {
            font-family:"LED";
            src:url("font/LED.eot?") format("eot"),
                url("font/LED.woff") format("woff"),
                url("font/LED.ttf") format("truetype"),
                url("font/LED.svg#LED") format("svg");
            font-weight:normal;
            font-style:normal;
        }
        .ez-led{
            font-family : "LED";
            font-size : 40px;
            background : #70d355;
             500px;
            height:60px;
            display:block;
            line-height : 60px;
            text-align : right;
            padding : 10px;
            letter-spacing:5px;
            margin-top:20px;
        }
    </style>
</head>
<body>
    <!--定义容器-->
    <div id="content"></div>
    <script>
    //定义React组件
    var EzLedComp = React.createClass({
        //每个React组件都应该事先render()方法
        render : function(){
            var e = React.createElement(
                "div",
                null,
                React.createElement("div",{className : "ez-led"},"Hello, React111!"),
                React.createElement("div",{className : "ez-led"},"Hello, React222!")
            );
            //render()方法应该返回一个React元素
            return e;
        }
    });
    //创建React元素
    var el = React.createElement(EzLedComp);
    //渲染
    React.render(el,document.querySelector("#content"));
    </script>
</body>
</html>

React引入虚拟DOM以后，创建DOM树得在JavaScript里写代码，这使得界面定义变得相当繁琐,于是JSX来了

JSX是对JavaScript语法的扩展，它让我们可以在JavaScript代码中以类似HTML 的方式创建React元素

指定脚本类型

<script type="text/jsx">...</script>
//外部脚本
<script src="a.js" type="text/jsx"></script>

引入JSX语法转换库

<script src="lib/JSXTransformer.js"></script>

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>LED Display-in JSX</title>
    <!--引入React库-->
    <script src="lib/react.min.js"></script>
    <!--引入JSX转换库-->
    <script src="lib/JSXTransformer.js"></script>
    <!--组件样式-->
    <style>
        @font-face {
            font-family:"LED";
            src:url("font/LED.eot?") format("eot"),
                url("font/LED.woff") format("woff"),
                url("font/LED.ttf") format("truetype"),
                url("font/LED.svg#LED") format("svg");
            font-weight:normal;
            font-style:normal;
        }
        .ez-led{
            font-family : "LED";
            font-size : 40px;
            background : #70d355;
             300px;
            height:60px;
            line-height : 60px;
            text-align : right;
            padding : 10px;
            letter-spacing:5px;
        }
    </style>
</head>
<body>
    <!--定义容器-->
    <div id="content"></div>

    <!--声明脚本类型为JSX-->
    <script type="text/jsx">

        //定义React组件
        var EzLedComp = React.createClass({
            //每个React组件都应该事先render()方法
            render : function(){
                var e = 
                    //JSX--> 
                    <div>
                        <div className="ez-led">Hello, React!</div>
                        <div className="ez-led">1111111</div>
                        <div className="ez-led">2222222</div>
                    </div>;
                    //<--JSX
                return e;
            }
        });
        //渲染
        React.render(
            <EzLedComp/> , //JSX
            document.querySelector("#content"));  
    </script>
</body>
</html>