专栏首页小丞前端库React 入门学习(五)-- 认识脚手架

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

📢 React专栏 已经全部更新于 GIthub

📢 大家好,我是小丞同学,这篇文章是学习 React 脚手架的学习笔记 📢 非常感谢你的阅读,不对的地方欢迎指正 🙏 📢 React专栏 已经全部更新于 GIthub 📢 愿你生活明朗,万物可爱

简介

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

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

8到11行

用于描述网站信息

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

第12行

苹果手机触摸版应用图标

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

第13行

应用加壳时的配置文件

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React 入门学习(七)-- 脚手架配置代理

    React 本身只关注于页面,并不包含发送 Ajax 请求的代码,所以一般都是集成第三方的包,或者自己封装的

    小丞同学
  • 从零学脚手架(五)---react、browserslist

    目前,国内主流的前端应用框架具有两个:vue.js和react.js,关于vue和react的优劣性,网上众说纷纭。在下就不在此引战。

    莫问今朝
  • 18、webpack从0到1-结语

    Ewall
  • React + webpack 开发单页面应用简明中文文档教程(十一)将项目打包到子目录运行

    版权声明:本文为 FengCms FungLeo 原创文章,允许转载,但转载必须注明出处并附带首发链接 ...

    FungLeo
  • web前端开发如何入门提高?

    想要成为web前端工程师应该如何开始学习呢?学完HTML以及css之后应该从哪些方面学习呢?入门web前端开发之后又该如何提高自己的前端开发技术呢?如果是自学,...

    企鹅号小编
  • 前端框架之争丨除了Vue、Angular和React还有谁与之争锋

    近些年,前端开发领域涌现出了大量框架,让人眼花缭乱,不知如何选择。今天我们将为您对比五个最流行的前端JavaScript框架,并作出概述,介绍其主要功能、工具、...

    葡萄城控件
  • 2021年React学习路线图

    2018 年我们写过一次 React 学习路线图(https://www.infoq.cn/article/AEkiVAiJf25LZmoUe_yc),两年过去...

    深度学习与Python
  • 适合 JS 新手学习的开源项目——在 GitHub 学编程

    这里是 HelloGitHub 的《GitHub 上适合新手的开源项目》系列的最后一篇,系列文章:

    HelloGitHub
  • Kotlin 视频课程系列一:《零基础学习 Kotlin 编程》

    在你决定要打开这个页面阅读的瞬间,风云巨变互联网行业里拼搏的你, 已经得到了一个引领时代 , 改变命运,突破瓶颈的机会。

    一个会写诗的程序员
  • H5 手机 App 开发入门:技术篇

    如果你熟悉 Java 语言,可以学习安卓开发;如果熟悉脚本语言(比如 Python 或 Ruby),可以学习 Swift 语言,进行 iOS 开发;如果像我一样...

    ruanyf
  • 学了两天 react,乱讲一下学习思路,顺便弄了一个脚手架

    现在的项目基本上都是前后端分离的,后端就先不提了。前端的框架也是层出不穷,使用最多的就是 angular、vue、react 。angular 是前几年用的比较...

    古时的风筝
  • 一、环境搭建、以及聊聊更重要的...

    它给我们提供了一个开发思路以及少量的API,这些API学习起来还算轻松。不过在阅读此系列文章之前,应该有不少读者已经通过官方文档或者其他途径开始尝试学习Reac...

    用户6901603
  • React 毁了 Web 开发!

    React 是一个很好的库,对于Web开发很重要,因为它引入了声明式与反应式模板,这在当时是每个人都需要的范式转变。当时(也就是6~7年前),我们面临着需要的范...

    开发者技术前线
  • 一文带你了解2018年最流行的前端技术

    2018年即将过半,前端开发这个行业又进一个台阶了。找来一个现代前端技术图谱看看,真是吓尿了——宝宝心里苦啊!

    用户6167509
  • 2021 年最佳 JavaScript 框架

    据 Stackoverflow 的 2021 年开发者调查,JavaScript 已连续第八年成为使用最多的语言,有 67.7% 的受访者选择它。之所以如此受欢...

    用户7365393
  • 从项目演进看前端工程化发展

    这篇文章想重点来和大家聊一下「现代库编写」的话题,相信技术和思维上,对你会有启发。

    CSDN技术头条
  • (三万字长文)类型即正义:TypeScript 从入门到实践系列,正式完结!

    Tim Berners-Lee 于1989年发明了万维网并于1991年对外发布了世界上第一个网页浏览器 WorldWideWeb,从此拉开了 Web 时代的序幕...

    一只图雀
  • 为什么要选择React

    无意比较几大框架的优劣,但是要入手一门框架,对于刚学习的同学而言,学谁的价值最高?是一个绕不开的问题。

    用户6901603
  • 17、webpack从0到1-构建vue项目

    Ewall

扫码关注云+社区

领取腾讯云代金券