1挤安、新建react 文件夾? ?進入文件夾 執(zhí)行命令 npm init -y 會出現(xiàn)package.json 文件
2导梆、新建src 文件夾? dist 文件夾
3腹躁、在src下創(chuàng)建一個新的index.html 文件 丹擎，在src 下創(chuàng)建 main.js 文件
4砌滞、打開項目 安裝 webpack? 執(zhí)行? npm i webpack -D
5、安裝 webpack-cli? ? 執(zhí)行 npm i webpack-cli -D
合并命令： 第四步 第五步 可以 合并執(zhí)行命令 npm i webpack webpack-cli -D
6念链、項目下新建??webpack.config.js? 文件 寫入 JS 代碼（?或者 mode 模式為 production）
兩個模式的區(qū)別 大概就是 文件大小的區(qū)別
module.exports = {
mode:'development'
}
注意：在webpack 4.x 版本中? 有 約定大于配置的約定 默認的打包路徑 是src-> index.js? 所以可以講上面步驟中建的main.js 文件改名為index.js
執(zhí)行 webpack 的時候會有報錯信息
如圖
如果 碰到 此命令 則 執(zhí)行?Set-ExecutionPolicy Unrestricted -Scope CurrentUser? ?這個命令解決問題
以上步驟 為手動引入文件 每次更新文件都需要 再次打包 執(zhí)行webpack 盼忌。
7、執(zhí)行? npm i webpack-dev-server -D
8掂墓、在package.json 中增加 dev 命令? 如圖
9碴犬、增加 后執(zhí)行命令 npm run dev 項目輸出 如圖
重新整理項目文件目錄 新建public 文件夾
將src 目錄下的index.html 文件移動到?public 下 ，重新啟動項目 即可
10梆暮、配置實時打包功能? 執(zhí)行命令? npm i html-webpack-plugin -D? ?
11服协、導入在內(nèi)存中自動生成的index頁面插件
12、增加 如下代碼?
這樣的話 我們就可以刪掉在public / index.html 中手動引入的main.js 文件了
13啦粹、執(zhí)行 npm i react react-dom -S? 安裝react-dom? ?：專門進行dom 操作偿荷，主要應(yīng)用場景就是ReactDom.render()，
react:專門用于創(chuàng)建組件和虛擬dom唠椭，同事組件的生命周期都在這個包中
14跳纳、引入 react 和? react-dom
引入 創(chuàng)建 掛載? 等操作
15、React.createElement 參數(shù)說明
參數(shù)1：創(chuàng)建元素的類型贪嫂，字符串寺庄，標識元素名稱
參數(shù)2：一個對象，其中綁定例如 class title 等屬性參數(shù)力崇，或者為null
參數(shù)3：綁定節(jié)點或者子節(jié)點斗塘。
參數(shù)n：其他節(jié)點
16、ReactDOM.render() 參數(shù)說明
參數(shù)1：要渲染的虛擬dom元素
參數(shù)2：指定html頁面中 的一個元素容器
17亮靴、實現(xiàn)嵌套 如圖
18茧吊、執(zhí)行命令?
npm i babel-core babel-loader babel-plugin-transform-runtime -D （插件）
npm i babel-preset-env babel-preset-stage-0?babel-preset-react -D? （語法）
這三個執(zhí)行完后 再進行配置贞岭，就可以將JSX語法轉(zhuǎn)換成瀏覽器識別的react-creatElement
19八毯、安裝完后 在webpack.config.js 文件中配置剛才安裝的第三方loader。webpack默認只能處理打包瞄桨，.js 后綴類型的文件话速；像.png .vue 等其他文件類型，無法主動處理芯侥，所以需要配置第三方loader
根目錄下新建??.babelrc 文件 再配置 剛才安裝好的第三方loader
{
"presets": ["env","stage-0","react"],
"plugins": ["transform-runtime"]
}
注意：把上面所有的步驟執(zhí)行完后 再重新運行 npm run dev 你的項目可能會報?Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.?這個錯誤尿孔，這是因為安裝的babel-loader 版本不兼容導致的〕雉铮可以把你本地的 babel-loader 版本切換為^7.1.2
刪除掉原來的node_modules 包，重新執(zhí)行 npm install? 安裝好后 再執(zhí)行 npm run dev 運行 則無報錯信息
20雏婶、配置 webpack 導入組件的時候省略文件后綴 如圖
21物赶、設(shè)置引入文件或者組件? alias 別名
以上步驟 完成后 基本上react 的框架就搭建完畢了，項目運行成功留晚；
接下來引入一下第三方UI組件
我選擇的是? ant-design 的UI 組件? 官網(wǎng)：https://ant.design/docs/react/introduce-cn
執(zhí)行安裝命令??npm install antd --save? ?
注意 ：有的時候執(zhí)行上面步驟的會報錯 這是因為npm 版本兼容問題導致的? 如圖報錯
碰到這種情況的話? 就執(zhí)行 cnpm? 操作酵紫。
今天就消化到這里吧，明天再去解決安裝UI 控件 樣式導入的問題错维，
還有一個 CSS 樣式 模塊處理的問題需要回顧一下奖地。基本上 整個react.js 的框架就搭建完畢了赋焕。
哦参歹，還有一個 axios 還沒有處理。
22隆判、處理引入的 css 文件問題
執(zhí)行?npm i style-loader css-loader -D? ??打包處理CSS樣式的第三方loader
配置文件中要增加 相應(yīng)的規(guī)則 如圖
23犬庇、安裝 處理第三方字體文件的loader?
執(zhí)行?
npm i url-loader -D??
npm i file-loader -D
配置文件中增加 對應(yīng)的匹配規(guī)則 如圖
24、執(zhí)行??
cnpm i sass-loader node-sass -D
注意：
其實我上圖的這個報錯 是因為我引入的文件錯誤侨嘀，之前引入了.less的樣式文件臭挽，后來改為.css的文件就不報錯了。但是還是需要安裝對應(yīng)的sass loader 工具咬腕，寫自己的樣式欢峰。
