【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 [email protected] No description
npm WARN [email protected] No repository field.

+ [email protected]
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 [email protected] No description
npm WARN [email protected] No repository field.

+ [email protected]
added 2 packages in 1.45s

下載babel

npm i babel-standalone --save

##  輸出
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

+ [email protected]
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>