快速搭建React的环境步骤详解(如何搭建react项目)

编辑：rootadmin

推荐整理分享快速搭建React的环境步骤详解(如何搭建react项目)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:搭建react开发环境,如何搭建react环境,构建react项目,如何搭建react项目,如何搭建react项目,构建react项目,如何搭建react项目,搭建react开发环境,内容如对您有帮助，希望把文章链接给更多的朋友！

前端生态这几年可谓迎来了大发展，在这个生态圈内，不接受新事物学习新技能，等于堕入魔道。

本文尝试对前端开发利器React，以及构建项目过程中涉及的技术栈进行介绍，以期开启整个构建流程上的思考。

有必要指出的是，要弄明白一件事情的原理，首先要知道它的目的是什么。

1、Nodejs & NPM

为什么要提nodejs呢？

与其说nodejs提供了服务端开发的另一种可能，不如说它彻底改变了整个前端开发的生态。nodejs平台上衍生出了强大的npm、grunt、express等，几乎重新定义了前端的工作流程和开发方式。

这里有必要来讲一讲NPM（node package manager）这个包管理器。

npm是javascript包管理器，我们可以在npm上找到、分享和使用来自无数开发者贡献的代码包，而无需自己造轮子。

使用npm，需要安装node。新的版本的nodejs已经集成了npm，安装好nodejs，通过以下命令查看所安装的版本：

在项目目录内，当在命令行执行

它会识别一个叫package.json的文件，并尝试安装该文件内配置的依赖包。

2、React

React的组建化思想使得代码重用性高，易于测试、更容易分离关注点（separation of concerns）。

React还宣称Learn Once, Write Anywhere。既可运行在客户端浏览器，又能在服务端渲染，同时React Native还使得React开发原生app成为可能。

下面我们来写一个简单的React程序，让其能够运行起来：

项目目录：

第一步：新建一个package.json文件，指定项目所需的依赖包。

这是npm包管理器的必要文件，定义了该项目的名称、版本、启动命令、生产环境依赖包（dependencies）和开发环境依赖包（devDependencies）。

第二步：新建一个index.html文件。

第三步：写一段简单的React代码。

第四步：运行。

那么如何在浏览器里运行呢？这里我们需要借助强大的webpack-dev-server来开启本地服务器。

我们可以看到上面的package.json里面有webpack和webpack-dev-server依赖包。下面会介绍webpack。

当然我们还可以通过nodejs来建立一个本地服务器，但这里其实webpack-dev-server是一个小型的nodejs Express服务器，它使用webpack-dev-middleware中间件来服务于webpack包。

webpack.config.js文件配置如下：

这样我们在命令行通过npm install安装好依赖包以后，敲打命令

运行服务后，在浏览器中输入 entry——webpack会根据应用的依赖关系，创建一个关系表。该表的起始点便是所谓的entry point（入口点）。entry point会告诉webpack从哪入手，webpack会以该表的依赖关系作为打包依据。 output——用于配置打包后的文件放置路径。 loader——webpack把每个文件都看作组建（如.css, .html, .scss, .jpg, .png等），但是webpack只能识别JavaScript。这时候loaders便可以把这些文件转换成组建，进而被添加到依赖关系表。 plugins——因为loaders作用方式是以单一文件为基础的，所以plugins更广泛的用来对打包组建形成的集合（compilations）进行自定义操作。

这样，一个完整的模块打包体系就建立起来了。

4、ES6

ES6，即ECMAScript 6.0，是 JavaScript的下一代标准。ES6里面新增了很多语法特性，使得编写复杂的应用更加优雅自然。

ES6中引入了诸如let和const、箭头函数、解构赋值、字符串模版、Module、Class、Promise等特性，使得前后端编程语言在语法形式上的差异越来越小。

我们来看一下：

当然，并非所有浏览器都能兼容ES6全部特性，但看到这么优雅的书写方式，只能看怎么行呢？因此，这里又引出了一个神器，Babel！

5、Babel

Babel是一款JavaScript编译器。

Babel可以将ES6语法的代码转码成ES5代码，从而在浏览器环境中实现兼容。

Babel内置了对JSX的支持，所以我们才能向上面那样直接return一个JSX形式的代码片段。

具体用法不在本文过多讲述。

6、Styles引入