React入門——項目搭建

React介紹

一款javascript前端框架，把用戶界面抽象成一個個的組件，按需組合成頁面，官網，與其他框架的共同點是，都採用虛擬dom，和數據驅動。

環境搭建

首先，我們需要安裝node.js，直接搜索並在官網下載安裝包。
node.js官網
選擇適合的版本後下載下來，並打開安裝程序，如下圖所示：

然後，根據安裝提示安裝node.js，npm包管理工具也會一同安裝。也可以通過yarn來安裝，官網安裝yarn

安裝完成後，打開cmd命令行,輸入 node -v 和 npm -v和yarn -v 來查看版本號，如果顯示則安裝完成。

官方腳手架

安裝 create-react-app

yarn global add create-react-app | npm install create-react-app -g

環境配置

npm run eject | yarn eject

報git錯誤時: 
git add . -> git commit -m 'init' -> yarn eject
報缺少babel 包: 安裝一下

//去除eslint 警告
//config/webpack.config.js
//註釋關於eslint的導入和rules規則

yarn eject 解構出所有的配置文件->config 和scripts

npm安裝，全局安裝create-react-app腳手架工具，然後就可以使用命令創建新的react項目。

其中，node_modules用於存放項目的依賴包，也就是構建這個React項目可能會用到的工具，

          --public文件夾中是 index.html存放目錄，也就是React根頁面的所在地

          --src中用於存放js文件，也就是項目開發中的主要區域

          --package.json用於記錄項目信息，以及外部依賴包的導入信息等

          --json文件不能直接打開，需要用到文本編輯器，本人用的是VScode

創建 react項目

create-react-app 目錄 | npx create-react-app 目錄 | npm init react-app 目錄

//調試 需要安裝給chrome瀏覽器一個插件 react-dev-tools

運行

yarn start |  npm start 	 開發
yarn build |  npm run build	 打包