基于 Create-React-App 的 React项目搭建

╰半夏微凉° 2023-02-28 01:51 14阅读 0赞

### **脚手架搭建 React** ###

**构建项目**

\# 全局安装脚手架

npm install -g create-react-app

\# 使用脚手架构建一个名为my-app的React项目

npx create-react-app my-app

**CSS Modules支持**

导入CSS文件文件的时候，可以用一个变量接收一下返回值。那么就可以直接通过它来访问CSS的内部样式类了。比如：

Button.module.css

.error {
    
      background-color: red;
    }

Button.js

import React, { Component } from 'react';
    
    import styles from './Button.module.css';
    
    class Button extends Component {
    
      render() {
    
        // reference as a js object
    
        return <button className={styles.error}>Error Button</button>;
    
      }}

**配合TypeScript**

在项目构建时使用如下命令

npx create-react-app my-app --typescript

**使用路由**

npm install --save react-router-dom

**安装bootstrap4**

npm install --save reactstrap bootstrap@4

在 src/index.js 文件的开头导入 Bootstrap CSS 和可选的 Bootstrap 主题 CSS ：

import 'bootstrap/dist/css/bootstrap.css';

// 在下面放置任何其他导入，

// 以便组件中的CSS优先于默认样式。

### **脚手架更改** ###

详细文档地址：

[https://github.com/timarney/react-app-rewired/blob/HEAD/README\_zh.md][https_github.com_timarney_react-app-rewired_blob_HEAD_README_zh.md]

**安装包**

npm install react-app-rewired --save-dev

**在根目录中创建一个 config-overrides.js 文件**

/\* config-overrides.js \*/

module.exports = function override(config, env) \{

//do stuff with the webpack config...

return config;

在override中更改webpack的配置

**替换 package.json 中 scripts 执行部分**

"scripts": \{

\-   "start": "react-scripts start",

\+   "start": "react-app-rewired start",

\-   "build": "react-scripts build",

\+   "build": "react-app-rewired build",

\-   "test": "react-scripts test --env=jsdom",

\+   "test": "react-app-rewired test --env=jsdom",

"eject": "react-scripts eject"

### **使用环境变量** ###

Create-React-App无法使用像Webpack一样的环境变量，可通过如下两种方式使用环境变量

**环境变量文件**

Create-React-App有三种环境production(build)，development(start)，test(test)，

其使用的对应的环境变量文件为

.env.production，.env.development，.env.test

在根目录下创建对应的环境变量文件即可

文件示例：

REACT\_APP\_FOO=aaa

REACT\_APP\_BAR=bbbb

注：环境变量必须以REACT\_APP\_开头

创建环境变量文件后可在js中访问，如：

process.env.REACT\_APP\_FOO

**在命令行添加环境变量**

安装包

npm install --save-dev cross-env

在命令行中使用

"start": "react-app-rewired start",

"start:server": "cross-env REACT\_APP\_SERVER=true react-app-rewired start",

运行start:server，在js中访问

if (process.env.REACT\_APP\_SERVER)

Create-React-App 官方文档地址：[https://www.html.cn/create-react-app/docs/getting-started/][https_www.html.cn_create-react-app_docs_getting-started]

[https_github.com_timarney_react-app-rewired_blob_HEAD_README_zh.md]: https://github.com/timarney/react-app-rewired/blob/HEAD/README_zh.md
[https_www.html.cn_create-react-app_docs_getting-started]: https://www.html.cn/create-react-app/docs/getting-started/