| React 入门学习（五） | 您所在的位置：网站首页 › react脚手架配置 › React 入门学习（五） |
React 入门学习（五）
|
React 入门学习（五）-- 认识脚手架
📢 大家好，我是小丞同学，这篇文章是学习 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 更新一下 然后打开 cmd 命令行工具，全局安装 create-react-app npm i create-react-app -g然后可以新建一个文件夹用于存放项目 在当前的文件夹下执行 create-react-app hello-react快速搭建项目 再在生成好的 hello-react 文件夹中执行 npm start启动项目 接下来我们看看这些文件都有什么作用 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再介绍一下public目录下的 index.html 文件中的代码意思 DOCTYPE html> React App You need to enable JavaScript to run this app.以上是删除代码注释后的全部代码 第5行 指定浏览器图标的路径，这里直接采用 %PUBLIC_URL% 原因是 webpack 配置好了，它代表的意思就是 public 文件夹 第6行 用于做移动端网页适配 第七行 用于配置安卓手机浏览器顶部颜色，兼容性不大好 8到11行 用于描述网站信息 第12行 苹果手机触摸版应用图标 第13行 应用加壳时的配置文件 以上就是关于 React 脚手架的全部内容了，非常感谢你的阅读💕 |
【本文地址】