這篇文章主要介紹了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了。但是，預設所有配置是隱藏起來的，要想自訂配置，需要執行一個命令：
此時會提示，該命令不可逆，是否繼續，輸入y，這樣所有配置項就都出來了。這時候也可以做一些客製化的配置了，比如：
修改build後的output位置
js / css / img等靜態資源會預設輸出到build -> static 下面，其組態項目在config -> webpack.config.prod.js 裡。
js在output屬性裡，大約第60行；
css在開頭的cssFilename變數聲明，大約第38行;
圖片等在module -> rules的loader配置裡，大約第143行；
##map檔案由devtool屬性控制，如果不要map，註解掉就可以，大約第57行；
manifest.json在ManifestPlugin的配置裡，大約294行；
#基礎模板在HtmlWebpackPlugin的設定裡，但可以看到，是引的 './paths.js' 文件，所以要修改config -> paths.js 裡面的appHtml 屬性；
預設在build時會清空build目錄，設定項是scripts -> build.js 裡的fs.emptyDirSync(paths.appBuild); 這一句，註解掉就不會把舊檔案刪掉了（灰階發布的時候可能會用到）;
不eject其他修改配置的方法
#除了npm run eject 暴露出所有設定檔外，還有其他辦法修改配置，由於本文主題原因不做展開，僅給出相關鏈。
一個（部分人認為）比較優雅的方法，即引入 react-app-rewired 外掛程式來實現配置覆蓋。需要在根目錄新建一個 config-overrides.js 文件，想配置啥就寫啥（怎麼又多出來一種配置。。），還需要重寫npm start等相關命令，詳情點擊鏈接查看。
另一個可參考create-react-app的git主頁上推薦的Adding a CSS Preprocessor (Sass, Less etc.) 範例。大概想法就是先安裝一個node環境可編譯sass的插件node-sass-chokidar，然後利用npm-run-all同時執行npm start 和 watch-css（監聽sass檔的指令）。個人覺得繞了個大圈，還是再議。 。 。
react等作為全域變數不打包
為了利用cdn，我們常會在頁面裡引用react或其他類似函式庫的script標籤，這樣在瀏覽器環境裡就有了對應的全域變量，同時減少了js的體積。下面以react為例。
先在config -> webpack.config.prod.js 的設定中加入以下程式碼：
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>
登入後複製
問：既然瀏覽器裡面都有了全域變量，如window.React，那麼程式碼裡面其實就不用import React from 'react' 了，更進一步，如果連react都不用引了，那麼設定externals又有什麼用呢（這個地方好好縷縷，是不是這個理）？ #########答：如果按照上面所說，去掉import和external，build出來的檔案是可以順利的在瀏覽器端運行的。但是如果開發的時候是起的server，那麼server端就沒辦法分析引用了，也就沒辦法做到熱更新了，另外，對於前後端同構來說，服務端也是找不到依賴的。所以，如果你是開著靜態檔案的監聽，並且手動刷新瀏覽器的話，不import和external理論上是沒問題的。 #########安裝sass或less（以sass為例）#############
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了
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Vue实现搜索 和新闻列表功能简单范例
vue axios 表单提交上传图片的实例
vue中实现图片和文件上传的示例代码
以上是react以create-react-app為基礎建立項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！
