ReactJS – Environment Setup

You will learn here to setup an environment for the successful development of ReactJS application.

Pre-requisite for ReactJS

Before working with ReactJS, there are a few prerequisites you should have knowledge about:

  1. HTML/CSS: ReactJS is a JavaScript library that is used to create user interfaces, so it is essential to have a basic understanding of HTML and CSS.
  2. JavaScript: ReactJS is built on top of JavaScript, so you’ll need to have a solid understanding of JavaScript fundamentals like variables, functions, arrays, objects, and so on.
  3. ES6: ReactJS uses modern JavaScript features like arrow functions, template literals, and destructuring assignments, which are part of the ECMAScript 6 (ES6) specification. It’s important to have a basic understanding of these features to work with ReactJS.
  4. Node.js: ReactJS requires Node.js to run, so it’s important to have Node.js installed on your machine.
  5. Package Manager: ReactJS uses a package manager like npm or yarn to manage dependencies and packages. You should have a basic understanding of how package managers work to manage your ReactJS application’s dependencies.
  6. Git: Git is a popular version control system used for software development. It’s essential to have a basic understanding of Git to work with ReactJS.

While not all of these prerequisites are strictly required to work with ReactJS, having a solid foundation in these areas will make it easier to get started with ReactJS and build more complex applications.

ReactJS Installation

There are several ways to install ReactJS:

  1. CDN: You can include the ReactJS library in your HTML file using a Content Delivery Network (CDN). This is the easiest way to get started with ReactJS, but it’s not recommended for larger projects as it can affect page load times.
  2. Downloading the ReactJS Library: You can download the ReactJS library from the official website (https://reactjs.org/) and include it in your project.
  3. Create React App: You can use the Create React App tool to create a new React application. This will automatically install all the necessary dependencies and set up the development environment for you.
  4. Using a package manager: You can use a package manager like npm or yarn to install ReactJS in your project. To do this, you’ll need to have Node.js installed on your machine. Once Node.js is installed, you can run the following command to install ReactJS:
npm install react

or

yarn add react

These are the most common ways to install ReactJS. The method you choose will depend on your project requirements and your personal preferences.

Installation using the npm command

To install ReactJS using the npm command, you’ll need to have Node.js and npm installed on your machine. Once you have Node.js and npm installed, you can follow these steps to install ReactJS:

  1. Open a command prompt or terminal window.
  2. Navigate to the directory where you want to create your ReactJS project.
  3. Run the following command to create a new ReactJS project:
  4. Navigate to the project directory by running the following command:
  5. Run the following command to start the development server:
npx create-react-app my-app

This will create a new ReactJS project in a directory named “my-app” and install all the necessary dependencies.

cd my-app
npm start

This will start the development server and open the ReactJS application in your default web browser.

That’s it! You now have a working ReactJS application installed using the npm command. You can now start editing the code in your favorite code editor and see the changes reflected in the browser in real-time.

Install Webpack

npm install webpack webpack-dev-server webpack-cli –save

Install Babel

npm install babel-core babel-loader babel-preset-env babel-preset-react babel-webpack-plugin –save-dev

Create Files

Now to complete the installation, you will need the basic project files in application folder.

  • index.html
  • App.js
  • main.js
  • webpack.config.js
  • .babelrc

>touch index.html
>touch App.js
>touch main.js
>touch webpack.config.js
>touch .babelrc

Set Compiler, Server and Loaders

In webpack-config.js file please add the following code. Here, we are setting webpack entry point to be main.js. Output path is the place where bundled app will be served. We are also setting the development server to 8080 port. You can choose any port that you want to keep.

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   entry: './main.js',
   output: {
      path: path.join(__dirname, '/bundle'),
      filename: 'index_bundle.js'
   },
   devServer: {
      inline: true,
      port: 8080
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}

Now in package.json delete “test” “echo \”Error: no test specified\” && exit 1″ inside “scripts” object and add the start and build commands instead.

{  
  "name": "reactApp",  
  "version": "1.0.0",  
  "description": "",  
  "main": "index.js",  
  "scripts": {  
    "start": "webpack-dev-server --mode development --open --hot",  
    "build": "webpack --mode production"  
  },  
  "keywords": [],  
  "author": "",  
  "license": "ISC",  
  "dependencies": {  
    "react": "^16.8.6",  
    "react-dom": "^16.8.6",  
    "webpack-cli": "^3.3.1",  
    "webpack-dev-server": "^3.3.1"  
  },  
  "devDependencies": {  
    "@babel/core": "^7.4.3",  
    "@babel/preset-env": "^7.4.3",  
    "@babel/preset-react": "^7.0.0",  
    "babel-core": "^6.26.3",  
    "babel-loader": "^8.0.5",  
    "babel-preset-env": "^1.7.0",  
    "babel-preset-react": "^6.24.1",  
    "html-webpack-plugin": "^3.2.0",  
    "webpack": "^4.30.0"  
  }  
}

HTML webpack template for index.html

You can add a custom template to create index.html using the HtmlWeb-packPlugin plugin. It will enable you to add a viewport tag to support mobile responsive scaling of you app. It also set the div id = “app” as a root element for your app and adding the index_bundle.js script, which is your bundled app file.

<!DOCTYPE html>  
<html lang = "en">  
   <head>  
      <meta charset = "UTF-8">  
      <title>React Application</title>  
   </head>  
   <body>  
      <div id = "app"></div>  
      <script src = 'index_bundle.js'></script>  
   </body>  
</html>

App.jsx and main.js

This is the app entry point and first React component. It renders Hello World.

App.js

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

Now, import this component and have to render it to your root App element so that you can see it in the browser.

Main.js

import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
  
ReactDOM.render(<App />, document.getElementById('app'));

Create .babelrc file

Please create a file .babelrc and copy the below code to it.

.babelrc

{  
   "presets":[  
  "@babel/preset-env", "@babel/preset-react"]  
}

Running the Server

Once the installation process and setting up the app successfully completed, you can start the server by running the below command:

npm start

It will show the port number which you need to open in the browser. After you open it, you will see the following output.

Generate the Bundle

Now, you have to generate the bundle for app created. Bundling will process imported files and merging them into a single file: a “bundle”. This bundle can then be included on a webpage to load an entire app at once. To generate this, you have to run below given build command in command prompt.

npm run build

Using the create-react-app command

If you want to install react without going in the process of installing webpack and babel, then you can choose this command create-react-app to install react. The ‘create-react-app‘ is a tool maintained by Facebook itself. This is suitable for beginners without manually having to deal with transpiling tools like webpack and babel. So, let’s understand how to install React using CRA tool.

Step 1: Install NodeJS and NPM

Step 1: Create a new React project (my-reactapp)

Step 3: npx create-react-app my-reactapp

Step 4: Run the Server. npm start

facebookShare on Facebook
TwitterTweet
FollowFollow us
PinterestSave
Wordpress Social Share Plugin powered by Ultimatelysocial
Wordpress Social Share Plugin powered by Ultimatelysocial