【React】入门第一天

React.js

---

个人认为自己的前端知识体系不够完整，想接着疫情和找工作的时间里学习一下React.js。至于为什么选择React.js，因为Vue.js在3.0要转向Typescript了，学Vue也是学，学React.js也是学。而且我个人更加看好React.js，所以个人在这段时间内会以博客形式更新个人学习的进度。

什么是React.js?

---

React是Fackbook开发的JS库

特点

1. React不使用模板
2. React不是一个MVC框架
3. 响应式
4. React是一个轻量级的js库

原理

虚拟DOM- react把DOM抽象成一个js对象，虚拟DOM确保对界面上真正发送变化的部分进行实际的DOM操作。

基本环境搭建

---

react.js 核心文件

react-dom.js 渲染页面的DOM，必须依赖react.js

babel.js 将ES6转换成ES5，JSX语法转换成javascript，现今浏览器进行代码的兼容

下载

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

初始化项目，创建package.json

mkdir ReactProjects
cd ReactProjects 
mkdir react-demo
cd react-demo

npm init -y
## 输出
Wrote to /Users/laoshiren/ReactProjects/react-demo/package.json:

{
  "name": "react-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

下载核心包

npm i react --save
## 输出
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN react-demo@1.0.0 No description
npm WARN react-demo@1.0.0 No repository field.

+ react@16.13.0
added 6 packages from 3 contributors in 1.756s

   ╭────────────────────────────────────────────────────────────────╮
   │                                                                │
   │       New minor version of npm available! 6.4.1 → 6.14.2       │
   │   Changelog: https://github.com/npm/cli/releases/tag/v6.14.2   │
   │               Run npm install -g npm to update!                │
   │                                                                │
   ╰────────────────────────────────────────────────────────────────╯

此时文件已经有了node_modules

下载react-dom

npm i react-dom --save
## 输出
npm WARN react-demo@1.0.0 No description
npm WARN react-demo@1.0.0 No repository field.

+ react-dom@16.13.0
added 2 packages in 1.45s

下载babel

npm i babel-standalone --save

##  输出
npm WARN react-demo@1.0.0 No description
npm WARN react-demo@1.0.0 No repository field.

+ babel-standalone@6.26.0
added 1 package from 1 contributor in 2.881s

项目结构

Helloword

在项目下创建文件夹src，新建一个hello.html,引用这三个js文件

<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>

在body创建根节点，一个页面需要有一个根节点，这个根节点的子节点将会被react所管理。

<!--创建dom节点-->
<div id="reactDemo">
</div>

写入script片段

<script type="text/babel">
        let dom = <span> hello，world </span>
        ReactDOM.render(dom, document.getElementById("reactDemo"))
</script>