React脚手架create-react-app2.0搭建项目

落日映苍穹つ 2021-10-24 06:38 463阅读 0赞

> 2019-08-22 更新  
> 2019-08-21 创建

# 环境准备 #

要提前安装好node、npm或者cnpm、webpack，本机使用 node 为当前最新版 10.16.0 版本。如果安装多版本 node 可以使用nvm 进行管理。

[查看环境命令传送门][Link 1]

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。

create-react-app 自动创建的项目是基于 Webpack + ES6 。

执行以下命令安装脚手架：

// 安装 React 脚手架 2018-10月之后默认都是2.0+版本 (版本：2.1.1)
    $ cnpm install -g create-react-app
    // 如果还是想使用1.x版本的create-react-app，可以敲：
    $ create-react-app --scripts-version=react-scripts@1.x

![安装React脚手架][React]

# 创建 React 项目 #

// 执行以下命令进行项目创建 其中 project 为项目名称，会在当前目录下创建该文件夹并生成项目文件，执行完之后就直接可以进入目录启动项目
    $ create-react-app project

整个过程是有些慢的，准备10分钟刷刷微博，朋友圈的时间吧！可以改变镜像地址来提高安装速度，下文有介绍：  
![项目创建过程][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvbmdjaGVuZ18wMDE_size_16_color_FFFFFF_t_70_pic_center]

// create-react-app 执行慢的解决方法：在使用 create-react-app my-app 来创建一个新的React应用，在拉取各种资源时,往往会非常慢,一直卡在那：
    fetchMetadata: sill mapToRegistry uri http://registry.npmjs.org/whatwg-fetch
    
    // 可以看到资源还是使用了 npmjs.org，解决方法是换成淘宝的资源：
    $ npm config set registry https://registry.npm.taobao.org
    
    //-- 配置后可通过下面方式来验证是否成功
    $ npm config get registry
    -- 或 npm info express

# 启动 React 项目 #

切换到项目文件夹 `cd project` 并启动项目 `npm start`

![切换到项目文件夹][20190821191933524.png_pic_center]  
![启动项目][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvbmdjaGVuZ18wMDE_size_16_color_FFFFFF_t_70_pic_center 1]  
项目启动后会自动打开浏览器，或者直接在浏览器中通过网址`http://localhost:3000/`进行访问，项目首页如下：

![项目首页，有此页说明项目安装成功][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvbmdjaGVuZ18wMDE_size_16_color_FFFFFF_t_70_pic_center 2]

# 配置 #

![项目目录-1][-1]  
![初始安装好的时候项目目录-2][-2]

### 显示webpack 配置文件 ###

执行以下命令\`\`显示出配置文件，该操作是不可逆的，只能执行一次

// 注意：这是单向操作。有一次eject，你不能回去！
    $ npm run eject
    // 然后根据提示 输入 y 确认该操作

![执行显示配置文件过程-1][-1 1]  
![执行显示配置文件过程-2][-2 1]  
如图配置文件就k出来了，这样最基础的环境就处理好了，就可以进一步进行开发了！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvbmdjaGVuZ18wMDE_size_16_color_FFFFFF_t_70_pic_center 3]  
![具体目录文件][20190822095617971.png_pic_center]  
默认情况下使用脚手架创建是没有路由，也不支持sass，以下增加路由和sass配置的步骤

![安装路由][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvbmdjaGVuZ18wMDE_size_16_color_FFFFFF_t_70_pic_center 4]

### 安装React-router 4.0 ###

##### React-router和React-router-dom的选择 #####

> 很多刚使用react的同学在接触到react-router的时候就会很蛋疼，什么react-router和react-router-dom？往往开始会比较懵逼。下面我们就来一探究竟。  
> React-router  
> React-router提供了一些router的核心api，包括`Router, Route, Switch`等，但是它没有提供dom操作进行跳转的api。  
> React-router-dom  
> React-router-dom提供了`BrowserRouter, Route, Link`等api,我们可以通过dom的事件控制路由。例如点击一个按钮进行跳转，大多数情况下我们是这种情况，所以在开发过程中，我们更多是使用React-router-dom。安装很简单`npm i react-router-dom --save`,安装了淘宝镜像的就用cnpm吧。

npm i react-router-dom --save

**核心API**

> 1.BrowserRouter  
> 2.HashRouter  
> 3.Route  
> 4.Link  
> 5.NavLink  
> 6.MemoryRouter  
> 7.Redirect  
> 8.exact  
> 9.Switch  
> 10.withRouter  
> 官方文档解释很详细，我就没必要在new一次了，可以到官网学习具体用法。  
> [react-router 英文文档][react-router]  
> [react-router 中文文档][react-router 1]

> 文件路径：src/index.js 入口文件

![入口文件中配置路由][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvbmdjaGVuZ18wMDE_size_16_color_FFFFFF_t_70_pic_center 5]  
在 app.js 中配置路由，这样就可以按照自己配置的路由访问了。也可以单独将路由放到一个文件内进行配置，便于管理  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvbmdjaGVuZ18wMDE_size_16_color_FFFFFF_t_70_pic_center 6]

### React 安装 sass 及配置 ###

对于 2.0 版本的脚手架，是可以直接安装使用的，其他不需要进行配置，只是在引入文件的时候要引入 `.scss` 文件

$ npm install node-sass --save

[官方文档-添加 sass 样式][-_ sass]

# 解决create-react-app打包之后页面空白的问题 #

解决打包的时候打开的页面是空白页的方法有两种一是改`package.json`，二是改`config/paths.js`文件

1、在`package.json`里添加`"homepage":"./",`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvbmdjaGVuZ18wMDE_size_16_color_FFFFFF_t_70_pic_center 7]  
添加好路径后，就不会出现打包之后是空白页面的情况了

2、修改`config/paths.js`文件

> 修改config/paths,js文件中的第 37 行

// 第34-39行，修改第 37 行
    function getServedPath(appPackageJson) {
      const publicUrl = getPublicUrl(appPackageJson);
      const servedUrl =
        envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : './'); // 修改该行地址，将绝对地址 “/” 改成 相对地址 "./"
      return ensureSlash(servedUrl, true);
    }

![源文件代码][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvbmdjaGVuZ18wMDE_size_16_color_FFFFFF_t_70_pic_center 8]  
**修改后**

![修改后][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvbmdjaGVuZ18wMDE_size_16_color_FFFFFF_t_70_pic_center 9]

# React 打包 #

// 执行 react 打包命令
    $ npm run build

执行完命令后，会在项目根目录下生成一个 build 文件夹，该文件夹下的文件就是打包后生成的文件。  
![打包后生成的文件][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvbmdjaGVuZ18wMDE_size_16_color_FFFFFF_t_70_pic_center 10]

[Link 1]: https://blog.csdn.net/kongcheng_001/article/details/99859638
[React]: /images/20211023/e5edb05369b44d52bc199bb8da6309c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvbmdjaGVuZ18wMDE_size_16_color_FFFFFF_t_70_pic_center]: /images/20211023/95097e2195bc476a8babd11e64c04235.png
[20190821191933524.png_pic_center]: /images/20211023/2f026da88cc24f22a9a188b8f94d51e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvbmdjaGVuZ18wMDE_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20211023/b5e0661aa4b446a78e975f78e0d374c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvbmdjaGVuZ18wMDE_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20211023/32298b12b13f4bac9eafe7779b98910c.png
[-1]: /images/20211023/f35baea6b8e04e00bf485f51990a4f13.png
[-2]: /images/20211023/20d4dece5fb949ab98000aaff966e89c.png
[-1 1]: /images/20211023/6aea0d92c7014394ba87e858abc79d72.png
[-2 1]: /images/20211023/ffebe39932e144829fcea6094c615c7c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvbmdjaGVuZ18wMDE_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20211023/57bae460276f45f5a8267b3a2a8618a6.png
[20190822095617971.png_pic_center]: /images/20211023/8b0e84b19aaf4f17b3f9c10cc2f24ad6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvbmdjaGVuZ18wMDE_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20211023/0e8b16319d8d4a688cadc58ad3084cc8.png
[react-router]: https://reacttraining.com/react-router/web/guides/quick-start
[react-router 1]: https://react-guide.github.io/react-router-cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvbmdjaGVuZ18wMDE_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20211023/71fd0990847b40ba8bbe3bd0fb78ec20.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvbmdjaGVuZ18wMDE_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20211023/57644e6e616d49f28abbb4bca6cc655f.png
[-_ sass]: https://create-react-app.dev/docs/adding-a-sass-stylesheet
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvbmdjaGVuZ18wMDE_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20211023/fdc56400bb5d489ca523dcd88f8983b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvbmdjaGVuZ18wMDE_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20211023/060f0c8e89814463b530928581ba9635.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvbmdjaGVuZ18wMDE_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20211023/bca6e3887f5f42b1830ae81288f8afbb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvbmdjaGVuZ18wMDE_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20211023/cd6aca2009c54329930c81a770efab0c.png