码迷,mamicode.com
首页 > Web开发 > 详细

reactjs入门到实战(一)---- hello world例子

时间:2016-06-04 16:18:25      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:

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例子

标签:

原文地址:http://www.cnblogs.com/chenjinxinlove/p/5558937.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!