React学习、安装及QuickStart

首先看的是这个页面

http://www.cocoachina.com/webapp/20150721/12692.html

这里有个内容差不多的版本（精华版）：http://www.cnblogs.com/yunfeifei/p/4486125.html

一些记录：

如果你像在90年代那样写过服务器端Render的纯Web页面那么应该知道，服务器端所要做的就是根据数据Render出HTML送到浏览器端。

如果这时因为用户的一个点击需要改变某个状态文字，那么也是通过刷新整个页面来完成的。换句话说，任何UI的变化都是通过整体刷新来完成的。

而React将这种开发模式以高性能的方式带到了前端，每做一点界面的更新，你都可以认为刷新了整个页面。至于如何进行局部更新以保证性能，则是React框架要完成的事情。

借用Facebook介绍React的视频中聊天应用的例子，当一条新的消息过来时，传统开发的思路，你的开发过程需要知道哪条数据过来了，
如何将新的DOM结点添加到当前DOM树上；

而基于React的开发思路如下图，你永远只需要关心数据整体，两次数据之间的UI如何变化，则完全交给框架去做。
可以看到，使用React大大降低了逻辑复杂性，意味着开发难度降低，可能产生Bug的机会也更少。

对于MVC开发模式来说，开发者将三者定义成不同的类，实现了表现，数据，控制的分离。开发者更多的是从技术的角度来对UI进行拆分，实现松耦合。

对于React而言，则完全是一个新的思路，开发者从功能的角度出发，将UI分成不同的组件，每个组件都独立封装。

在React中，你按照界面模块自然划分的方式来组织和编写你的代码，对于评论界面而言，整个UI是一个通过小组件构成的大组件，每个组件只关心自己部分的逻辑，彼此独立。

在这里下载包：http://facebook.github.io/react/downloads.html

下载好之后，解压在：/Users/baidu/Documents/Data/Work/Code/Self/reactjs/react-15.3.2

本想用WebStorm去创建一个react项目的。然后创建了一个react-starter-kit项目，但是没运行起来。

还是先处理Html文件吧。建了一个空项目，里面添加一个 react-demo.html，内容如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../react-15.3.2/build/react.js"></script>

    <script src="../react-15.3.2/build/react-dom.js"></script>

</head>

<body>

    <div id="container"></div>

    <script>

    var Example = React.createClass({

        render:function () {

            var message = 'hello here';

            return React.DOM.p(null, message);

        }

    });

    var ExampleFactory = React.createFactory(Example);

    ReactDOM.render(

            ExampleFactory(),

            document.getElementById('container')

    );

    </script>

</body>

</html>

但是不能直接在WebStorm里面运行，不然会报错：找不到react.js 因为没把这个js放在WebStorm运行server的窗口。

Failed to load resource: http://localhost:63342/react-15.3.2/build/react-dom.js Failed to load

the server responded with a status of 404 (Not Found)

直接双击html打开，能够显示：

hello here

没找到JSXTransformer.js，所以就没有用jsx语法。

现在加上计时操作（参考React安装包里面Example目录里面的Basic例子）：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../react-15.3.2/build/react.js"></script>

    <script src="../react-15.3.2/build/react-dom.js"></script>

</head>

<body>

    <div id="container"></div>

    <script>

    var Example = React.createClass({

        render:function () {

            var elapsed = Math.round(this.props.elapsed / 100);

            var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0');

            var message = 'hello here has been running for ' + seconds + ' seconds.';

            return React.DOM.p(null, message);

        }

    });

    // Call React.createFactory instead of directly call ExampleApplication({...}) in React.render

    var ExampleFactory = React.createFactory(Example);

    var start = new Date().getTime();

    setInterval(function () {

        ReactDOM.render(

                ExampleFactory({elapsed: new Date().getTime() - start}),

                document.getElementById('container')

        );

    }, 50);

    </script>

</body>

</html>

注意上面代码里面取参数的方式，定时的方式，通过Factory调用，createClass等用法。

比如，createFactory：

创建模式目的是隔离与简化创建组件的过程，模式的东西自然是可用可不用，如果需要批量创建某个组件时，可以通过工厂方法来实现：

var h = React.createFactory(Hello);

h({x:1})

h({x:2})

h({x:3})

createClass：

1. createClass，如其名就是创建React组件对应的类，描述你将要创建组件的各种行为，其中只有当组件被渲染时需要输出的内容的render接口是必须实现的，其他都是可选：

var Hello = React.createClass({

    render: function() {

        return <div>Hello Taobao, Hello UED</div>;

    }

});

注：上面这个return里面其实需要加上引号的，不然报错。

双击运行，能够看到页面在动态变化：

hello here has been running for xx.x seconds.

以上，是一个简单的例子。

另外还有这篇《React初学者入门须知》

http://www.oschina.net/news/75530/9-things-every-reactjs-beginner-should-know

看了一遍，没什么特别需要记录的。

秒客网

React学习、安装及QuickStart

相关文章