React 入门实例教程

最新推荐文章于 2017-07-19 14:40:18 发布

转载最新推荐文章于 2017-07-19 14:40:18 发布 · 284 阅读

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

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