React脚手架学习笔记

一、前端工程的复杂化

如果我们只是开发几个小的demo程序,那么永远不需要考虑一些复杂的问题:

  • 比如目录结构如何组织划分;
  • 比如如何管理文件之间的相互依赖;
  • 比如如何管理第三方模块的依赖;
  • 比如项目发布前如何压缩、打包项目;
  • 等等…

现代的前端项目已经越来越复杂了:

  • 不会再是在HTML中引入几个css文件,引入几个编写的js文件或者第三方的js文件这么简单;
  • 比如css可能是使用less、sass等预处理器进行编写,我们需要将它们转成普通的css才能被浏览器解析;
  • 比如JavaScript代码不再只是编写在几个文件中,而是通过模块化的方式,被组成在成百上千个文件中,我们需要通过模块化的技术来管理它们之间的相互依赖;
  • 比如项目需要依赖很多的第三方库,如何更好的管理它们(比如管理它们的依赖、版本升级等);

为了解决上面这些问题,我们需要再去学习一些工具:

  • 比如babel、webpack、gulp。配置它们转换规则、打包依赖、热更新等等一些的内容;
  • 脚手架的出现,就是帮助我们解决这一系列问题的;

二、脚手架是什么呢?

传统的脚手架指的是建筑学的一种结构:在搭建楼房、建筑物时,临时搭建出来的一个框架;

在这里插入图片描述

编程中提到的脚手架(Scaffold),其实是一种工具,帮我们可以快速生成项目的工程化结构;

  • 每个项目作出完成的效果不同,但是它们的基本工程化结构是相似的;
  • 既然相似,就没有必要每次都从零开始搭建,完全可以使用一些工具,帮助我们生产基本的工程化模板;
  • 不同的项目,在这个模板的基础之上进行项目开发或者进行一些配置的简单修改即可;
  • 这样也可以间接保证项目的基本机构一致性,方便后期的维护;

总结:脚手架让项目从搭建到开发,再到部署,整个流程变得快速和便捷;

三、前端脚手架

对于现在比较流行的三大框架都有属于自己的脚手架:

  1. Vue的脚手架:vue-cli
  2. Angular的脚手架:angular-cli
  3. React的脚手架:create-react-app

它们的作用都是帮助我们生成一个通用的目录结构,并且已经将我们所需的工程环境配置好。
使用这些脚手架需要依赖什么呢?

  • 目前这些脚手架都是使用node编写的,并且都是基于webpack的;
  • 所以我们必须在自己的电脑上安装node环境;

这里我们主要是学习React,所以我们还是以React的脚手架工具:create-react-app作为讲解;

四、安装node

React脚手架本身需要依赖node,所以我们需要安装node环境:

  • 无论是windows还是Mac OS,都可以通过node官网直接下载;
  • 官网地址:https://nodejs.org/en/download/
  • 注意:这里推荐大家下载LTS(Long-term support )版本,是长期支持版本,会比较稳定;
    在这里插入图片描述
    下载后,双击安装即可:
    1.安装过程中,会自动配置环境变量;
    2.安装时,会同时帮助我们安装npm管理工具;

输入以下命令:

node --versionnpm --version

若出现版本号则表明安装成功了

五、包管理工具

什么是npm?

  • 全称 Node Package Manager,即“node包管理器”;
  • 作用肯定是帮助我们管理一下依赖的工具包(比如react、react-dom、axios、babel、webpack等等);
  • 作者开发的目的就是为了解决“模块管理很糟糕”的问题;

另外,还有一个大名鼎鼎的node包管理工具yarn:

  • Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具;
  • Yarn 是为了弥补 npm 的一些缺陷而出现的;
  • 早期的npm存在很多的缺陷,比如安装依赖速度很慢、版本依赖混乱等等一系列的问题;
  • 虽然从npm5版本开始,进行了很多的升级和改进,但是依然很多人喜欢使用yarn;
  • React脚手架默认也是使用yarn;
npm install -g yarn

输入yarn --version,若出现版本号输出,则表明安装成功

六、Yarn和npm命令对比

在这里插入图片描述

七、安装脚手架

补充:在国内,某些情况使用npm和yarn可能无法正常安装一个库,这个时候我们可以选择使用cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

最后一个需要安装的是创建React项目的脚手架:

npm install -g create-react-app

输入create-react-app --version,若出现版本号输出,则表明安装成功

八、创建React项目

现在,我们就可以通过脚手架来创建React项目了。

创建React项目的命令如下:

  • 注意:项目名称不能包含大写字母
  • 另外还有更多创建项目的方式,可以参考GitHub的readme
create-react-app 项目名称

在这里插入图片描述

创建完成后,进入对应的目录,就可以将项目跑起来:

cd 01-test-react
yarn start

在这里插入图片描述
在这里插入图片描述

九、目录结构分析

在这里插入图片描述

十、了解PWA

整个目录结构都非常好理解,只是有一个PWA相关的概念:

  • PWA全称Progressive Web App,即渐进式WEB应用;
  • 一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用;
  • 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能;
  • 这种Web存在的形式,我们也称之为是 Web App;

PWA解决了哪些问题呢?

  • 可以添加至主屏幕,点击主屏幕图标可以实现启动动画以及隐藏地址栏;
  • 实现离线缓存功能,即使用户手机没有网络,依然可以使用一些离线功能;
  • 实现了消息推送;
  • 等等一系列类似于Native App相关的功能;

十一、webpack是什么

我们说过React的脚手架是基于Webpack来配置的:

  • webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler);
  • 当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle;
    在这里插入图片描述

十二、脚手架中的webpack

在这里我们暂时不展开来讲webpack,因为里面的内容是非常多的(后续会有专门讲webpack的专题);
但是,很奇怪:我们并没有在目录结构中看到任何webpack相关的内容?

  • 原因是React脚手架讲webpack相关的配置隐藏起来了(其实从Vue CLI3开始,也是进行了隐藏);

如果我们希望看到webpack的配置信息,应该怎么来做呢?

  • 我们可以执行一个package.json文件中的一个脚本:"eject": "react-scripts eject"
  • 这个操作是不可逆的,所以在执行过程中会给与我们提示;
yarn eject

在这里插入图片描述

十三、脚手架中的webpack

在这里插入图片描述

十四、文件结构删除

通过脚手架创建完项目,很多同学还是会感觉目录结构过于复杂,所以我打算从零带着大家来编写代码。
我们先将不需要的文件统统删掉:

  1. 将src下的所有文件都删除
  2. 将public文件下出列favicon.ico和index.html之外的文件都删除掉
    在这里插入图片描述

十五、开始编写代码

在src目录下,创建一个index.js文件,因为这是webpack打包的入口。
在index.js中开始编写React代码:

  • 我们会发现和写的代码是逻辑是一致的;
  • 只是在模块化开发中,我们需要手动的来导入React、ReactDOM,因为它们都是在我们安装的模块中;
    在这里插入图片描述
    如果我们不希望直接在 ReactDOM.render 中编写过多的代码,就可以单独抽取一个组件App.js:
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/470264.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

access集团和abm_abm年度盛典,12月份,中国、澳大利亚、新西兰三地同时举办,abm各渠道运营商从全球各地赶来参会!...

十二月 ,abm的各路年会分别在中国、澳大利亚、新西兰三国同时举办,abm各渠道运营商,从全球各地起来参会,先欣赏下abm全球年度盛典新西兰分会场中国区会场在abm中国区总部杭州举办,这次特别邀请了蔡康永,从上…

隐藏Android下的虚拟按键

隐藏Android下的虚拟按键 要隐藏Android下的虚拟按键,可通过如下办法操作 [cpp] view plaincopy adb root adb remount adb shell ls -al /system/build.prop (查看文件权限) -rw-r--r-- root root 4237 2015-11-19 04:34 build.prop adb …

医学影像设备学_2020考研:影像大咖告诉你,学影像,就业好,不求人。

医学学科里,有一门专业:医学影像,一直处于比较尴尬的地位:虽然是诊断医生,有执业医生证及大型设备上岗证,但是在同行眼里却是技师、拍片儿的。但是,最近几年医学影像专业迅速崛起,成…

React中添加class——借助第三方库classnames

一、vue中添加class vue中添加class是一件非常简单的事情: 你可以通过传入一个对象: 你也可以传入一个数组: 甚至是对象和数组混合使用: 二、React中添加class React在JSX给了我们开发者足够多的灵活性,你可以…

聊聊微服务架构

1. 微服务架构概念解析 2. 构建微服务架构:使用 API Gateway 3. 深入微服务架构的进程间通信 4. 服务发现的可行方案以及实践案例 5. 微服务的事件驱动数据管理 6. 选择微服务部署策略 7. 将单体应用改造为微服务 首先让我们了解为何要将微服务纳入考量。 构建单体应…

python opencv2_python opencv2 api

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里技术人对外发布原创技术内容的最大平台&…

AntDesign组件库的使用

一、AntDesign的介绍 AntDesign ,简称 antd 是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品。 中后台的产品 属于工具性产品,很多优秀的设计团队通过自身的探索和积累,形成了自己的设计体系。 An…

现在中国是以24枚金牌位列奖牌榜3位,美国英国分列1、2位

昨天把任务基本是完成,到了晚上施佳打电话过来测了,然后值班室的电话又是说有一个ASA952的航班没有计划,可是我们这里可以查到,可能是没有发出去,后来确认是FPL电报,这样就僵持了许久,可是对于补…

python进行对应分析_机器学习算法---对应分析

--------仅用于个人学习知识整理和sas/R语言/python代码整理--------该文章首发于csdn 正在迁移优化文章中1.前言对应分析,主要适用于有多个类别的分类变量,可以揭示同一个变量各个类别之间的差异,以及不同变量各个类别之间的对应关系(简介摘…

socket.io跨域踩坑

一、koa结合socket.io 后端代码: // 引入依赖 const koa require("koa"); // 初始化koa const app new koa(); // 开启 http var server require("http").createServer(app.callback()); // 初始化 socket const io require("socket…

ios 权限提示语_iOS工作室都在用按键v1.6.1(体验版)

按键精灵iOS v1.6.1(体验版)已发布到cydia新增工作室专场还支持VIP自助换绑欢迎下载使用~源地址:http://apt.mobileanjian.comVIP换绑方法如下:1、在按键精灵APP上进入“我的”分页,点击VIP信息,看到“解绑”按钮。点击后&#xf…

Redux学习(一)——Redux的使用过程

一、为什么需要redux JavaScript开发的应用程序,已经变得越来越复杂了: JavaScript需要管理的状态越来越多,越来越复杂;这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等等,也包括一些UI的状态&#x…

OpenCV实现图像颜色特征提取

https://github.com/ictlyh/ImageFeature 链接:http://pan.baidu.com/s/1mhUoPxI 密码:3cnn转载于:https://www.cnblogs.com/eustoma/p/5792717.html

贪吃蛇python小白_面向 python 小白的贪吃蛇游戏

代码和教程详见微信公众号:Python高效编程效果图图片代码和教程详见微信公众号:Python高效编程文字部分:引言作为python 小白,总是觉得自己要做好百分之二百的准备,才能开始写程序。以至于常常整天在那看各种语法教程&…

Redux学习(二)——封装connect函数

一、自定义connect函数 connect.js: import {PureComponent} from "react"; import store from "../store"; export function connect(mapStateToProps, mapDispatchToProps) {return function enhanceHOC(WrappedComponent) {return class extends PureC…

python ssh实现_SSH协议的Python实现paramiko

paramiko安装SSH是一个协议,paramiko 是一个Python 的库,该库支持sshv2协议,实现了对远程服务器执行操作安装命令:pip3 install paramikoSSHClient类与SFTPClient类paramiko包含两个核心组建,分别是SSHClient和SFTPCli…

C++学习10 static静态成员变量和静态成员函数

一般情况下,如果有N个同类的对象,那么每一个对象都分别有自己的成员变量,不同对象的成员变量各自有值,互不相干。但是有时我们希望有某一个或几个成员变量为所有对象共有,这样可以实现数据共享。 可以使用全局变量来达…

Redux学习(三)——redux-saga的使用、编写中间件函数、Reducer文件拆分

一、redux-devtools 我们之前讲过,redux可以方便的让我们对状态进行跟踪和调试,那么如何做到呢? redux官网为我们提供了redux-devtools的工具;利用这个工具,我们可以知道每次状态是如何被修改的,修改前后…

python 存储图片 alpha_保存时Matplotlib图形面颜色alpha(背景色、透明度)

前一个问题是使用savefig()保存屏幕上显示的相同的面颜色(背景色),即:fig plt.figure()fig.patch.set_facecolor(blue)fig.savefig(foo.png, facecolorfig.get_facecolor())(使用savefig()需要重新指定背景色。)fig.patch.set_alpha(0.5)我找不到一种方…

【JavaScript代码实现四】获取和设置 cookie

1 // 创建cookie2 function setCookie(name, value, expires, path, domain, secure) {3 var cookieText encodeURIComponent(name) encodeURIComponent(value);4 if (expires instanceof Date) {5 cookieText ; expires expires; 6 }7 if…