w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home ReactJs

ReactJs: Installation and Setup the Development Environment

February 8, 2023
in ReactJs

Facebook ReactJs is a powerful framework to develop the single page applications. Tutorial will explain you how to install and setup the ReactJs Development Environment to run in local.

React is a unique JavaScript library in that it is only the “V” in MVC. Meaning that it is only used on the View layer in web applications. This allows it to be narrowly focused on doing one thing and doing it well.

You might also like

ReactJs: YouTube Instant search working with API

ReactJs: Eacy to setup and install (create-react-app)

My first reactJs (Hello World) Project

Video Tutorial

Facebook reactJs environment setup in local machine

Info: If you face npm permissions issue while installing packages, please find the “Fixing npm permissions“. This link will help you to resolve the issue.

Install RectJs dependencies

Before writing the reactJs code, we have to setup the environment and install all dependencies. Below list are the dependencies should be installed.

Installing Node

Installing NodeJs is genuinely straight forward on Mac OSX and Windows. The NodeJS site gives installers to the two stages. Simply tap on the v8.9.0 Stable catch and you’ll be off and running.

Installing NPM

You’re done already. npm is installed alongside Node. NPM, commonly referred to as “node package manager” 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.

Installing React

Next we will simply ahead and get React installed. As of React, it is separated into a few modules. React and ReactDOM are the two noteworthy ones, and what we will begin 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-first-time

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

$ cd react-first-time
$ 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 react react-dom

Great! 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!

Add Dependencies and Plugins

Babel

We will require a portion of the babel modules, so we should first introduce babel by running the code in the command prompt window.

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 babel babel-core babel-loader babel-cli

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

$ npm install --save babel-preset-es2015 babel-preset-react

Installing Development server

Keeping in mind the end goal to get our advancement server up and running we will need to install a couple of modules. We should begin by installing a couple of things.

Webpack

We will use webpack bundler in these tutorial. Let’s install webpack and webpack-dev-server.

$ npm install webpack --save
$ npm install webpack-dev-server --save

Configure the server

Keeping in mind the end goal to configure the server. We will need to create a configuration file for Webpack. First create a directory for our demo application which is already created, and create the config file:

$ touch webpack.config.js

Now open up “webpack.config.js” file and copy the following code in:

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

module.exports = config;

Let’s start the server. Before start the server, open the package.json and do change the code like below

Find the package.json code below.

{
  "name": "react-first-time",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": { "test": "echo "Error: no test specified" && exit 1" },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel": "^6.23.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^16.1.0",
    "react-dom": "^16.1.0",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  }
}

In the above code remove the highlighted line and add the below webpack starter

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

Once the above code is changed we are ready to run the server and create reactJs project

Let’s start the server

$ npm start

In my next tutorial you will learn how to write and run the reactJs project.

Tags: DevelopmentEnvironmentframeworkInstallationReactReactJSscriptSetup
Previous Post

19 Handy Credit Card UI/UX for Web Designers

Next Post

My first reactJs (Hello World) Project

Related Stories

ReactJs: YouTube Instant search working with API
ReactJs

ReactJs: YouTube Instant search working with API

February 8, 2023
ReactJs: Eacy to setup and install (create-react-app)
ReactJs

ReactJs: Eacy to setup and install (create-react-app)

February 8, 2023
My first reactJs (Hello World) Project
ReactJs

My first reactJs (Hello World) Project

February 8, 2023

Discussion about this post

Follow Us

Popular Posts

100 Creative CSS Cards

44 Free Multi step HTML forms

13 Free HTML & CSS Dashboard Template Designs

49 CSS Tables

20 HTML & CSS pricing tables

14 Best CSS Dark Mode

11 CSS Shopping Cart UI/UX

42 Cool CSS Avatars For Better UI

55 Useful handpicked CSS Buttons with examples and demos

89 Best CSS Toggle Switches

w3tweaks

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools