zoukankan      html  css  js  c++  java
  • 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

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

  • 相关阅读:
    Linux 动态库剖析
    【jquery mobile笔记二】jquery mobile调用豆瓣api示例
    地标性建筑
    地标性建筑
    翻译的艺术 —— 专有名词(广告词、国外品牌、语言等)
    翻译的艺术 —— 专有名词(广告词、国外品牌、语言等)
    黄金白银、古董与收藏
    黄金白银、古董与收藏
    经典书单 —— 计算机图形学
    经典书单 —— 计算机图形学
  • 原文地址:https://www.cnblogs.com/charlesblc/p/5982222.html
Copyright © 2011-2022 走看看