Create React App 是搭建React專案的快速方法，這樣我們可以重點放在程式碼上，而不是構建工具上。
事實1：可以使用單個命令建立完整專案
這個神奇的命令可以通過以下三種方式之一呼叫：
npx create-react-app my-appnpm init react-app my-appyarn create react-app my-appFacebook保證其所有基礎元件（Webpack，Babel，ESLint，Jest等）可以無縫地協同工作。
開箱即用，將設定以下指令碼：
npm start: 在開發模式下執行該應用程式，然後開啟 http://localhost:3000 在瀏覽器中檢視它。npm run build: 將用於生產的應用程式構建到build資料夾，該版本已精簡併準備部署。npm test: 以互動方式執行測試觀察程式。它執行與自上次提交以來更改的檔案相關的測試。事實2：React專案可以從特定模板開始前面的命令可以用一個特定的模板定製：
npx create-react-app my-app --template [template-name]npm init react-app my-app --template [template-name]yarn create react-app my-app --template [template-name]如果你想從TypeScript的React專案開始，只需使用模板 cra-template-typescript。預設模板為 cra-template。
如果您想利用社群資源，請訪問此網站，當前有170個模板。
事實3：一個依賴項是Create React應用程式的第一原則，這個構建依賴項不在devDependencies部分一個依賴關係是三個Create React App哲學中的第一個，你可以在以下 package.json 中找到此構建依賴項嗎？
{ "name": "my-react-app", "dependencies": { "react": "^16.12.0", "react-dom": "^16.12.0", "react-scripts": "3.2.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },在 package.json 中，有三個依賴項，沒有 devDependencies，這個依賴在哪裡？
它是 react-scripts！
根據NPM依賴項定義，構建依賴項，即react-scripts，應該是一個devDependency。然而，它與 react 和react-dom 一起在依賴項部分中。
實際上，react-scripts 是 devDependency。由於某些實際原因，Facebook自從react-scripts 1.0.8起就將其作為依賴項。
事實4：無需配置是Create React App的第二個理念——但這不是零配置Create React App為開發和生產構建都設定了合理的配置。開發人員可以專注於編寫程式碼，可以不進行任何配置。
下面是開箱即用的原始碼目錄樹。我們實際上找到了一個配置檔案 .gitignore，它用於github的原始碼版本控制。
my-react-app/ node_modules/ public/ favicon.ico index.html logo192.png logo512.png manifest.json robots.txt src/ App.css App.js App.test.js index.css index.js logo.svg serviceWorker.js .gitignore package-lock.json package.json README.md事實5：Jest可以使用絕對路徑Jest是Create React App的預設測試執行程式。預設情況下，Jest在__tests__ 資料夾，.test.js 檔案或 .spec.js 檔案的 .js 檔案中執行所有測試用例。
這是來自Create React App的 App.test.js。該測試用例使用相對路徑：
import React from 'react';import ReactDOM from 'react-dom';import App from './App';it('renders without crashing', () => { const div = document.createElement('div'); ReactDOM.render(<App />, div); ReactDOM.unmountComponentAtNode(div);});如果將App更改為使用絕對路徑，如下所示，此測試用例將中斷：
import React from 'react';import ReactDOM from 'react-dom';import App from 'App';it('renders without crashing', () => { const div = document.createElement('div'); ReactDOM.render(<App />, div); ReactDOM.unmountComponentAtNode(div);});可以通過新增 modulePaths 選項來修復它：
{ "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --modulePaths=src", "eject": "react-scripts eject" },}如果您使用react-app-rewired，還可以通過配置config-overrides.js來修復它：
module.exports = { jest: config => { config.moduleNameMapper = { '^@(.*)$': '<rootDir>/src$1' }; return config; },};事實6：建立React應用程式可以處理CORS（跨域資源共享）錯誤你是否遇到以下錯誤？
Fetch API cannot load http://myhost.com:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.當API使用與Web伺服器不同的主機或埠時，此錯誤將阻止您的應用程式執行。
通過在 package.json 中新增代理配置，Create React App提供了解決此問題的方法：
{ “proxy”: “http://myhost.com:4000",}此代理選項支援HTTP，HTTPS和WebSocket連線。
如果有多個API伺服器怎麼辦？
替代解決方案需要安裝 http-proxy-middlewar：
npm install --save http-proxy-middleware另外，在根目錄中建立並配置 src/setProxy.js。以下是 src/setProxy.js 的示例。對 /api1/x 的呼叫將轉發到 http://myhost1:4000/api1/x，而對 /api2/y 的呼叫將轉發到 http://myhost2:5000/api1/y。
const proxy = require('http-proxy-middleware');module.exports = function(app) { app.use( '/api1', proxy({ target: 'http://myhost1:4000', changeOrigin: true, }) ); app.use( '/api2', proxy({ target: 'http://myhost2:5000', changeOrigin: true, }) );};事實7：建立React應用程式可以配置要支援的瀏覽器開箱即用，可以在 package.json 中看到以下瀏覽器列表。
"browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }此配置控制Babel如何將JavaScript轉換為與指定的瀏覽器相容，以進行生產和開發。檢視https://browserl.ist以獲取有關如何配置瀏覽器列表的資訊。
對於Create React App的預設瀏覽器列表配置，生產程式碼的目標是92%的瀏覽器：
對於Create React App的預設瀏覽器列表配置，開發程式碼的目標是26%的瀏覽器：
事實8：可以分析生成的bundle包Create React App隱藏了很多細節和複雜性。生成最終bundle包後，您是否有興趣分析其空間使用情況？
source-map-explorer 使您能夠通過源對映分析和除錯空間使用情況。安裝source-map-explorer：
npm install --save source-map-explorer新增分析指令碼：
{ "scripts": { "analyze": "source-map-explorer 'build/static/js/*.js'", "start": "react-scripts start", "build": "react-scriptsd build", "test": "react-scripts test", "eject": "react-scripts eject" },}生成並執行分析命令：
npm run buildnpm run analyze然後，bundle的使用情況將顯示在預設瀏覽器中：
原文：https://medium.com/better-programming/10-fun-facts-about-create-react-app-eb7124aa3785
#React#