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

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

  • 相关阅读:
    《Machine Learning in Action》—— 白话贝叶斯,“恰瓜群众”应该恰好瓜还是恰坏瓜
    《Machine Learning in Action》—— 女同学问Taoye,KNN应该怎么玩才能通关
    《Machine Learning in Action》—— Taoye给你讲讲决策树到底是支什么“鬼”
    深度学习炼丹术 —— Taoye不讲码德,又水文了,居然写感知器这么简单的内容
    《Machine Learning in Action》—— 浅谈线性回归的那些事
    《Machine Learning in Action》—— 懂的都懂,不懂的也能懂。非线性支持向量机
    《Machine Learning in Action》—— hao朋友,快来玩啊,决策树呦
    《Machine Learning in Action》—— 剖析支持向量机,优化SMO
    《Machine Learning in Action》—— 剖析支持向量机,单手狂撕线性SVM
    JVM 字节码指令
  • 原文地址:https://www.cnblogs.com/charlesblc/p/5982222.html
Copyright © 2011-2022 走看看