The Footsteps of ES6 Way React Journey

I’ll be your guide on your trip through the React the ES6 way journey. I’ll be showing you how to create declarative, compassable and most of all fun to code React applications using the newest javascript specification ECMA Script 2015 or ES6.

We will be start with Node and how to use NPM. Well also be getting familiar with webpack, which is a module bundler. And we will be learning about many the new features the ES6 has to offer.

Along the way we will create compassable and reusable React components as well as learn how React makes use of the Virtual DOM to be blazing fast.

All we need is a bit of javascript experience and you will be ready to dive into learning react, the ES6 way.

We will be follow this steps during this journey’s first part.

Part 1 of the Journey
- The Tools of the Trade
- Installing Node and NPM
- Getting familiar with Webpack
Part 2 of the Journey (we will follow this steps second part)
Learning about ES6
Create React Components
The Virtual DOM

The Tools of the Trade

Text Editor

Before we start, the first thing you’ll need is a text editor. Hopefully, you already have a favourite and you’re using it. These days, I prefer SublimeText, but to each their own. Here are some popular choices,

Sublime
Atom
WebStorm
Notepad
...

Browser

You can use whatever web browser you choose, but I highly recommend using the latest version of Google Chrome. It has a great set of developer tools for React, and we will be using them throughout the course to help us debug and gain some insight as to what is happening in the browser when React renders the components in the DOM.

GitHub

We will be using GitHub to store our code, so if you’re not familiar with it, you can find a great general overview of it here and also you can find a general documentation of it here.


What’s this NPM thing anyways?

NPM, commonly referred to as “node package manager”. It is just that. It’s a package manager for node. Although, npm does not stand for “node package manager”. I won’t go into the details of that, but if you’d like to, you can read all about it here.

NPM’s purpose is to install and maintain specific versions of JavaScript packages without the old copy and paste that we used to have to do back in the “old days”.

Dependencies

Application requirements are defined in a file in the root directory of your application, called package.json as an example below

{ 
“name”: “Example App”,
“version”: “1.0.0”,
“description”: “description text”,
“author”: “author name",
“license”: “licence type”,
“devDependencies”: {
“react-hot-loader”: “1.3.0”,
“webpack”: “1.12.6”,
“webpack-dev-server”: “1.12.1”
},
“dependencies”: {
“babel-cli”: “6.2.0”,
“babel-core”: “6.1.21”,
“babel-loader”: “6.2.0”,
“babel-polyfill”: “^6.2.0”,
“babel-preset-es2015”: “6.1.18”,
“babel-preset-react”: “6.1.18”,
“babel-preset-stage-0”: “6.1.18”,
“babel-runtime”: “6.1.18”,
“css-loader”: “^0.23.0”,
“express”: “4.13.3”,
“extract-text-webpack-plugin”: “^0.9.1”,
“history”: “~1.13.1”,
“node-sass”: “^3.4.2”,
“normalize.css”: “^3.0.3”,
“react”: “>=0.14.2”,
“react-dom”: “>=0.14.2”,
“sass-loader”: “^3.1.2”,
“style-loader”: “^0.13.0”
}
}

There are two major sections where we define our dependencies which are dependencies and devDependencies. The dependencies section defines everything that our app needs during run time, while the devDependencies section defines all of the modules we need during development. It also includes some ancillary information that is needed if we are going to push our package up to NPM.


Development Environment

Now, Let’s get our development environment up and running so that we can start writing some code later.

Installing Node

Installing Node is fairly straight forward on Mac OSX and Windows. The NodeJS website provides installers for both platforms. Just click on the latest Stable button and you’ll be off and running. You can find it here.

Installing npm

We’re done already. NPM is installed alongside Node.

Installing React

Next we’re going to go ahead and get React installed. As of React, it is broken up into several modules. React and ReactDOM are the two major ones, and what we will start with.

But first we need to create a folder for our app so we have a place to store all of this stuff. Go into whatever directory you like to store all of your code in and make a new directory inside of that one.

$ mkdir react-app

By the way, we’ll be making a small reusable React component in this journey that will show estimated reading time.

Now let’s cd into that directory and create a boilerplate package.json file

$ cd react-app $ npm init --yes

Using the -yes flag just skips all prompts and uses the defaults to initialize the package.json file. After this is done we can install React and ReactDOM

$ npm install — save-dev react react-dom

We’ll notice that we added the

--save-dev

flag. This tells npm to add both of those packages to the devDependencies section of our package.json file. We’re saving it as a development dependency because this little module will likely be a part of a bigger application that will already have React installed.

React is now installed and all we need to do now is install a few more packages and get our development server up and running.

Development server

In order to get our development server up and running we’re going to have to install a few modules, and create a couple of new files. Let’s start by installing a few things.

Webpack

We’re going to use Webpack to pipe our ES6 code through Babel and bundle the ES5 output for optimal download and execution speed. Webpack also provides a development server. I have no plus experience on webpack but it has a great source on the web to help you to do some kind of stuff.

With the development server our assets will be hot-reloading, which means any changes we make to our included JavaScript or CSS files will be automatically compiled, updated in the bundle, and injected into the existing browser tab without us having to reload to see our changes. Now that is awesome stuff.

Let’s begin by installing Webpack. We will be installing Webpack globally so that we have access to the Command Line tools. We do that by using the -g flag

$ npm install -g webpack

Install Global What’s this install global stuff mean anyways? Up until now we’ve been installing all of our pack- ages locally, meaning that npm fetches the modules, and installs them in the /node_modules directory in the root of our app. This is great for modules that only our app is dependent on, or modules that don’t have a CLI, but for things like Webpack or Grunt this is necessary.

Babel

Ok now that we have that all cleared up let’s move on and install all of the Babel dependencies we will need

$ npm install --save-dev babel babel-core babel-loader

We’ll also need to install the babel preset modules so it knows how to transpile all of our code:

$ npm install --save-dev babel-preset-es2015 babel-preset-react babel-preset-stage-0 2

Babel and all of the dependencies related to Babel have been installed. But we just installed Webpack didn’t we? Yes, we did, but if you’ll remember we installed it globally. When npm was resolving peer dependencies it detected that we didn’t have webpack installed anywhere in our node_modules directory, and we don’t, so let’s install it locally now.

$ npm install --save-dev webpack

Webpack Dev Server and React Hot Loader

These are the two pieces that allow us to do the hot-reloading that we were talking about earlier. Let’s go ahead and install them

$ npm install --save-dev webpack-dev-server react-hot-loader

Configure the server

In order to configure the server we’re going to have to create a configuration file for Webpack. This isn’t a Webpack class, so I won’t go into the details. First create a directory for our example application, and create the config file

$ mkdir example
$ cd example
$ touch webpack.config.js

Now open up that file and copy the following code in

var webpack = require(‘webpack’);
module.exports = {
entry: {
‘react-app’: [
‘webpack-dev-server/client?http://localhost:8881/',
‘webpack/hot/only-dev-server’,
‘./example/react-app.jsx’
]
},
output: {
path: __dirname,
filename: “[name].js”,
publicPath: ‘http://localhost:8881/’,
chunkFilename: ‘[id].chunk.js’,
sourceMapFilename: ‘[name].map’
},
resolve: {
extensions: [‘’, ‘.js’, ‘.jsx’, ‘.es6’],
modulesDirectories: [‘node_modules’]
},
module: {
loaders: [
{ test: /\.jsx$|\.es6$|\.js$/, loaders: [‘react-hot’, ‘babel-loader’], exclude: /node_modules/ },
{ test: /\.scss$|\.css$/, loader: ‘style-loader!style!css!sass’ }
]
},
plugins: [
new webpack.NoErrorsPlugin()
],
devtool: “eval-source-map”
};

Great, we’ve got our Webpack configuration in place. Now let’s add some scripting commands to our package.json file so we can easily start it up. Open up package.json and add the following line in the scripts object

“start”: “webpack-dev-server — config ./example/webpack.config.js — hot — port 8881”

We won’t be doing any testing in this journey, so go ahead and remove the “test” line. Your scripts object should now look like this:

“scripts”: {
“start”: “webpack-dev-server — config ./example/webpack.config.js — hot — port 8881”
}

This will give us the npm start command which we can use to fire up our development server. Now we can fire up our development server. Let’s give it a try

$ npm start

You should see Webpack initialize and try to compile our bundle. It’s going to complain and tell you that it can’t find example/react-app.jsx, and that’s ok because we haven’t created that file yet! We’ll be doing that shortly!

You can also visit localhost:8881 and see the glorious web server in action. Although there isn’t much to see just yet.

Next part of the journey we will follow the steps which are related to part. Thanks for taking this journey with me, and be patient to have fun creating application using ReactJS on the next step.