Setting Up A React ES6 Webpack Project - thelastmile/FreeCodeCamp GitHub Wiki

Setting up a React, ES6 and Webpack project

This wiki will instruct you how to set up a bare-bones project that uses React, Webpack and ES6. We'll go over getting everything set up in depth.

For this project we will make use of Webpack, which is a module bundler, and is commonly used in React projects.

React goes well with ES6, so we’re going to use ES6 in our code.

ES6 is a significant update to the language, and the first update to the language since ES5 was standardized in 2009. -- lukehoban

ES6 doesn’t work in browsers on its own yet, but we can make it work manually using Babel to transpile it to ES5.

A key feature of the technologies we are using is that our index.html file will refer to one bundled JavaScript file from which we can refer in other JavaScript files, rather than referring to them from the HTML file with script tags.

Prerequisites

This tutorial is intended to give you a bare bones structure upon which to expand. It should be a good starting point for anyone that wants to learn React and ES6. If you haven’t built anything with JavaScript or jQuery yet, you should go through some of the exercises in the FreeCodeCamp map first.

Before you start, make sure you have NodeJS and Node Package Manager installed at their most recent versions.

Contents

Quick Instructions

Here is a list of all the instructions mentioned in this tutorial.

  • 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
  • write .gitignore (use https://www.gitignore.io/api/node)
  • mkdir src
  • mkdir dist
  • mkdir src/js
  • touch src/js/client.js
  • touch dist/index.html
  • write dist/index.html
  • write src/js/client.js
  • write webpack.config.js
  • webpack
  • webpack-dev-server --content-base dist
  • Open Webpack Dev Server route in browser. Done!