React 入门学习(五)-- 认识脚手架

简介: React 入门学习(五)-- 认识脚手架

image.png

大家好,我是小丞同学,这篇文章是学习 React 脚手架的学习笔记


非常感谢你的阅读,不对的地方欢迎指正


React专栏 已经全部更新于 GIthub


愿你生活明朗,万物可爱


简介

这篇文章主要围绕 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 更新一下


然后打开 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>
<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>

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

第5行

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

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

第6行

用于做移动端网页适配

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

第七行

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

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

第12行

苹果手机触摸版应用图标

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

第13行

应用加壳时的配置文件

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

 

相关文章
|
4月前
|
前端开发 API UED
怎么学习React 18 进行项目开发?
【4月更文挑战第18天】学习React 18涉及新特性如并发模式、Suspense API和自动批处理更新,可提升性能和用户体验。首先了解这些新特性,然后掌握React基础知识,如组件化、JSX、props和state。使用Create React App创建项目,学习如何启用并发模式和使用Suspense显示占位符。实现自定义组件,关注props传递、状态管理和事件处理。通过Profiler优化性能,利用懒加载和代码分割减少加载时间,使用Context API共享状态。不断实践和探索,参考官方文档与社区资源,以提高开发技能。
142 3
|
14天前
|
XML JavaScript 前端开发
React Jsx语法入门
【8月更文挑战第13天】React Jsx语法入门
31 4
|
3天前
|
JSON 前端开发 JavaScript
|
5天前
|
前端开发 JavaScript 数据处理
如何学习React的高级概念?
【8月更文挑战第26天】如何学习React的高级概念?
15 2
|
5天前
|
前端开发 JavaScript API
学习 React 的方法
【8月更文挑战第26天】学习 React 的方法
18 1
|
14天前
|
前端开发 JavaScript 中间件
React脚手架create-react-app简介
【8月更文挑战第13天】React脚手架create-react-app简介
11 4
|
12天前
|
JavaScript 前端开发 容器
React基础入门之虚拟dom【一】
【8月更文挑战第14天】React基础入门之虚拟dom
25 0
React基础入门之虚拟dom【一】
|
16天前
|
前端开发 人机交互
langchain 入门指南 - ReAct 模式
langchain 入门指南 - ReAct 模式
29 1
|
22天前
|
前端开发 JavaScript 算法
如何学习react原理
【8月更文挑战第9天】 如何学习react原理
34 6
|
7天前
|
前端开发 JavaScript 开发者
React组件入门秘籍:函数组件、类组件、高阶组件,一文让你彻底解锁!
【8月更文挑战第24天】React是一款广受好评的JavaScript库,其核心特色在于组件化开发模式。React组件作为应用程序的基础单元,不仅能够处理特定业务逻辑还能实现界面展示。本文深入浅出地介绍了React组件的概念、创建方式及其应用场景。
17 0

热门文章

最新文章

下一篇
云函数