React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React 脚手架

React脚手架搭建的学习

作者:小小白学计算机

本文主要介绍了React脚手架搭建的学习,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

一、前端工程的复杂化

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

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

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

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

二、脚手架是什么呢?

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

在这里插入图片描述

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

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

三、前端脚手架

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

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

这里我们主要是学习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 --version
npm --version

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

五、包管理工具

什么是npm?

另外,还有一个大名鼎鼎的node包管理工具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-reactyarn start

在这里插入图片描述

在这里插入图片描述

九、目录结构分析

在这里插入图片描述

十、了解PWA

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

PWA解决了哪些问题呢?

十一、webpack是什么

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

在这里插入图片描述 

十二、脚手架中的webpack

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

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

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

yarn eject

在这里插入图片描述

十三、脚手架中的webpack

在这里插入图片描述

十四、文件结构删除

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

将src下的所有文件都删除将public文件下出列favicon.ico和index.html之外的文件都删除掉

在这里插入图片描述 

十五、开始编写代码

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

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

在这里插入图片描述

如果我们不希望直接在 ReactDOM.render 中编写过多的代码,就可以单独抽取一个组件App.js:

在这里插入图片描述

到此这篇关于React脚手架搭建的学习的文章就介绍到这了,更多相关React 脚手架内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文