React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

官网：http://facebook.github.io/react/

1、环境搭建

》》》普通的用法：需要三个文件。react.js核心文件、react-dom就是适应amd 、cmd 等进行的封装、bebel就是es6和jsx转译。上线之后就不用了。

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>Hello React!</title>

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

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

    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

      代码。。。。</script>

  </body>

</html>

》》》CommonJS 模式 browserify or webpack

// main.js

var React = require('react');

var ReactDOM = require('react-dom');

ReactDOM.render(

  <h1>Hello, world!</h1>,

  document.getElementById('example')

);

2、hello ， world 例子

重点语法：先创建一个组件  var Hello = React.createClass({});  组件内定义render 并返回    ，使用组件渲染：ReactDOM.render(,)两个参数，一个是要渲染的组件。

                <div id="example"></div>

        <script type="text/babel">

            var Hello = React.createClass({

                render:function(){

                    return <h1>hello word</h1>

                }

            })

            ReactDOM.render(

              <Hello />,

              document.getElementById('example')

            );

        </script>

3、jsx 组件 单项数据绑定 虚拟DOM

》》》jsx   ： HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

》》》组件 ： React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。组件类的第一个字母必须大写，否则会报错。

》》》虚拟DOM ：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并。

》》》单项数据绑定：不同于mvc，类似于php和html混写的写法

reactjs入门到实战（一）---- hello world例子的更多相关文章

  1. reactjs入门到实战（五）---- props详解

    1>>>基础的props使用     不可修改父属性    getDefaultProps   对于外界/父组件的属性值,无法直接修改,它是只读的. <script type= ...

  2. reactjs入门到实战（三）---- 组件详解

    owner  >>> 传递 props this >>>是默认指向组件本身 key>>>不能没有,在复用的情况下 组件:例子 <!-- 输入 ...

  3. reactjs入门到实战（二）---- jxs详解

    >>>如何转换    JSX transformer   Babel    官网:http://babeljs.io/   里面有一个可以看转换的测试器,es6什么的也可以应用: 注 ...

  4. reactjs入门到实战（十）----one-first_app

    index <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- ...

  5. reactjs入门到实战（七）---- React的组件的生命周期

    React的组件的生命周期有三个状态分别是:挂载(生产组件示例化.准备挂载到页面.挂载到页面).更新(更新值.更新DOM).和卸载(卸载后). >>>其他     getInitia ...

  6. reactjs入门到实战（九）----ajax的应用

    利用外部的jquery: <script type="text/babel"> } }, componentDidMount:function(){ ]['value' ...

  7. reactjs入门到实战（八）----表单组件的使用

    表单组件支持几个受用户交互影响的属性: value,用于 <input>.<textarea> 组件. checked,用于类型为 checkbox 或者 radio 的 &l ...

  8. reactjs入门到实战（六）---- ReactJS组件API详解

    全局的api 1.React.createClass 创建一个组件类,并作出定义.组件实现了 render() 方法,该方法返回一个子级.该子级可能包含很深的子级结构.组件与标准原型类的不同之处在于, ...

  9. reactjs入门到实战（四）---- state详解

    this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性. 组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开 ...

随机推荐

  1. 转：python webdriver API 之上传文件

    文件上传操作也比较常见功能之一,上传功能操作 webdriver 并没有提供对应的方法,关键上传文件的思路.上传过程一般要打开一个系统的 window 窗口,从窗口选择本地文件添加.所以,一般会卡在如 ...

  2. 【Origin】羡旁人

    -道行至一桥畔,微风轻抚,观河岸杨柳柳枝空舞,看满路车辆畅行无阻,虽羡,然各有归途. 小河岸,棵棵杨柳,柳枝随风摆; 大路上,盏盏绿灯,一路往北开. 横批: 可惜不是我 -作于二零一六年三月二十二日

  3. Java基础(35):装箱与拆箱---Java 中基本类型和包装类之间的转换（Wrapper类）

    基本类型和包装类之间经常需要互相转换,以 Integer 为例(其他几个包装类的操作雷同哦): 在 JDK1.5 引入自动装箱和拆箱的机制后,包装类和基本类型之间的转换就更加轻松便利了. 那什么是装箱 ...

  4. c++之路进阶——bzoj3343（教主的魔法）

    F.A.Qs Home Discuss ProblemSet Status Ranklist Contest ModifyUser  gryz2016 Logout 捐赠本站 Notice:由于本OJ ...

  5. logstash5.x改变

    5.x版本 logstash中 elasticsearch插件的workers,无法配置大于1,会提示 This plugin uses the shared and doesn't need thi ...

  6. springmvc+spring+mybatis分页查询实例版本3,添加条件检索

    在第二个版本上添加了姓名模糊查询,年龄区间查询;自以为easy,结果发现mybatis的各种参数写法基本搞混或是忘了,zuo啊,直接上代码,然后赶紧把mybatis整理一遍再研究自己的项目,应该还会有 ...

  7. Yii2.0 查询(CRUD)

    yii2使用中的一些基本的增删改查操作.以用户为例说明: User::find()->all();    //返回所有用户数据:   User::findOne($id);   //返回 主键 ...

  8. linux设备驱动归纳总结（四）：3.抢占和上下文切换【转】

    本文转载自:http://blog.chinaunix.net/uid-25014876-id-65711.html linux设备驱动归纳总结(四):3.抢占和上下文切换 xxxxxxxxxxxxx ...

  9. 160923、项目管理模式:如何去除SVN标记

    项目管理模式:如何去除SVN标记 当我们从工作空间中拷贝一个项目,发现项目特别大.那是因为当使用svn里面保留了每个版本的信息,我们可以通过这个方法来进行去除 当项目不需要SVN标志的时候,我们一般怎 ...

  10. Java中删除指定文件夹文件夹下面有内容也删除使用递归方案

    import java.io.File; import java.text.ParseException; import java.text.SimpleDateFormat; import java ...