前端生态这几年可谓迎来了大发展，在这个生态圈内，不接受新事物学习新技能，等于堕入魔道。
本文尝试对前端开发利器React，以及构建项目过程中涉及的技术栈进行介绍，以期开启整个构建流程上的思考。
有必要指出的是，要弄明白一件事情的原理，首先要知道它的目的是什么。
1、Nodejs & NPM
为什么要提nodejs呢？
与其说nodejs提供了服务端开发的另一种可能，不如说它彻底改变了整个前端开发的生态。nodejs平台上衍生出了强大的npm、grunt、express等，几乎重新定义了前端的工作流程和开发方式。
这里有必要来讲一讲NPM（node package manager）这个包管理器。
npm是javascript包管理器，我们可以在npm上找到、分享和使用来自无数开发者贡献的代码包，而无需自己造轮子。
使用npm，需要安装node。新的版本的nodejs已经集成了npm，安装好nodejs，通过以下命令查看所安装的版本：
$ npm -v
在项目目录内，当在命令行执行
$ npm install
它会识别一个叫package.json的文件，并尝试安装该文件内配置的依赖包。
2、React
React的组建化思想使得代码重用性高，易于测试、更容易分离关注点（separation of concerns）。
React还宣称Learn Once, Write Anywhere。既可运行在客户端浏览器，又能在服务端渲染，同时React Native还使得React开发原生app成为可能。
下面我们来写一个简单的React程序，让其能够运行起来：
项目目录：
第一步：新建一个package.json文件，指定项目所需的依赖包。
{
"name": "react-tutorials",
"version": "1.0.0",
"description": "",
"author": "yunmo",
"scripts": {
"start": "webpack-dev-server --hot --progress --colors --host 0.0.0.0",
"build": "webpack --progress --colors --minimize"
},
"dependencies": {
"react": "^15.4.0",
"react-dom": "^15.4.0"
},
"devDependencies": {
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.2"
},
"license": ""
}
这是npm包管理器的必要文件，定义了该项目的名称、版本、启动命令、生产环境依赖包（dependencies）和开发环境依赖包（devDependencies）。
第二步：新建一个index.html文件。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>yunmo</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
</head>
<body>
<div id="yunmo"></div>
<script src="bundle.js"></script>
</body>
</html>
内容版权声明：除非注明，否则皆为本站原创文章。