nodejs（2）：前段框架 React 学习设计

本文的原文连接是:http://www.jb51.cc/article/p-syhbiyhk-bnt.html 未经博主允许不得转载。
博主地址是：http://blog.csdn.net/freewebsys

1，关于React

React.js（React）是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。
出于灵活性考虑，React使用JavaScript来构建用户界面，没有选择HTML。
使用 jsx的语法，JSX 是一个静态类型、面向对象的编程语言，主要设计用来在浏览器上运行，你可以把它当作是 JavaScript 的增强版本。
JSX最大的特色就是就是在JavaScript中嵌入和HTML表达式。

官方网站：https://facebook.github.io/react/

2，第一Helloworld

最新的版本是15.6.1，由于是使用的jsx进行代码的编写。
需要使用 eabel 进行翻译才能运行。

http://babeljs.io/repl/

需要说明的是最新的react 需要引入 react.min.js 和 react-dom.min.js 两个js类库。同时要用 babel 的5.x 版本。6的版本好像和react配合有问题。

<html>
    <head>
        <title>new react demo</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>
        <script type="text/babel"> class HelloWorld extends React.Component { constructor(){ super(); this.state = { count: 1 }; } render(){ return ( <div> <h2> Hello World ! </h2> <h3> {this.state.count} </h3> </div> ) } } let myCount = ReactDOM.render( <HelloWorld/>,document.getElementById('root') ); </script>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

其中在react中使用 render 返回 html 代码片段。
在定义了react的class之后就可以使用react的组件了。

ReactDOM.render(
                <HelloWorld/>,document.getElementById('root')
            );

直接使用组件。
还是非常方便的。

3，定时更新

<html>
    <head>
        <title>new react demo</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
        <script type="text/babel"> function tick() { const element = ( <div> <h1>Hello,world!</h1> <h2>It is {new Date().toLocaleTimeString()}.</h2> </div> ); ReactDOM.render( element,document.getElementById('root') ); } setInterval(tick,1000); </script>
    </head>
    <body>
        <h1>hello world react .</h1>
        <div id="root"></div>
    </body>
</html>

可以在chrome上面安装一个react的插件，来分析react的模板结构。

使用setInterval定时器。间隔1秒钟。执行一次绑定。
虽然也是更新，但是react只更新变化的部分。也就是只更新时间，而hello world没有更新。

4，总结

react 使用了jsx，最大的特点就是里面key直接写html 片段了。
这个就能方便的写些常用的组件了。加快了开发效率。