初学React

最新推荐文章于 2024-04-30 23:41:28 发布

mkbug

最新推荐文章于 2024-04-30 23:41:28 发布

阅读量290

点赞数

分类专栏：框架文章标签： react

框架专栏收录该内容

9 篇文章 0 订阅

订阅专栏

React 详细中文开发文档，可以阅读：http://reactjs.cn/react/docs/tutorial.html

英文原文：http://facebook.github.io/react/

中文论坛：http://react-china.org/

视频教程：http://www.icoolxue.com/album/show/262

工作需要最近开始接触React, 当前热门的一款前端框架，

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。。。

听起来逼格挺高的东西，但是学起来也得一点一点的学，，，尤其我健忘这块，所以还是记录下来，放便过后可以回顾。

一、HTML 模板

使用 React 的网页源码，结构大致如下

    <!DOCTYPE html>
    <html>
      <head>
         <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
         <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
         <script src="http://static.runoob.com/assets/react/browser.min.js"></script>
      </head>
      <body>
        <div id="example"></div>
        <script type="text/babel">
          // ** Our code goes here! **
        </script>
      </body>
    </html>

上面代码有两个地方需要注意。首先，最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上type="text/babel" 。

其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

二、ReactDOM.render()

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

// ** Our code goes here! **
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

三、JSX 语法

HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许HTML与JavaScript的混写


var names = ['React', 'PHP', 'Python'];
ReactDOM.render(
  <div>
  {
    names.map(function (name) {
      return <div>Hello, {name}!</div>
    })
  }
  </div>,
  document.getElementById('example')
);