Setting up React with Webpack 3.0, Yarn and Babel

Published Jun 27, 2017
Setting up React with Webpack 3.0, Yarn and Babel

React is an awesome Javascript framework developed by Facebook for developing awesome user interfaces that are fast, efficient and scalable. Webpack 3.0 just got released some days ago and I decided to write this tutorial to help Newbies to the world of React set up a React development environment with Webpack and Babel. I have also noticed that many beginners tutorials do not go through the environment setup of React as they should and I also want to teach learners an alternative way of setting up a React environment without using React-cli (Create-react-app)

Enjoy learning as I keep everything in this tutorial awesomely simple !!!

Requirements

  • Nodejs

  • Webpack 3.0 - Javascript Module Bundler

  • EcmaScript 6 (ES6) - New Javasript standard

  • Babel - Javascript Compiler

  • Yarn - Javascript Package manager (Alternative to NPM) developed by Facebook

Installing Node and Yarn

To develop a React Application, you must have NodeJs and Yarn installed on your system. The installation of both packages vary depending on the Operating system you are using.

Installing Nodejs

  • You can visit (https://nodejs.org)[https://nodejs.org] for installation guide to installing Node that suites your Operating System.

Note: You should not install nodejs that is below version 6.11.0

Installing Yarn

Disclaimer: This tutorial was created using Linux O.S (Ubuntu) but I am pretty sure the processes in this tutorial are quite the same for other Operating Sysytems(O.S) but you can always ask for help from me though.

Let’s Begin

We will create a folder via terminal and initialize the folder with yarn init instead of the popular npm init. So, fire up your terminal with the following commands:

mkdir  mkdir my-react
cd my-react
yarn init

Answer all the question you will be asked via the terminal and then, you will see a new file called package.json magically appear in your folder. You should have something like this:

{
  "name": "my-react",
  "version": "1.0.0",
  "description": "A Demo Application showing how to set up react with webpack,yarn and babel",
  "main": "index.js",
  "author": "Goodness Toluwanimi Kayode",
  "license": "MIT"
}

Installing Webpack

Now, we have to install Webpack 3.0 to our application but briefly, what webpack does is that it allows you to develop Javascript application in modular way. In essence, webpack prevents your code from being bulky, long and unreadable in a way that you can make use of functionalities of external modules in a particular file by just writing a line of code in the file you are working on.
To install webpack and webpack-dev-server with yarn, run this in the terminal:

yarn add webpack webpack-dev-server path

Once that is installed in your application, you will see a yarn.lock, yarn.error file in the project folder and node_modules folder will also be present in your project folder.

Create Config File

Create a new file called webpack.config.js in the project folder and open it in your text editor. You should see something like this



Explaining the content in the config file

Looking at the code in webpack.config.js we find out that we have two basic and important keys that must be filled with values and they are the entry key, which requires the entry file for the application and the output key which requires the location in which the bundled Javascript code is meant to be saved.
The loaders key property is another one as it helps in transformations that occur in the application. Webpack has a lot of loaders you can always add to the loaders array. Check them out here.

Integrating Babel into Project

For our application to run well, we have to include babel, babel-preset-es2017 babel-preset-react,babel-loader into our project. You can install this packages by running the command below in the terminal:

yarn add babel-loader babel-core babel-preset-es2017 babel-preset-react --dev

After installation of those packages, create a file named .babelrc via this command or you can create it from your text editor

touch .babelrc

Then, add this to the file:

{
    "presets":[
        "es2017", "react"
    ]
}

With those lines, babel-loader will work well.

Setting up React

First, create a folder called src and then create 2 files called app.js and app.html with these commands

 mkdir src
 cd src
touch app.js  app.html
cd .. 
  • Open app.html and add this line of code
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My React From The Scratch</title>
    <meta charset="utf-8">
    <meta content="author" description="Pusher of codes">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
  • Open app.js and add the code below into it
alert("Hello Pusher G! I love React");

After doing this we have to install a package called html-webpack-plugin this is because React uses JSX (Javascript and Xml) and also ES6 and many browsers do not support them so after the babel-loader bundles the javascript code, the bundled output is now what is meant to be displayed on the browser but it cannot be displayed directly except we pass the location of the bundled file to the script tag in the app.html file and that is not too efficient. So, what html-webpack-plugin helps us do is take care of the script insertion without adding it to the app.html page.

To install, run this in your terminal

yarn add html-webpack-plugin

Then update your webpack.config.js file. It should look like this

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './src/app.html',
  filename: 'app.html',
  inject: 'body'
})
module.exports = {
     entry: './src/app.js',
     output: {
         path: './bin',
         filename: 'app.bundle.js'
     },
    module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
    ]
  }
 };

 plugins: [HtmlWebpackPluginConfig]
}

Firing Up Your Application

To run the application, we need to add the code below to our package.json file.

"scripts": {
    "start": "webpack-dev-server"
  },

Then your package.json file should look like this.

{
  "name": "my-react",
  "version": "1.0.0",
  "description": "A Demo Application showing how to set up react with webpack,yarn and babel",
  "main": "index.js",
  "author": "Goodness Toluwanimi Kayode",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "html-webpack-plugin": "^2.29.0",
    "path": "^0.12.7",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.5.0"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.0",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-react": "^6.24.1"
  }
}

After saving all your codes, run this in your terminal

yarn start --watch

Once the application fires up, you should see this:

More with React

Run this in the terminal,

yarn add react react-dom

it will install react packages in your application and it will be updated in the dependencies key properties in package.json

  • You can now create a file called App.jsx in the src folder. The file will house the components of our React Application. Please, note the casing style there.
    In the App.jsx file add the following:
import React from 'react';
import { Component } from 'react';

export class App extends Component {
  render() {
    return (
     <div>
        <h1>Hello World!!! {name}</h1>
      </div>
      );
  }
}

Then, make app.js file look like this:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(
 <App name="Goodness kayode" />,
 document.getElementById('root')
 );

Run Your Awesome Application

yarn start  --watch

Final Remark

I have been able to take you through setting up your react environment with Webpack 3.0, Babel and yarn. Hope you enjoyed it? Got any question? You can always holla me or make a comment and I will definitely respond. I love you!!!

How can you thank me?

I will appreciate comments, tweets and posts on Scotch, twitter or Hackernews.
You can appreciate me by following me on Github , twitter and subscribe to my Youtube Channel!

Discover and read more posts from Goodness Toluwanimi Kayode
get started
Enjoy this post?

Leave a like and comment for Goodness

9
5
5Replies
Dan Harsanyi
4 days ago

Hey mate, in addition to the below fixes, you also need to change
{name}
to
{this.props.name}
to get it rendering the name properly

Babalola Rotimi
21 days ago

Hello. In App.jsx you need to make the class App the default export from the file i.e.

export default class App ...

or you use object destructuring to import in app.js i.e.

import { App } from './App.jsx';
Dennis Askeland
24 days ago

On your RegEx for .js/.jsx you could combine them with /.jsx?$/ with optional character x. No need for two lines doing the same operation.

@Paule-E is right, babel-preset-env instead of es2017

You have an error in your webpack.config.js file; line 21 should be a comma not a semicolon. And you are installing the path dependency and not using it? Output path should be path: path.resolve(__dirname, ‘bin’) if you want don’t want to use absolute paths.

I would recommend adding the --watch to the script command itself instead of typing it every time.

And besides react and react-dom, all your dependencies could be added to devDependencies as they are only used for development.

import React, { Component } from ‘react’; is also a shorter way of doing the exact same thing.

And in ReactDOM you’re targeting a div with the ID of “root”, while in your template it’s named “app”.

Cheers!

Show more replies

Get curated posts in your inbox

Read more posts to become a better developer