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
工程结构
my-app/README.mdnode_modules/package.jsonpublic/index.htmlfavicon.icosrc/App.cssApp.jsApp.test.jsindex.cssindex.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.0React工程配置
需要在工程中创建一个名为serve.json的文件，然后配置以下内容
{"port": 8080,"single": true,"open": true,"ignore": ["node_modules"]
}
运行React工程
进入到当前工程目录下，输入以下指令
serve # 启动当前目录为服务器， 访问地址：http://localhost:3000
server --open # 启动并打开浏览器