React开发环境搭建（day2）

最新推荐文章于 2023-03-16 11:19:26 发布

微光•无单位

最新推荐文章于 2023-03-16 11:19:26 发布

阅读量326

点赞数 2

分类专栏：前端学习文章标签： react

本文链接：https://blog.csdn.net/LvWeijie941/article/details/105381248

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

React开发环境的搭建（day2）

React需要引入的文件

react.js - 核心文件
react-dom.js - 开发web引用这个文件，用来渲染页面中的M,当前文件依赖于react核心文件。
babel.js - 浏览器的翻译官，把ES6转换成ES5,把JSX转换成javasprict，这样就能使当前浏览器代码兼容。

下载recat依赖文件方式

react.js npm i react --save
react-dom.js npm i react-dom --save
babel.js npm i babel-standalone --save

创建demo

进入demo目录，初始化 package.json

npm init -y

在这里插入图片描述
下载recat核心文件

npm i react --save

在这里插入图片描述
下载react-dom.js

npm i react-dom --save

在这里插入图片描述
下载babel.js

创建hello.html 引入这三个依赖，创建根节点，渲染根节点，hello world。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="node_modules\react\umd\react.development.js"></script>
  <script src="node_modules\react-dom\umd\react-dom.development.js"></script>
  <script src="node_modules\babel-standalone\babel.min.js"></script>
</head>

<body>
  <!-- 创建根节点 一个页面中需要有一个根节点 这个节点下的内容就会被Rreact所管理（一般只会定义一个根节点）-->
  <div id="demoReact">

  </div>
  <script type="text/babel">
    /**此语法属于jsx，也就是jsx=javascript xml。属于javascript的扩展语法
       优点：
            1.执行效率更快
            2.它是类型安装的，编译的过程中能及时的发现错误
            3.在使用jsx的时候编写模板会更加简单和快速
        注意： jsx中的HTML标签必须按照W3C的规范来写，标签必须闭合
    **/
    let myDom = <h1>hello，world</h1>
    ReactDOM.render(myDom, document.getElementById("demoReact"));
  </script>
</body>

</html>