Uncategorized

#CodeMentor 💻📱🖥📚😎

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)%5Bhttps://nodejs.org%5D 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

You can visit http://yarnpkg.com/en/docs/install for installation guide to installing Yarn that suites your Operating System
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>

</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 (

Hello World!!! {name}

);
}
}
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!

HN Submission/Discussion
reactjs
webpack
babel
Yarn
JavaScript
Enjoy this post? Give Goodness Toluwanimi Kayode a like if it’s helpful.
5

SHARE
Goodness Toluwanimi Kayode
Linguist turned Software Engineer. Code Freak with experience in building test-driven, scalable and efficient systems. I am a Tech. Preacher and crazy lover of Start-ups
I love building Softwares that people love. I devote most of my time to learning and teaching people programming and also building lovely software products. If you’d like to schedule a time to chat on Codementor, you can book me …
FOLLOW
Be the first to share your opinion

Enjoy this post?
5

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 develop…

Source: #CodeMentor 

Advertisements
Standard

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s