這篇文章主要介紹了react以create-react-app為基礎創建項目，現在分享給大家，也給大家做個參考。
什麼是create-react-app
create-react-app是一個js庫，使用它能夠很方便地建立react項目，免去了建立react專案時配置webpack、偵錯伺服器、執行腳本等麻煩，你只需要使用這個函式庫，便可以一鍵完成react專案的建立初始化專案
首先，要先利用create-react-app建立一個react項目，可參考https://github.com/facebookincubator/create-react-app
註：用「[ ]」包裹的都是可自訂的內容，例如： cd [project-name]，其實可能是cd my-app，也可能是cd my-project。總之「[ ]」包裹的內容，只表示上下文裡相互對應的變數。
npm install -g create-react-app create-react-app [project-name] cd [project-name]
執行完以上指令就已經處在新建的專案中了，此時執行npm run start和npm run build了。但是，預設所有配置是隱藏起來的，要想自訂配置，需要執行一個命令：
npm run eject
此時會提示，該命令不可逆，是否繼續，輸入y，這樣所有配置項就都出來了。這時候也可以做一些客製化的配置了，比如：
修改build後的output位置
js / css / img等靜態資源會預設輸出到build -> static 下面，其組態項目在config -> webpack.config.prod.js 裡。
js在output屬性裡，大約第60行；
css在開頭的cssFilename變數聲明，大約第38行;
圖片等在module -> rules的loader配置裡，大約第143行；
不eject其他修改配置的方法
react等作為全域變數不打包
module.exports = {
...
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
},
...
}#key對應的是庫的名字，value對應的是全域變數的名字。這裡要注意，全域變數的名字要與程式碼中import的名字一致，要確保規範。
另外，這裡要修改下 html-webpack-plugin 外掛程式配置的範本文件，因為需要加入全域變量，所以加入對應的script即可。以public -> index.html 為例：<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <!-- code here --> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <p id="root"></p> <!-- code here --> <!-- 新插入的两个js --> <script src="http://st01.chrstatic.com/themes/chr-cdn/react/v0.14.8/react.min.js"></script> <script src="http://st01.chrstatic.com/themes/chr-cdn/react/v0.14.8/react-dom.min.js"></script> </body> </html>
npm install sass-loader node-sass --save-dev
npm install less-loader less --save-dev
安装后修改config -> webpack.config.dev.js 和 webpack.config.prod.js，分别在css的loader配置里面修改两处：
一是 test: /\.css$/ 增加scss和sass；二是use里面最后再加个loader，直接加 "sass-loader" 就可以了，也不用配置别的了（less同）。
//test: /\.css$/
test: /\.(css|scss|sass)$/
...
use:[
{
...
},
"sass-loader"
]添加ant-design
安装antd及按需加载的插件babel-plugin-import，参考https://ant.design/docs/react/introduce-cn
npm install antd babel-plugin-import --save-dev
在config -> webpack.config.dev.js 和 webpack.config.prod.js 里（或者 .babelrc 文件）的babel-loader的options配置里，加入如下代码：
plugins: [
['import', { libraryName: 'antd', style: 'css' }] // `style: true` 会加载 less 文件
]如果启用了 style:true 那就必须是装less了
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
以上是react以create-react-app為基礎建立項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！
