React-初始化脚手架
简介
这篇文章主要围绕 React 中的脚手架,来解决一下几个问题
灵魂三问:是什么?为什么?怎么办?
- 什么是脚手架?
- 为什么要用脚手架?
- 怎么用脚手架?
🍕 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官网下载
1 | brew install node |
⚠️注意:homebrew很好用,安装homebrew详情可见
然后打开 cmd 命令行工具,全局安装 create-react-app
1 | npm i create-react-app -g |
然后可以新建一个文件夹用于存放项目
在当前的文件夹下执行
1 | create-react-app hello-react |
快速搭建项目
再在生成好的 hello-react
文件夹中执行
1 | npm start |
启动项目
接下来我们看看这些文件都有什么作用
2. 脚手架项目结构
1 | hello-react |
再介绍一下public目录下的 index.html
文件中的代码意思
1 |
|
以上是删除代码注释后的全部代码
第5行
指定浏览器图标的路径,这里直接采用 %PUBLIC_URL%
原因是 webpack
配置好了,它代表的意思就是 public
文件夹
1 | <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> |
第6行
用于做移动端网页适配
1 | <meta name="viewport" content="width=device-width, initial-scale=1" /> |
第七行
用于配置安卓手机浏览器顶部颜色,兼容性不大好
1 | <meta name="theme-color" content="#000000" /> |
8到11行
用于描述网站信息
1 | <meta |
第12行
苹果手机触摸版应用图标
1 | <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> |
第13行
应用加壳时的配置文件
1 | <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> |
以上就是关于 React 脚手架的全部内容了,非常感谢你的阅读💕