Create React App 是搭建React项目的快速方法,这样我们可以重点放在代码上,而不是构建工具上。
事实1:可以使用单个命令创建完整项目
这个神奇的命令可以通d [ Q Y ]过以下三种方式之一调用:
npx create-react-app my-app
npm init react-app my-app
yarn create react-app my-app
Facebook保证其所有基础组件(Webpack,Babel,ESLint,Jest等)可以无缝地协同工作。
开箱即用,将设置以下脚本:
- npm start: 在开发模式下运行该应用程序,L E ~ { Y A y然后打开 http://localhost:3000 在浏览器中; Z G / J ^ 0 X查看它。
- np; K l z E 6 , |m run build: 将用于生产的应用程序构建到bui; r G q + ~ld文件夹,该版本已精简并准备部署。
- npm test: 以交互方式运行测; E X试J 2 t观察程序。它运行与自上次提交p = M R v以来更改的文件相关的测试。
事实2:React项目可以从特定模板开始
前面的命令可以用一个特定的模板定制:
npx create-react-app my-app --templatef , , y ~ L [template-name]
npm init react-app my-apd 7 `p --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.jso# R N C 7n 中找到此构建依赖项吗?
{
\"name\": \"my-react} / ; h _ * X G-app\",
\"dependencies\": {
\"react\": \"^16.12.0\",
\"react-dom\": \"^16.12.0\",
\"reac] _ X = o mt-scripts\":z K ^ m j o ^ , t \"3.2.0\"
},
\"scripts\": {
\"start\": \"react-scripts start\",
\"build\": \"react-scripts buW R ; X & p { ] xild\",
\"test\": \"react-scripts test\",
\"eject\": \"react-scripts eject\"
},
在 package.json 中,有三个依赖项,没有 devDependencies,这个依赖在哪里?
它是 react-scripts!
根据NPM依赖项定义,构建依赖项,即react-scripts,应该是一个devDependency。然而,它与 react 和react-dom 一起在依赖项部分中。
实际上,react* g h { t-scripts 是 devDepe1 M , 4 g A - 5ndency。由于某些实际原因,Facebook自从react-scripts 1.0.8起就将其作为依赖项。
事实4:无需配置是Create React AppK | V u C 2 T S的第二个理念——但这不是零配置
Create React App为开发和生产构建都设置了合理的配置。开发人员可以专注于编写代码,可以不进行任何配置。
下面是开箱即用的源代码目录树。我们实际上找到了一个配置文件 .gitignore,它用于github的源代码版本控制。
my-react-app/
node_modules/
pu_ t : s 5 @blic/
favi] 5 V C w &con.ico
index.html
logo192.png
logo512.png
manifest.json
robots.txt
src/
Apn b 5p.css
App.js
App.test.js
index.css
index.js
logo.svg
serviceWorker.js
.gitignoS 9 & j Hre
package-lock.json
package.json
README.md
事实5:Jest可以使用绝对路径
Jest是Create Rea} [ y J 1 e y ict App的默认测试运行程序。默认情况下,Jest在__tests__ 文件夹,.test.js 文件或 .spec.js 文件的 .js 文件中运行所c q Y P t L 5 y有测试用例。
这是来自Create React App的 App.test.js。该测试U } a . 3 P用例使用相对路径:
import Rea! s ; @ p 7 ! 0 /ct from \'react\';
import ReactDOM from \'reaC F = c N 6 h ^ct-dom\';
iP S F Kmport App from \'./App\';
it(\'renders without crashing\', () => {
const div = document.createElement(\'div\P M z u s - * @ 3');
Re^ O PactDOM.render(<App />@ y r;, div);
ReactDOM.unmountComponentAtNode(div);
}N % M L);
如果将App更改为使用绝对路径z ; : 6,如下所示,此测试用例将中断:
import React from \'react\';
import ReactDOM from \'react-dom\';
import App from \'App\';u W g f w # e `
it(\'renders without crashing\', () => {
const div = document.createElement(\: B 6'div\');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
可以通过添加 modulePaths 选项来修复它:
{
\"scripts\": {
\"start\": \"react-scripts start\",
\"build^ s m 5 | S c\": \"reactI & # , * g [ { x-scripts build4 o g U i ~ m j\",
\"test\": \"react-scrn l Y ( 4 0ipts test --modulePaths=src\",
\"eject\( : A g , J": \"react-scripts eject\"
},
}
如果您使用react-app-rewird c Oed,还可以通过配置config-overrides.js来修复它:
module.exports = {
jest: config => {
config.moduleNam6 n u S p eMapper = {
\'^@(.*)$\': \'<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 p 2 R | A $ @ |resent on the requested resource.
Origin \'http://localhost:3000\' is therefore not allowed{ $ s y access.
If an opaque response serves your needs, set the requestr e - A v - _\'s mode to
\'no-cors\' to fetch the resource with CORS disabled.
当API使用与Web服务器不同的主机或端口时,此错误将阻止您的应用程序运行b x v B J { [。
通过在 package.json 中添加代理配置,Create React App提供了解决此问题的方法:
{
“proxy”: “http://myF 5 Q a Y _ M % )host.cP Yom:4000\",
}
此代理选项M K S X , _支持HTTP,HTTPS和WebSocket连接。
如果有多个API服务器怎么办?
替代解决方案需要安装s H _ H http-proxy~ m | , @ ^ L D-middlewar:
npm install --save http-proxy-middleware
另外,在根目录中创建并配置 src/setProxy.js。以下是 src/setProxy.js 的示例。对 /; U 5 o j 7 G ! ~api1/x 的调用将转发到 http://myhost1:4000/api1/x,C c ] B ; v E而对 /api2/y 的调用将转发到 http://myhost2:5000/api1/y。
const proxy = require(\'http-proxD n My-middleware\'L ^ f);
module.exports = function(app) {
app.! N ,use(
\'/n 6 f x { t G S Papi1\',
proxy({
target: \'http://myho~ 9 Y I } B + % Kst1:4000\',
changeOrigin: true,
})
);
app.usM L 7 Y ( S i Ke(
\'/api2\',
proxy({
target: \'http://myhost2:5000\',
changeOrigin: true,
})
);
};
事实7:创建React应用程序可以配置要支持的浏览器
开箱即用,可以在 package.jsonv w 0 K J 中看到以下浏览器列表。
\"browserslist\": {
\"production\": [
\">0.2%\",
\"not dead\_ y W f",
\"not op_mini all\"
],
\"development\": [
\"last 1 chrome veK r ,rsion\",
\"last 1- u 7 t F v 5 : firefox ver) ? Ksion\"p ? C @ = O,
\"last 1 safari versionF ( 3 m p x Y D W\"{ z W
]
}
此配置控制Babel如何将JavaScript转换为与指定的浏览器兼容,以进行生产和开发。查看https://broO _ 0 i A 5 wwserl.ist以获取有关如何配置浏览器列表的信息。
对于CreZ ) O Eate React App的默认浏览器列表配置,生产代码的目标是92%的浏览器:
对于Create React App的默认浏览器列表配置,开发代码的目标是26%的浏览器:
事j m ] Z ? `实8:可以分析生成的bundle包
Create React App隐藏了很多细节和复杂性。生成最终bundle包后,您是否有兴趣分析其空间使用情况?
source-map-explorer 使您能够通过源映射分析和M T h d f M调试空间使用7 1 r ` _ c s情况。安装source-map-explorer:
npm install --save source-map-explorer
添加分析脚本:
{
\"scripts\": {
\"analyze\": \"souq & Y ,rce-map-explorer \'build/static/js/*.js\'\",
\"start\J I p": \"react-scripts s9 j ntart\",
\"build\": \"react-scriptsd build\",
\/ t q v C h ["test\": \"react-scripts test^ v k : 5 6 M\",
\"eject\": \"react-scripts eject\"
},
}
生成并运行分析命令:
npm run build
nD 0 Lpm run analyze
然后,bundle的使用情况将显示在默认浏览器中:
原文:https://medium.com/better-programming/10-fun-facts-aF X O z ? $bout-create-react-app-eb7124aa3785
作者:Jennifer Fu
翻译:k ( E 1 T w F B做工程师不做码农