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

React 入门系列教程导航

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

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

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

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

开发环境以及生产环境

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

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

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

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

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

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

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

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

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

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

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

事实上，无论是 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

其次 Deepin 深度 linux 操作系统

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

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

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

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

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

前端工程师如何使用深度作为开发系统，请参考我的系列博文 《Deepin Linux & 前端工程师》 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/ 不需要精通，一定要大概的看一遍，有一个大概的了解即可。

其他你该了解的事情

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

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

npm 它是 node 的包管理器

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

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