react脚手架配置webpack,react框架怎么学

react脚手架配置webpack,react框架怎么学,React脚手架搭建的学习

本文主要介绍了React脚手架的研究,并通过实例代码进行了详细介绍,具有一定的参考价值。感兴趣的朋友可以参考一下。

一、前端工程的复杂化

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

比如目录结构是如何组织和划分的;比如,如何管理文件之间的相互依赖关系;比如如何管理对第三方模块的依赖;比如项目发布前如何压缩打包;等待.

现代前端项目变得越来越复杂:

不再是在HTML中引入几个css文件,引入几个编写的js文件或者第三方js文件那么简单;

比如css可能是less、sass等前置处理器写的,我们需要把它们转换成普通的css让浏览器解析;

比如JavaScript代码不再只是写在几个文件里,而是由数百个文件以模块化的方式组成。我们需要通过模块化技术来管理它们的相互依赖性;

比如项目需要依赖很多第三方库,如何更好的管理它们(比如管理它们的依赖关系,版本升级等。);

为了解决这些问题,我们需要学习更多的工具:

如babel,webpack,gulp。他们配置转换规则、打包依赖项、热更新等等;

脚手架的出现就是为了帮助我们解决这一系列问题;

二、脚手架是什么呢?

传统脚手架指的是建筑的一种结构:建筑或建造时的临时框架;

编程中提到的脚手架,其实是帮助我们快速生成项目工程结构的工具;

每个项目的效果不同,但它们的基本工程结构是相似的;

既然差不多,就没必要每次都从头开始建。我们可以使用一些工具来帮助我们制作基本的工程模板。

不同的项目,在这个模板的基础上进行项目开发或者简单修改一些配置;

这样也可以间接保证项目的基本制度一致性,方便后期维护;

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

三、前端脚手架

现在三种流行的框架都有自己的脚手架:

Vue的支架:vue-cli

角形脚手架:角形cli

React的支架:创建-反应-应用

他们的作用是帮助我们生成一个通用的目录结构,我们已经配置好了我们需要的工程环境。

使用这些脚手架需要依靠什么?

目前这些支架都是node写的,基于webpack

所以我们必须在自己的电脑上安装节点环境;

我们这里主要研究React,所以还是用React的脚手架工具:create-react-app作为解释;

四、安装node

React scaffold本身需要依赖节点,所以我们需要安装节点环境:

无论是windows还是Mac OS,都可以通过node官网直接下载;

地址:https://nodejs.org/en/download/,官网注:这里推荐你下载LTS(长期支持)版本,是长期支持版本,会比较稳定;

下载后,双击安装:

1.在安装过程中,环境变量将被自动配置;

2.在安装时,它会帮助我们同时安装npm管理工具;

输入以下命令:

节点版本

npm版本

如果版本号出现,则安装成功。

五、包管理工具

什么是npm?

节点包管理器的全称,即“节点包管理器”;

作用肯定是帮助我们管理依赖的工具包(比如react、react-dom、axios、babel、webpack等。);

作者开发的目的是为了解决“模块管理不好”的问题;

此外,还有一个著名的节点包管理工具yarn:

Yarn是由脸书、Google、Exponent Tilde联合推出的一款新的JS包管理工具。

纱线的出现弥补了npm的一些缺陷;

早期的npm有很多缺陷,比如安装依赖慢,版本依赖混乱等等。

虽然从npm5开始做了很多升级改进,但是很多人还是喜欢用纱;

反应支架也使用纱线;默认情况下;

npm安装-g纱线

输入yarn - version,如果输出版本号,则安装成功。

六、Yarn和npm命令对比

七、安装脚手架

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

NPM install-g cnpm-registry=https://registry . NPM . Taobao . org

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

npm安装-g创建-反应-应用程序

输入create-react-app-version,如果输出版本号,则安装成功。

八、创建React项目

现在,我们可以通过搭建来创建React项目。

创建React项目的命令如下:

注意:项目名称不能包含大写字母。

还有更多创建项目的方法,请参考GitHub的自述。

创建-反应-应用程序项目名称

创建完成后,进入相应的目录,就可以运行项目了:

CD 01-测试-重新启动

九、目录结构分析

十、了解PWA

整个目录结构非常容易理解,除了一个与PWA相关的概念:

Pw全称Progressive WEB App,即progressive web application

PWA应用首先是网页,网页应用可以用Web技术编写;

然后添加App Manifest和Service Worker,实现PWA安装和离线功能;

这种Web存在形式,我们也称之为Web App;

PWA解决了哪些问题?

它可以添加到主屏幕。单击主屏幕图标开始播放动画并隐藏地址栏。

实现离线缓存功能,即使用户手机无网,仍可使用部分离线功能;

实现了消息推送;

等等一系列类似于Native App相关的功能;

十一、webpack是什么

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

Webpack是现代JavaScript应用程序的静态模块打包器。

webpack在处理一个应用的时候,会递归地构建一个依赖图,这个依赖图包含了应用需要的每个模块,然后把这些模块全部打包成一个或者多个bundle;

十二、脚手架中的webpack

这里暂时不谈webpack,因为里面的内容很多(以后webpack上会有专门的话题);

但是,很奇怪:我们在目录结构中没有看到与webpack相关的内容?

原因是React scaffold说隐藏了webpack相关的配置(其实从Vue CLI3开始就隐藏了);

如果我们想看到webpack的配置信息,应该怎么做?

我们可以在package.json文件中执行一个脚本:“inject”:“react-scripts inject”

这个操作是不可逆的,所以在执行过程中会提示我们;

纱线弹出

十三、脚手架中的webpack

十四、文件结构删除

通过脚手架创建项目后,很多同学还是觉得目录结构太复杂,我打算从头开始写代码。

让我们先删除所有不必要的文件:

删除src下的所有文件,删除public file下列出的所有文件,除了favicon.ico和index.html。

十五、开始编写代码

在src目录中,创建index.js文件,因为这是webpack打包的入口点。

开始在index.js中编写React代码:

我们会发现写出来和写出来的代码在逻辑上是一致的;只是在模块化开发中,我们需要手动导入React和ReactDOM,因为它们都在我们安装的模块中;

如果不想直接在ReactDOM.render中写太多代码,可以单独提取一个组件App.js:

这就是这篇关于反应支架研究的文章。要了解更多相关的React搭建内容,请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

相关文章阅读

  • react脚手架配置webpack,react框架怎么学,React脚手架搭建的学习
  • react常用组件及作用,react 组件传递数据
  • react常用组件及作用,react 组件传递数据,React组件间通信的三种方法(简单易用)
  • jquery瀑布流插件,react瀑布流插件
  • jquery瀑布流插件,react瀑布流插件,js原生瀑布流插件制作
  • ,,浅析React 对state的理解
  • ,,react路由守卫的实现(路由拦截)
  • ,,react 实现图片正在加载中 加载完成 加载失败三个阶段的原理解析
  • ,,React Native 真机断点调试+跨域资源加载出错问题的解决方法
  • react两种组件,react组件中必不可少的一个函数
  • react和vue的未来趋势,vue框架和react框架的区别
  • react 装饰器的使用教程,react装饰器有什么用
  • reactor模式详解,什么是reactor模式
  • react优先级调度,React的底层调度策略的名称
  • react 网络请求用什么,react 请求数据
  • 留言与评论(共有 条评论)
       
    验证码: