關於創建React App的8個有趣事實

Create React App 是搭建React項目的快速方法，這樣我們可以重點放在代碼上，而不是構建工具上。

事實1：可以使用單個命令創建完整項目

這個神奇的命令可以通過以下三種方式之一調用：

<code>npx create-react-app my-app
npm init react-app my-app
yarn create react-app my-app/<code>

Facebook保證其所有基礎組件（Webpack，Babel，ESLint，Jest等）可以無縫地協同工作。

開箱即用，將設置以下腳本：

• npm start: 在開發模式下運行該應用程序，然後打開 http://localhost:3000 在瀏覽器中查看它。
• npm run build: 將用於生產的應用程序構建到build文件夾，該版本已精簡併準備部署。
• npm test: 以交互方式運行測試觀察程序。它運行與自上次提交以來更改的文件相關的測試。

事實2：React項目可以從特定模板開始

前面的命令可以用一個特定的模板定製：

<code>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]/<code>

如果你想從TypeScript的React項目開始，只需使用模板 cra-template-typescript。默認模板為 cra-template。

如果您想利用社區資源，請訪問此網站，當前有170個模板。

事實3：一個依賴項是Create React應用程序的第一原則，這個構建依賴項不在devDependencies部分

一個依賴關係是三個Create React App哲學中的第一個，你可以在以下 package.json 中找到此構建依賴項嗎？

<code>{
  "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"
  },/<code>

在 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的源代碼版本控制。

<code>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/<code>

事實5：Jest可以使用絕對路徑

Jest是Create React App的默認測試運行程序。默認情況下，Jest在__tests__

這是來自Create React App的 App.test.js。該測試用例使用相對路徑：

<code>import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(, div);
  ReactDOM.unmountComponentAtNode(div);
});/<code>

如果將App更改為使用絕對路徑，如下所示，此測試用例將中斷：

<code>import React from 'react';
import ReactDOM from 'react-dom';
import App from 'App';
it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(, div);
  ReactDOM.unmountComponentAtNode(div);
});/<code>

可以通過添加 modulePaths 選項來修復它：

<code>{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --modulePaths=src",
    "eject": "react-scripts eject"
  },
}/<code>

如果您使用react-app-rewired，還可以通過配置config-overrides.js來修復它：

<code>module.exports = {
  jest: config => {
    config.moduleNameMapper = {
      '^@(.*)$': '<rootdir>/src$1'
    };
    return config;
  },
};/<rootdir>/<code>

事實6：創建React應用程序可以處理CORS（跨域資源共享）錯誤

你是否遇到以下錯誤？

<code>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./<code>

當API使用與Web服務器不同的主機或端口時，此錯誤將阻止您的應用程序運行。

通過在 package.json 中添加代理配置，Create React App提供瞭解決此問題的方法：

<code>{
  “proxy”: “http://myhost.com:4000",
}/<code>

此代理選項支持HTTP，HTTPS和WebSocket連接。

如果有多個API服務器怎麼辦？

替代解決方案需要安裝 http-proxy-middlewar

<code>npm install --save http-proxy-middleware/<code>

另外，在根目錄中創建並配置 src/setProxy.js。以下是 src/setProxy.js 的示例。對 /api1/x 的調用將轉發到 http://myhost1:4000/api1/x，而對 /api2/y 的調用將轉發到 http://myhost2:5000/api1/y。

<code>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,
    })
  );
};/<code>

事實7：創建React應用程序可以配置要支持的瀏覽器

開箱即用，可以在 package.json 中看到以下瀏覽器列表。

<code>"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [ 

      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }/<code>

此配置控制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：

<code>npm install --save source-map-explorer/<code>

添加分析腳本：

<code>{
  "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"
  },
}/<code>

生成並運行分析命令：

<code>npm run build
npm run analyze/<code>

然後，bundle的使用情況將顯示在默認瀏覽器中：

原文：https://medium.com/better-programming/10-fun-facts-about-create-react-app-eb7124aa3785

翻譯：做工程師不做碼農

閱讀更多 做工程師不做碼農 的文章

關鍵字: 事實 Facebook 瀏覽器