React初探-优快云博客

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

这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机。

下面用到是demo可以从这下载：https://github.com/ruanyf/react-demos/archive/master.zip

一、HTML模板

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

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/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(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);
运行结果：





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




下面内容参考网址：http://www.ruanyifeng.com/blog/2015/03/react.html

React 入门实例教程