# 05_初始化脚手架

📢 大家好,我是Milo

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

# 简介

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

灵魂三问:是什么?为什么?怎么办?

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

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

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

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

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

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

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

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

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

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

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

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

首先介绍如何安装脚手架

# 1. 安装 React 脚手架

首先确保安装了 npmNode,版本不要太古老,具体是多少不大清楚,建议还是用 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 脚手架的全部内容了,非常感谢你的阅读💕