React Js Tutorial – Environment SetUp Using Webpack

4830
views

React Js Environment Setup Using Webpack

Hi, today we will learn how to set up react js in our local environment. If you are new to React Js and want to know what is React Js? Please read my article React Js Tutorial For Beginners – Introduction

You need ingredients to cook a tasty food. Similarly to install react Js perfectly you need some ingredients. I call ingredients as packages & tools.

Requirements:

You need only 4 things to install react Js in your local environment.

  1. Node Js & NPM
  2. React Js
  3. Babel Js
  4. Webpack

Steps to follow:

1. Install Node Js & NPM

Download Node Js from here.

Check out this link how to install Node Js and npm.

Before installing React, Babel & Webpack let me start with creating the directory structure for our project.

2. Directory Structure

Create a directory name “sample-app“.

Command to create a folder:

mkdir sample-app

Once you installed Node Js & npm next you need to create a package.json file.

What is package.json?

The package.json is a file where you define the project details and all the dependencies that you need for your project.

How to create package.json file?

Run the following commands

cd sample-app 

npm init

When you run npm init command it will ask you few details like your project name, project version, author name. Just give your answers. If you don’t want to give any answers just hit enter. See below screenshot.

package.json sample file

A package.json file will be created in your sample-app folder.

3. Install React Js

You can install react Js in two ways. Either by defining react package in package.json file or through npm command.

I will show you how to install react js through command.

Command to install react js

npm install react react-dom --save

when you use “–save” in your command, it will add the dependencies to your package.json file.

4.Install Babel Js

Command to install babel js

npm install babel-core babel-loader babel-preset-react babel-preset-es2015 --save

5. Install Webpack

Similarly, we will also install webpack in the same way.

npm install webpack webpack-dev-server --save

Now we will configure webpack & add files to our project as below.

Let’s create following 4 files in sample-app folder

  1. index.html
  2. main.js
  3. App.jsx
  4. webpack.config.js

Now open the index.html file and add the following lines of code.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset = "UTF-8">
      <title>React App - Watchdown.com</title>
   </head>
   <body>
      <div id="app"></div>
      <script src="index.js"></script>
   </body>
</html>

A simple index.html file which has div block with id=”app”. We are going to render our whole app into this div block.

Now let’s create a component.

What is a component?

A component is nothing but we write a piece of code and use it anywhere in the project.

For example, you want to create a table. There are 10 pages in your project where you need to write table code. Instead of writing 10 times table code you will write a component and call it where ever it’s required in your project.

Now open the App.jsx file and add the following lines of code.

import React,{ Component } from 'react';
class App extends Component {
   render() {
      return (
         <div>
            Hello World!! by Watchdown.com
         </div>
      );
   }
}
export default App;

You can see I created a component called “App”. Now I will use this component to render “Hello world” message.

Now open the main.js file and add the following lines of code.

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

ReactDOM.render(<App />, document.getElementById('app'));

Now import react & react-dom to your application. And we are also importing App component here. We will render App component in the div block (id=”app”) that we discussed earlier.

Now open the webpack.config.js file and paste the following lines of code

var config = {
   entry: './main.js',
	
   output: {
      path:'/',
      filename: 'index.js',
   },
	
   devServer: {
      inline: true,
      port: 8000
   },
	
   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
				
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}

module.exports = config

In webpack.config.js file we are defining entry point as main.js. And  index.js is bundled app file. And we are creating a server which runs on port 8000. And we are configuring babel to search for all js files and use es 2015 & react presets.

Now finally, we are done with the configuration let us start our server

Before that add this line to your package.json file

"start": "webpack-dev-server --hot"

And start your server with the following command.

npm start

Now open the browser and hit http://localhost:8000

You can see the output as “Hello world !! by watchdown.com”.

Hope you enjoyed reading this article (React js environment setup using webpack).
If you have any more doubts please comment. Happy to help you.

Checkout next tutorial React Js Tutorial – React Component Lifecycle, State, Props

You can download the complete code from Git repository.

 

7 COMMENTS

  1. Dilip, Nice article…. keep on posting further… Explained very simple way that can be easily reach out to the people who are new to Reactjs. Keep going…..

  2. I don’t even know how I ended up here, but I thought this post was great.
    I do not know who you are but definitely you’re going to a famous blogger if you aren’t already 😉 Cheers!

  3. Finally! A post that explains what I need to create and run a React JS app and what each file is for! Thank you! I look forward to other posts like this.

  4. Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
    – configuration.output.path: The provided value “./” is not an absolute path!

    I’m getting this error when I run npm start.
    Please help me how to fix this.

    Thanks

    • Change this line in webpack.config.js file

      output: {
      path:’./’,
      filename: ‘index.js’,
      },

      to

      output: {
      path:’/’,
      filename: ‘./index.js’,
      },

      Clone our github code & try it. Let me know if it helped you.

LEAVE A REPLY

Please enter your comment!
Please enter your name here