刘贵学博客

React 边写边学 1:Hello World

背景介绍

React是Facebook出品的,目前最热门的(没有之一)前端框架,

React主页 中提到, 只三方面的内容:

  1. 只关注View层,UI的操作与展示,引入JSX自定义格式,使组件化更近简洁;
  2. 虚拟DOM,通过对DOM的模拟表现,最大限度地减少与DOM的交互。独特的diff算法,操作或渲染虚拟DOM性能非常高;
  3. 单向数据流,沿着组件树从上到下单向流动的。

第一个例子 Hello World

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>React hello world</title>

  <script src="http://cdn.bootcss.com/react/15.1.0/react.min.js"></script>
  <script src="http://cdn.bootcss.com/react/15.1.0/react-dom.min.js"></script>
  <script src="http://cdn.bootcss.com/react/0.14.0-beta3/JSXTransformer.js"></script>

</head>

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

    <script type="text/jsx">
      var HelloMessage = React.createClass({
        render: function() {
          return <h1>Hello {this.props.name}</h1>;
        }
      });

      ReactDOM.render(
        <HelloMessage name="World" />,  
        document.getElementById('example')
      );
    </script>
    
</body>
</html>

代码运行结果:

注: 如果要在浏览器中查看 VDOM 标签,推荐 React Devtools 插件, Chrome 和 Firefox 都支持。

代码解析


第一个例子,要最简单,所以本地不需要安装任何库,直接用 CDN的。

  • react React的库
  • react-dom React Dom库
  • JSXTransformer 将JSX语法转为 JS 格式,正常的生产环境中,不会使用此类的库,会用在部署前先用 Babel 工具转换后再部署。

总结

本文通过一个页面,成功运行React的第一个实例。
但是,使用CDN上的库以及JSXTransformer.js的做法,写的学习React的小例子还行,真正做项目肯定不行,那怎么做呢? 请阅读系列第二章 《React 边写边学 2:使用Babel》