第一讲 React环境搭建Hello World

Sian · 发表于 2017-12-21 14:38:56

本帖最后由 Sian 于 2017-12-21 14:40 编辑

1、开发集成环境Atom，下载地址：http://atom.io/
1.1、安装三个插件(Settings--Packages)：atom-html-preview、autocomplete-paths、open-in-browser

2、React包下载：https://github.com/facebook/react/releases

2.1、React的几个JS文件有：react-dom-server.js、react-dom.js、react-with-addons.js、react.js；
2.2、除此之外，还有一个JSX支持的JS文件，browser.min.js，可以在http://cdnjs.com里搜索下载或直接引用该js链接，这里使用5.0版本；

3、小试牛刀Hello World
3.1、准备好以上这两样东西就可以了，至少安装好Atom了，插件不是必须的，方便后续工作而已，不影响开发；
3.2、编写一个基本的Html文件，在atom中直接输入html再按回车即可生成一段基础的html代码

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    
  </body>
</html>

3.3、在title下面加入js的引入

[HTML] 纯文本查看 复制代码

    <!-- react.js是react的核心库 -->
    <script src="../build/16.2.0/react.development.js" charset="utf-8"></script>
    <!-- react-dom.js提供与Dom相关的功能 -->
    <script src="../build/16.2.0/react-dom.development.js" charset="utf-8"></script>
    <!-- browser.min.js作用是将jsx语法转换成js语法 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script>

3.4、在body里面写一个div标签

[HTML] 纯文本查看 复制代码

    <!-- React渲染的模板内容会插入到这个节点容器中 -->
    <div id="container">

    </div>

3.5、在body后面添加一个script标签，说明在注释中

[JavaScript] 纯文本查看 复制代码

  <!-- 在React开发中使用jsx，与javascript不兼容，在使用jsx的地方设置type为text/babel -->
  <!-- babel是转换编译器，可以将ES6转换成可以在浏览器中运行的代码 -->
  <script type="text/babel">

    // 在此处编写React代码
    // 1、渲染一行标题文字：Hello React
    /**
     * ReactDOM.render();
     React的最基本方法，用于将模板转换成Html语言，渲染DOM，并插入到指定的DOM节点中
     3个参数
     第一个：模板的渲染内容；
     第二个：这段模板需要插入的DOM节点
     第三个：渲染后的回调，一般不用
     */
     ReactDOM.render(
       <h1>Hello React</h1>,
       document.getElementById("container")
     );

     /**
      * JSX 入门
      JSX不是一门语言，只是语法(语法糖)；
      */

      // 1、JSX必须借助React环境运行；

      // 2、JSX标签其实就是HTML标签，只不过我们可以直接在JavaScripty中书写，不需要引号包含，可以像XML一样书写；

      // 3、转换：JSX语法能够让我们更直观地看到组件的DOM结构，不能直接在浏览器上运行，最终会转换成Javascript代码

      ReactDOM.render(
        React.createElement("h1",null,"Hello React"),
        document.getElementById("container")
      );

      // 4、在JSX中运行Javascript代码，使用{}来引用表达式或变量

      var text = "Sian is studing React";
      ReactDOM.render(
        <h1>{text}</h1>,
        document.getElementById("container")
      );

      // 5、属性、组件等其他
  </script>

3.6、参考效果链接：http://www.yusian.com/react/hello

帐号		自动登录	找回密码
密码			立即注册

[React] 第一讲 React环境搭建Hello World