21、Create React App的使用

Create React App 是官方支持的创建单页 React 应用程序的方法。提供了一个现代的构建设置，无需配置。不建议全局安装。如果本地安装过可先卸载，这样能保证每次创建项目时使用最新版本的功能。

开始使用

可以使用npx， npm， yarn指令都可以， 这里先以npx（适合执行一次性指令）为例说明：

安装运行

### 全局卸载
 npm uninstall -g create-react-app

### 创建工程，my-app-name为自定义的工程文件夹名称
npx create-react-app@latest my-app-name

### 也可以采用官方提供的模板创建，模板网站 https://www.npmjs.com/search?q=cra-template-*
npx create-react-app my-app --template [template-name]

### 比如
npx create-react-app my-app --template typescript

安装完成后，可使用以下指令来操作工程

### 运行，测试，压缩打包，删除重新构建
npm start
npm test
npm run build
npm run eject

HTTPS=true npm start ## HTTPS启动

上面的https也可以设计到package.json中的脚本中，修改start指令如下：

{
  "start": "HTTPS=true react-scripts start"
}

工程结构

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js  # js入口文件
    logo.svg

调试开发

在 WebStorm 菜单 Run 中选择 Edit Configurations…。然后单击 + 并选择 JavaScript Debug。将 http://localhost:3000 粘贴到 URL 字段并保存配置。

ESLint检查

代码检查（Code linters）可以在你编写代码时，发现代码中的问题，以帮你尽早修复。这在 React 项目中是必备的，同时能帮助你及早的捕获较为严重的 bug，可直接集成以下两个插件：

• react通用配置检查
• hooks代码检查

以上检查插件均需基于create react app创建的项目有效。

三方工具

source-map-explorer

用于分析源码映射的一个工具，在工程的根目录下执行以下指令安装

npm install --save source-map-explorer

然后在package.json中做添加如下配置

   "scripts": {
+    "analyze": "source-map-explorer 'build/static/js/*.js'",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

最后执行，会自动打开一个分析报告

npm run build # 所有文件生成在build文件夹下，静态可部署的
npm run analyze

样式表设计

添加普通的.css文件

这是一种正常引用的方式

import './Button.css'; 

模块化css文件（不太推荐）

就是[name].module.css 这样命名，然后react有一个自动绑定的功能

import styles from './Button.module.css';

解决重复导入问题

可以比如index.css或App.css这新的总文件入口添加@import-normalize;，但需要注意浏览器是否支持

@import-normalize; /* bring in normalize.css styles */

/* rest of app styles */

添加图像、字体

import logo from './logo.png';
import { ReactComponent as Logo } from './logo.svg';

return <img src={logo} alt="Logo" />;

加载 .graphql 文件

先安装

npm install --save graphql graphql.macro

然后程序中这样使用

import { loader } from 'graphql.macro';

const query = loader('./foo.graphql');

工程部署

通过build打包后就可以部署应用了，通常需要借助一个nginx或tomcat来部署，但也可能通过一个静态服务器来部署（node运行环境）。

• 端口冲突：若端口被占用，serve 会提示并退出，需手动指定其他端口。
• 跨域问题：serve 默认不处理CORS，需通过代理或后端配置解决。
• 生产环境：serve 仅用于开发环境，生产环境建议使用 nginx 或 Express。

安装

## 在端口 3000 上为您的静态站点提供服务，安装后就可以使用serve指令了
npm install -g serve
serve -h # 查看所有帮助选项

全局配置

安装后可通过指令配置端口等

serve -p 8080 #serve --port 8080
serve -s build -l 4000 # 调整端口为4000

#---------------------------------------------------
-p, --port <port>	指定端口（默认 3000）
-s, --single	单页应用模式（SPA，路由重定向到 index.html）
-o, --open	自动打开浏览器
-c, --config	指定配置文件（如 serve.json）
-a, --auth	启用基础认证（需用户名:密码）

#启用 HTTPS
serve --ssl --cert /path/to/cert.pem --key /path/to/key.pem
#启动认证
serve --auth username:password
# 允许外部访问
serve --listen 0.0.0.0

React工程配置

需要在工程中创建一个名为serve.json的文件，然后配置以下内容

{
  "port": 8080,
  "single": true,
  "open": true,
  "ignore": ["node_modules"]
}

运行React工程

进入到当前工程目录下，输入以下指令

serve # 启动当前目录为服务器， 访问地址：http://localhost:3000
server --open # 启动并打开浏览器