21、Create React App的使用-EW帮帮网

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

工程结构

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 字段并保存配置。

样式表设计

添加普通的.css文件

这是一种正常引用的方式

import './Button.css';

模块化csss文件

就是[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 # 启动并打开浏览器

21、Create React App的使用