title	localeTitle
Setting Up a React Es6 and Webpack Project	设置React Es6和Webpack项目

这个wiki将指导您如何设置一个使用React，Webpack和ES6的简单项目。我们将深入介绍所有设置。

对于这个项目，我们将使用Webpack，它是一个模块捆绑器，并且通常用在React项目中。

React与ES6配合得很好，所以我们将在代码中使用ES6。

ES6是该语言的重要更新，也是自2009年ES5标准化以来该语言的第一次更新。
- lukehoban

ES6在浏览器中不起作用，但我们可以使用Babel手动将其转换为ES5。

我们使用的技术的一个关键特性是我们的index.html文件将引用一个捆绑的JavaScript文件，我们可以在其中引用其他JavaScript文件，而不是使用script标记从HTML文件中引用它们。

先决条件

本教程旨在为您提供一个可扩展的简单骨骼结构。对于想要学习React和ES6的人来说，它应该是一个很好的起点。如果你还没有使用JavaScript或jQuery构建任何东西，你应该先在FreeCodeCamp地图中进行一些练习。

在开始之前，请确保在最新版本中安装了NodeJS和Node Package Manager 。

快速说明

以下是本教程中提到的所有说明的列表。

npm install webpack webpack-dev-server -g
mkdir react-webpack-example && cd $_
touch webpack.config.js
npm init
npm install --save-dev react react-dom webpack webpack-dev-server babel-loader babel-core babel-preset-es2015 babel-preset-react
touch .gitignore
写.gitignore （使用https://www.gitignore.io/api/node ）
mkdir src
mkdir dist
mkdir src/js
touch src/js/client.js
touch dist/index.html
写dist/index.html
写src/js/client.js
写webpack.config.js
webpack
webpack-dev-server --content-base dist
在浏览器中打开Webpack Dev Server路由。完成！