React介紹
一款javascript前端框架,把用戶界面抽象成一個個的組件,按需組合成頁面,官網,與其他框架的共同點是,都採用虛擬dom,和數據驅動。
環境搭建
首先,我們需要安裝node.js,直接搜索並在官網下載安裝包。
node.js官網
選擇適合的版本後下載下來,並打開安裝程序,如下圖所示:
然後,根據安裝提示安裝node.js,npm包管理工具也會一同安裝。也可以通過yarn來安裝,官網安裝yarn
安裝完成後,打開cmd命令行,輸入 node -v 和 npm -v和yarn -v 來查看版本號,如果顯示則安裝完成。
官方腳手架
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 打包