Create React App
是FaceBook的React团队官方出的一个构建React
单页面应用的脚手架工具。它本身集成了Webpack
,并配置了一系列内置的loader
和默认的npm的脚本,可以很轻松的实现零配置就可以快速开发React的应用。
首先确保你电脑上安装最新的
# 全局安装
npm install -g create-react-app
# 构建一个my-app的项目
npx create-react-app my-app
cd my-app
# 启动编译当前的React项目,并自动打开 http://localhost:3000/
npm start
以上命令执行完成后,则自动打开: http://localhost:3000/
如果你不能确保最新版本,可以先尝试卸载:
npm uninstall -g create-react-app
,然后再全局安装。
# npm init <initializer> is available in npm 6+
npm init react-app my-app
# yarn create is available in Yarn 0.25+
yarn create react-app my-app
项目的默认目录:
├── package.json
├── public # 这个是webpack的配置的静态目录
│ ├── favicon.ico
│ ├── index.html # 默认是单页面应用,这个是最终的html的基础模板
│ └── manifest.json
├── src
│ ├── App.css # App根组件的css
│ ├── App.js # App组件代码
│ ├── App.test.js
│ ├── index.css # 启动文件样式
│ ├── index.js # 启动的文件(开始执行的入口)!!!!
│ ├── logo.svg
│ └── serviceWorker.js
└── yarn.lock
启动开发
npm start
# or
yarn start
启动测试
npm test
#or
yarn test
构建生产版本
npm run build
#or
yarn build
解压默认的webpack配置到配置文件中
npm run eject
sass
react-scripts@2.0.0 以上版本才适用。
要使用Sass必须首先安装node-sass
$ npm install node-sass --save
$ # or
$ yarn add node-sass
安装完之后,我们就可以直接把原来的CSS文件后缀直接改为 .scss
或者.sass
,然后组件中导入的文件不再是 css文件而给我scss文件即可。
import React, {Component} from 'react';
import store from './Store/Index';
import {AddNumCreator, MinusNumCreator} from './Store/ActionCreaters';
import './App.scss';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<h1>潇洒</h1>
</header>
</div>
);
}
}
export default App;
引入src中的scss文件 @import 'styles/_colors.scss';
引入node_modules
中的样式: @import '~nprogress/nprogress';
~ 就代表: node_modules
导入CSS文件或者Sass文件的时候,可以用一个变量接收一下返回值。那么就可以直接通过它来访问CSS或者Sass中的内部样式类了。比如:
.error {
background-color: red;
}
import React, { Component } from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles
class Button extends Component {
render() {
// reference as a js object
return <button className={styles.error}>Error Button</button>;
}
}
结果:
<!-- This button has red background -->
<button class="Button_error_ax7yz">Error Button</button>
了解更多关于CSS模块化
公共目录里面的内容不会被webpack进行处理,仅仅会拷贝到最终生成的项目的根目录下。
在public
目录中有个index.html
是单页面应用的基本模板,所有react生成的代码都会注入到此HTML中。所以此处可以添加一些cdn脚本或者全局的html。
在公共目录下,你可以放字体文件、图片、svg等文件,访问这些文件最好添加 %PUBLIC_URL%
作为根目录。
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
巧妙的使用环境变量可以帮我们在项目中区分开生产环境还是编译环境,从而执行不同的代码。
set "REACT_APP_NOT_SECRET_CODE=abcdef" && npm start
($env:REACT_APP_NOT_SECRET_CODE = "abcdef") -and (npm start)
REACT_APP_NOT_SECRET_CODE=abcdef npm start
.env
项目根目录下创建.env
文件,文件内部添加 key=value
的配置可以直接应用于项目的编译中。
REACT_APP_NOT_SECRET_CODE=abcdef
Note: 如果创建自定义的环境变量必须以
REACT_APP_
开头.
在项目中可以直接用process.env.XXX
访问我们的自定义的环境变量。比如:
render() {
return (
<div>
<small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
<form>
<input type="hidden" defaultValue={process.env.REACT_APP_NOT_SECRET_CODE} />
</form>
</div>
);
}
再比如:判断是否是生产环境
if (process.env.NODE_ENV !== 'production') {
analytics.disable();
}
<title>%REACT_APP_WEBSITE_NAME%</title>
第一种方式:创建项目的时候直接配置好TypeScript
.
npx create-react-app my-app --typescript
#or
yarn create react-app my-app --typescript
第二种方式:为现有的React项目添加TypeScript
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
# or
yarn add typescript @types/node @types/react @types/react-dom @types/jest
package.json
配置代理配置简单代理,直接在package.json文件中添加proxy节点即可:
{
...
"proxy": "http://localhost:4000",
...
}
第一步:安装 http-proxy-middleware
$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware
第二步:创建: src/setupProxy.js
添加如下内容:
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(proxy('/api', { target: 'http://localhost:5000/' }));
};
## Visual Studio Code配置React开发环境
### React集成VSCode测试
第一步:
首先安装:[`Debugger for Chrome`](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)插件。
第二步: 项目根目录下创建 `.vscode`文件夹。
第三步:创建`launch.json`文件
文件内容:
```json
{
"version": "0.2.0",
"configurations": [
{
"name": "Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
此时可以F5
直接启动测试了。
有时候需要用HTTPS进行调试相关结构,所以需要把静态站也做成HTTPS的,那么以下配置:
配置HTTPS
的环境变量为true
然后再用npm start
启动dev server
就是HTTPS的了。
set HTTPS=true&&npm start
($env:HTTPS = "true") -and (npm start)
HTTPS=true npm start
浏览器可能有安全警告,不用管,直接测试,enjoy it!
Source map explorer
可以帮助我们分析代码最终打包的bundles
的代码来自哪里,
安装:
npm install --save source-map-explorer
#or
yarn add source-map-explorer
添加分析脚本到package.json
的scripts
中:
"scripts": {
+ "analyze": "source-map-explorer build/static/js/main.*",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
那么就可以运行以下命令进行分析最终打包的情况了:
npm run build
npm run analyze
AICODER官网地址:https://www.aicoder.com/
AICODER分享地址: https://www.aicoder.com/news/5c1afb763139e4295bd5330a/news.html
链接:https://www.jianshu.com/p/77bf3944b0f4