案例: 使用webpack和babel搭建react开发环境，把jsx文件转化为js文件
1.第一件事是设置项目:
指定盘建立一个文件下(本案例实在F盘的react目录下,后面没特殊说，默认使用F:/react 这个目录)，建立一个项目文件夹helloreact,在该文件夹内创建两个子文件夹dev和output.。
在dev文件夹内会存放没有转化的jsx文件，es6文件和其他脚本相关的内容。换句话说这里存放你正在写的和实际的工作代码
在output文件夹内，我们会把在dev文件夹中的脚本文件上运行各种构建工具的结果放在这里。本案例中，babel会将所有jsx文件转换为js
2.在helloreact目录下建立一个空的html文件 index.html
html文件中只有一个id 为container 的div。和一个指向会在output文件内生成的javascript文件 (myCode.js) 的script标记。html如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React!React!React!</title>
</head>
<body>
<div id="container"></div>
<script src="output/myCode.js"></script>
</body>
</html>
3.安装并初始化node.js
如果我们已经安装了node.js, 我们可以通过 npm – v 查看 node的版本，如果版本过低，我们要 更新node 的版本 npm install npm@latest -g
项目中我们尽量保证node 的版本新一点，否则我们在安装 webpack 或者 babel等其他工具时会出现错误。现在我们已经安装好node 并保证node的版本最新，下面我们在helloreact目录下初始化node。指令 : npm init 。然后控制台会出现一大堆问题，帮助设置项目的node.js。第一个问题是设置项目的 名称，我们就默认输入helloreact.。
其余的步骤我们按提示一直按回车键就可以了。 最终我们会在helloreact 文件夹得到一个package.json文件。文件内容如下:
版权声明：本文为heartAndthink原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。