Setting Up A React ES6 Webpack Project - ashish9342/FreeCodeCamp GitHub Wiki
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.
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.
- Initializing the Project
- Installing Dependencies
- File Structuring
- Writing the Code
- [Running Webpack and Webpack Dev Server](Running-Webpack-Dev Server-React-ES6-Webpack-Project)
- 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!