React create-react-app 安装和创建项目教程-博客-网页小功能

React create-react-app 安装和创建项目教程: 原创前端  2019-03-11 10:18:45  浏览：2078

### 一、下载安装create-react-app

```javascript
npm install -g create-react-app
```
安装完成后可以通过`create-react-app --version`命令查看版本

### 二、创建一个项目
##### 1、创建项目文件
```javascript
create-react-app  my-app
```
> 这可能要花几分钟等待。出现下图代表安装成功：
![](http://www.wyxgn.com//uploads/img1/20190311/6d67ccd36b93a90a5e2bbaa8068eaf39.png)

##### 2、最后我们开始进入项目根目录，运行项目试试

```javascript
cd my-app
npm start
```
![](http://www.wyxgn.com//uploads/img1/20190311/871e2d81a6f31b351307a049de921b6c.png)

![](http://www.wyxgn.com//uploads/img1/20190311/2384e34ad6a6711c211f4f7972ea2f03.png)

### 三、配置
> 使用Facebook官方推出的create-react-app脚手架，我们基本可以零配置搭建基于webpack的React开发环境。但是，如果需要个性化定制，则还需要基于create-react-app进行再配置

##### 1、.env（环境变量）
>在根目录下新建.env文件，可以用于本地环境变量覆盖,如在该文件中进行如下设置:

(1) 开发服务器会在2000端口开启服务
```javascript
PORT=2000 
```
(2) 如果要设置静态资源CDN，则需要在.env文件中设置PUBLIC_URL
```javascript
PUBLIC_URL = 'cdn url' 
```
 在HTML中使用
```html
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
```
 在Javascript中使用
```javascript
return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />
```
##### 2、npm run eject
> 该命令会将配置文件暴露到scripts目录下，即将node_modules/react-script里的配置文件（config->config,scripts->scripts）弹出到最外层根目录下，这样更方便开发人员配置
**注意：这是一个单向操作，一旦你使用eject，那么就不能恢复了 使用说明：如果你对create-react-app这个构建工具和配置项不满意，你可以在任何时候eject，从而导出可配置的模板，这个命令可以移除到项目的单一构建依赖，取而代之的是将配置文件和项目依赖到导入到你的项目中，你可以随意支配他们，之后除了eject命令以外其余的命令都是可用的，这些命令也是可配置的，所以这时候你就可以操作他们了**

##### 3、react-app-rewired
```javascript
$ npm install react-app-rewired --save-dev
```
然后，更改package.json中的scripts部分
```javascript
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom"
  },
```
然后在项目根目录创建一个` config-overrides.js `用于修改默认配置。
```javascript
module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};
```
github：[https://github.com/timarney/react-app-rewired](https://github.com/timarney/react-app-rewired "https://github.com/timarney/react-app-rewired")

上一篇：: 设置用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm
下一篇：: vue-cli3 引入 element-ui 按需加载的配置