Milo前端日记

# 05_初始化脚手架

📢 大家好，我是Milo

📢 这篇文章是学习 React 中 初始化脚手架的学习笔记

# 简介

这篇文章主要围绕 React 中的脚手架，来解决一下几个问题

灵魂三问：是什么？为什么？怎么办？

  1. 什么是脚手架？
  2. 为什么要用脚手架？
  3. 怎么用脚手架？

# 🍕 1. 什么是 React 脚手架？

在我们的现实生活中，脚手架最常用的使用场景是在工地，它是为了保证施工顺利的、方便的进行而搭建的，在工地上搭建的脚手架可以帮助工人们高校的去完成工作，同时在大楼建设完成后，拆除脚手架并不会有任何的影响。

在我们的 React 项目中，脚手架的作用与之有异曲同工之妙

React 脚手架其实是一个工具帮我们快速的生成项目的工程化结构，每个项目的结构其实大致都是相同的，所以 React 给我提前的搭建好了，这也是脚手架强大之处之一，也是用 React 创建 SPA 应用的最佳方式

# 🍔 2. 为什么要用脚手架？

在前面的介绍中，我们也有了一定的认知，脚手架可以帮助我们快速的搭建一个项目结构

在我之前学习 webpack 的过程中，每次都需要配置 webpack.config.js 文件，用于配置我们项目的相关 loader 、plugin，这些操作比较复杂，但是它的重复性很高，而且在项目打包时又很有必要，那 React 脚手架就帮助我们做了这些，它不需要我们人为的去编写 webpack 配置文件，它将这些配置文件全部都已经提前的配置好了。

据我猜测是直接输入一行命令就能打包完成。

目前还没有学习到哪，本文主要讲脚手架的项目目录结构以及安装

# 🍟 3. 怎么用 React 脚手架？

这也是这篇文章的重点，如何去安装 React 脚手架，并且理解它其中的相关文件作用

首先介绍如何安装脚手架

# 1. 安装 React 脚手架

首先确保安装了 npm 和Node，版本不要太古老，具体是多少不大清楚，建议还是用 npm update 更新一下,我mac上用的homebrew安装的node，你也可以去node官网下载

brew install node
1

⚠️注意：homebrew很好用，安装homebrew详情可见

然后打开 cmd 命令行工具，全局安装 create-react-app

npm i create-react-app -g
1

然后可以新建一个文件夹用于存放项目

在当前的文件夹下执行

create-react-app hello-react
1

快速搭建项目

再在生成好的 hello-react 文件夹中执行

npm start
1

启动项目

接下来我们看看这些文件都有什么作用

# 2. 脚手架项目结构

hello-react
├─ .gitignore               // 自动创建本地仓库
├─ package.json             // 相关配置文件
├─ public                   // 公共资源
│  ├─ favicon.ico           // 浏览器顶部的icon图标
│  ├─ index.html            // 应用的 index.html入口
│  ├─ logo192.png           // 在 manifest 中使用的logo图
│  ├─ logo512.png           // 同上
│  ├─ manifest.json         // 应用加壳的配置文件
│  └─ robots.txt            // 爬虫给协议文件
├─ src                      // 源码文件夹
│  ├─ App.css               // App组件的样式
│  ├─ App.js                // App组件
│  ├─ App.test.js           // 用于给APP做测试
│  ├─ index.css             // 样式
│  ├─ index.js              // 入口文件
│  ├─ logo.svg              // logo图
│  ├─ reportWebVitals.js    // 页面性能分析文件
│  └─ setupTests.js         // 组件单元测试文件
└─ yarn.lock
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

再介绍一下public目录下的 index.html 文件中的代码意思

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

以上是删除代码注释后的全部代码

第5行

指定浏览器图标的路径，这里直接采用 %PUBLIC_URL% 原因是 webpack 配置好了，它代表的意思就是 public 文件夹

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
1

第6行

用于做移动端网页适配

<meta name="viewport" content="width=device-width, initial-scale=1" />
1

第七行

用于配置安卓手机浏览器顶部颜色，兼容性不大好

<meta name="theme-color" content="#000000" />
1

8到11行

用于描述网站信息

<meta
	name="description"
    content="Web site created using create-react-app"
/>
1
2
3
4

第12行

苹果手机触摸版应用图标

<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
1

第13行

应用加壳时的配置文件

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
1

以上就是关于 React 脚手架的全部内容了，非常感谢你的阅读💕

← 06_TodoList 案例 →