年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1617|回复: 0

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

[复制链接]
  • TA的每日心情
    奋斗
    2022-12-13 21:26
  • 签到天数: 371 天

    [LV.9]以坛为家II

    发表于 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
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2024-3-29 14:58 , Processed in 0.047539 second(s), 18 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表