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

脚手架搭建 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

 

安装包

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/