React + webpack 开发单页面应用简明中文文档教程（一）一些基础概念

￡神魔★判官ぃ 2022-05-21 02:48 109阅读 0赞

# React + webpack 开发单页面应用简明中文文档教程（一）一些基础概念 #

## React 入门系列教程导航 ##

[React + webpack 开发单页面应用简明中文文档教程（一）一些基础概念][React _ webpack]  
[React + webpack 开发单页面应用简明中文文档教程（二）创建项目][React _ webpack 1]  
[React + webpack 开发单页面应用简明中文文档教程（三）目录说明以及调整项目构架文件][React _ webpack 2]  
[React + webpack 开发单页面应用简明中文文档教程（四）调整项目文件以及项目配置][React _ webpack 3]  
[React + webpack 开发单页面应用简明中文文档教程（五）配置 api 接口请求文件][React _ webpack _ api]  
[React + webpack 开发单页面应用简明中文文档教程（六）渲染一个列表，初识 jsx 文件][React _ webpack _ jsx]  
[React + webpack 开发单页面应用简明中文文档教程（七）jsx 组件中调用组件、父组件给子组件传值][React _ webpack _jsx]  
[React + webpack 开发单页面应用简明中文文档教程（八）Link 跳转以及编写内容页面][React _ webpack _Link]  
[React + webpack 开发单页面应用简明中文文档教程（九）子组件给父组件传值][React _ webpack 4]  
[React + webpack 开发单页面应用简明中文文档教程（十）在 jsx 和 scss 中使用图片][React _ webpack _ jsx _ scss]  
[React + webpack 开发单页面应用简明中文文档教程（十一）将项目打包到子目录运行][React _ webpack 5]

--------------------

我之前写了一系列的 `vue` 相关的入门博文，深受大家的欢迎。现在开发了几个 `reactjs` 的小项目，略有心得，因此，想与大家分享。

由于之前有了 `vue` 开发的一些经验，因此，这个系列的博文会相对比较简单。

![0fdd641b6489b2f3c60d7a4403ad09.jpg][]

如果你是有过一些经验的开发者，可以略过这篇博文，直接阅读下一篇。如果你只是掌握了 `jquery` 这种原始开发模式的初级前端工程师，那么请先从本文开始阅读。

## 开发环境以及生产环境 ##

我尝试用后端的概念来解释。

当我们使用某种编译型的语言来开发项目，例如 `golang` 这种语言。我们写好程序脚本，然后在命令行中可以直接执行，不需要编译。这就是开发环境。

当我们把程序开发好了，编译成二进制文件，然后直接运行这个二进制文件，这就属于生产环境。

> 简单理解一下，不要和公司中的开发服务器环境、测试环境、预发布环境、以及生产环境等服务器环境搞混。

也就是说，我们在开发模式下编写代码，无需编译，则我们称之为开发环境。我们把我们开发的代码进行编译，将编译之后的代码放在某种其他的环境下运行，则称之为生产环境。

我们前端本来是没有所谓的这两种差异的，因为无论是 `html`、`css` 还是 `js` 都是脚本型的语言，也就是说，是不需要编译的，也就无所谓开发还是生产了。

但是，前端的发展日新月异，无论 `html`、`css` 还是 `js` 都有一些先天的缺陷，比如，`css` 不支持逻辑编写，因此写起来非常不便，于是我们发明了 `less`、`sass` 等预编译语言，又比如 `js` 是弱类型语言，因此又搞了 `typescript` 这种强类型的脚本。等等等等。

但这还是不是最重要的，最最重要的是，我们的浏览器不随着这些语言的发布或者更新就立即得到更新，因此，有很多很多牛逼的特性，在浏览器中都得不到支持。

所以，我们需要编译，将我们写的如 `es6` 的一些箭头函数，以及其他等等各种东西，编译成当前浏览器能够运行的代码。

因此，本来明明不需要编译的前端，也需要编译了。

既然是需要编译，那么干脆来得狠点，就有了 `Nodejs` 环境。

![0f3c701c0ad594f49d73052f80aafe.jpg][]

事实上，无论是 `vue` 还是 `react` 亦或是其他的前端现代框架，都是以 `node` 为开发环境的了。

我们在 `Nodejs` 中开发项目，写代码，跑起来看效果，等等，这些都是在所谓的开发环境中。只有最终把整个项目编译打包，将输出的静态文件，放到服务器的 `nginx` 或者 `apache` 中运行，才算放到了生产环境。

> 目前我们前端开发的大多数时候，都是在 `node` 下面开发的。

所以，我们需要安装 `nodejs`。安装方法请查看 [Installing Node.js via package manager][]

## 开发操作系统的选择 ##

对于大多数前端开发者，都是在 `windows` 环境下开发的。我可以理解，但是，实际情况是 `nodejs` 的运行，在不同的系统下面还是有差异的，更多的时候，在类 `unix` 环境中，运行得更好。

所以，为了不必要的麻烦，最好将开发操作系统更换为其他操作系统。

**首推 MACOS 系统环境**

`MacOS` 是苹果公司基于 `unix` 开发的一套图形界面的操作系统。在图形界面上无可挑剔，是大量设计师以及视频工作者，亦或是咖啡馆中装逼的文青的必备操作系统。

但是，如果你仅仅认为它只是一个漂亮的操作系统的话，那就大错特错了。基于 `unix` 的核心，使得 `MacOS` 命令行无比强大。再配合 `brew` 这样的神器，简直就是简直了。

本人常年在 `mac` 下开发，已经无法自拔。

使用苹果操作系统，最简单的方法是去购买一台苹果笔记本。如果你不愿意购买苹果电脑，也是可以使用苹果系统的。大家可以参考我的黑苹果系列专题博文 [https://blog.csdn.net/fungleo/article/details/57572537][https_blog.csdn.net_fungleo_article_details_57572537]

**其次 Deepin 深度 linux 操作系统**

在众多的 `linux` 操作系统之中，原先深深折服我的是 `archlinux` 操作系统。其滚动更新的特性，可以让我最先体验到最新的软件以及系统核心。其灵活的系统配置，可以让我打造全世界独一无二的系统环境。但是人过三十，懒得折腾。蓦然回首，发现 `Deepin` 就在那灯火阑珊处。

![32a42587448c1575659b83b1f37466.jpg][]

这款操作系统最牛逼的特性就是，基本不用啥配置，装上就能用。输入法，浏览器，办公软件……深度致力打造一个开箱即用的系统环境。

对于我这个颜值控来说，最最最重要的是，深度操作系统非常非常的漂亮。

而对于大量 `windows` 用户来说，切换 `mac` 系统最头疼的事情是快捷键的不一致。而深度这点做得非常优秀，其大量的快捷键直接兼容 `windows`，因此，你基本可以零疼痛的切换操作系统。

> 深度核心开发者老王已经离开深度开发团队。对于此事，我一直没有发表看法。在这里小小的说两句，这是一个好事。一个操作系统的发展，应该由大量的开发者顺应用户的需求进行开发，而不是一个英雄。英雄落幕固然可叹，但大树底下不长草却也是真正的道理。希望深度借此机会，继续深耕操作系统开发，为我们带来更好的 linux 系统。

前端工程师如何使用深度作为开发系统，请参考我的系列博文 《Deepin Linux & 前端工程师》 [https://blog.csdn.net/column/details/17970.html][https_blog.csdn.net_column_details_17970.html]

**其他 linux 操作系统**

如果你选择其他操作系统，我相信你一定对你使用的系统有所了解，我就不说啥了。

*最后，如果您再 `windows` 下开发遇到了一些其特有的问题，请尽量自己尝试解决，因为，本人是绝对帮不了你的。不是别的，真不会……*

## 命令行的重要性 ##

作为一个开发者，很多人并没有意识到命令行的重要性。在一个前端都需要跑命令的时代，不掌握一些命令行操作，简直对不起工程师的头衔。

没什么特殊的要说的，只是强调，要认识到命令行的重要性，要从心底里不要排斥命令行，甚至拥抱它。

不要畏惧，勇敢尝试，你就会发现，很多你用鼠标操作了很多年的事情，简直是太蠢了。

## Unix 思想 ##

1.  没有消息就是最好的消息。
2.  一个工具只干一件事情。

嗯，第一个不说不行。但第二个才是我想说的。一个工具只干一件事情，所以开发项目最重要的是统筹能力，而不是代码的开发能力。

也就是说，代码的组织能力的重要性远远大于你写代码的能力。

## 什么是 react ##

前面扯了半天，终于唠到点正题了。

这个和 `jquery` 是完全不一样的概念，`jquery` 只是一个工具，而 `react` 是一个前端框架。

最最重要的是 `react` 只是 `react` 开发生态的其中一个小项目而已，其负责 UI 视图的渲染。

在开发的时候，我们会用到很多围绕 `react` 的其他工具，他们各司其职，各自完成各自的事情。

嗯。

## javaScript es6 语法 ##

你需要对 `es6` 语法有一个大概的了解，比如 `let` 取代 `var`，箭头函数等。如果对这些一无所知，可能在接下来的学习中会感到比较困难。

阮一峰大哥电子书是一个很好的学习资料，其地址是： [http://es6.ruanyifeng.com/][http_es6.ruanyifeng.com] 不需要精通，一定要大概的看一遍，有一个大概的了解即可。

## 其他你该了解的事情 ##

其他还有很多你该了解的事情，有时间请阅读我写的 vue 的前言博文 《vue基础知识概述》[https://blog.csdn.net/fungleo/article/details/77575077][https_blog.csdn.net_fungleo_article_details_77575077]

`github` 这是代码托管网站，几乎所有的开源项目以及组件，全部托管在 `github`。包括我这篇文章。

`npm` 它是 node 的包管理器

唠叨这么多，下面我们开车了。

本文由 FungLeo 原创，允许转载，但转载必须保留首发链接。

[React _ webpack]: http://blog.csdn.net/fungleo/article/details/80841159
[React _ webpack 1]: http://blog.csdn.net/fungleo/article/details/80841181
[React _ webpack 2]: http://blog.csdn.net/fungleo/article/details/80841200
[React _ webpack 3]: http://blog.csdn.net/fungleo/article/details/80841220
[React _ webpack _ api]: http://blog.csdn.net/fungleo/article/details/80841241
[React _ webpack _ jsx]: http://blog.csdn.net/fungleo/article/details/80841255
[React _ webpack _jsx]: http://blog.csdn.net/fungleo/article/details/80841263
[React _ webpack _Link]: http://blog.csdn.net/fungleo/article/details/80841274
[React _ webpack 4]: http://blog.csdn.net/fungleo/article/details/80841290
[React _ webpack _ jsx _ scss]: http://blog.csdn.net/fungleo/article/details/80841296
[React _ webpack 5]: http://blog.csdn.net/fungleo/article/details/80841308
[0fdd641b6489b2f3c60d7a4403ad09.jpg]: /images/20220521/a9deb649d62c4887ad700c23e0b253c5.png
[0f3c701c0ad594f49d73052f80aafe.jpg]: /images/20220521/a98569ae5be84acbb30fe701838a422b.png
[Installing Node.js via package manager]: https://nodejs.org/en/download/package-manager/
[https_blog.csdn.net_fungleo_article_details_57572537]: https://blog.csdn.net/fungleo/article/details/57572537
[32a42587448c1575659b83b1f37466.jpg]: /images/20220521/e8d29a77466144918385a13dcddc3123.png
[https_blog.csdn.net_column_details_17970.html]: https://blog.csdn.net/column/details/17970.html
[http_es6.ruanyifeng.com]: http://es6.ruanyifeng.com/
[https_blog.csdn.net_fungleo_article_details_77575077]: https://blog.csdn.net/fungleo/article/details/77575077