Setting Up Your React Development Environment: A Step-by-Step Guide

Learn how to configure your environment for ReactJS development. This tutorial compares using Create React App (CRA) for rapid setup and a manual configuration approach using Webpack and Babel, providing clear instructions and best practices for both methods.

React Environment Setup

This section guides you through setting up your environment to develop ReactJS applications.

Prerequisites

• NodeJS and NPM
• React and React DOM
• Webpack
• Babel

Ways to Install ReactJS

There are two primary methods:

1. Using the npm command
2. Using the create-react-app command

1. Using the npm command

This method involves manually configuring Webpack and Babel. Let's break it down step-by-step.

Install NodeJS and NPM

NodeJS and NPM are essential for React development. You can install them from this link (example link, replace with a better one if available). Verify your installation using the command line (example commands shown in image - replace with actual command output image).

Install React and React DOM

1. Create a folder named reactApp (you can choose your location).
2. Navigate to this folder in your terminal.
3. Initialize npm: npm init -y
4. Install React and React DOM: npm install react react-dom --save (or install them separately using two commands).

Install Webpack

Webpack bundles your code for production. Install it using:

npm install webpack webpack-dev-server webpack-cli --save (or install them separately).

Install Babel

Babel translates modern JavaScript (including JSX) into code compatible with older browsers.

npm install babel-core babel-loader babel-preset-env babel-preset-react babel-webpack-plugin --save-dev (or install them separately).

Create Necessary Files

Create these files in your reactApp folder:

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

(You can use the touch command in your terminal or create them manually.)

Configure webpack (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/,
        use: {
          loader: "babel-loader",
        }
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ]
};
 

Configure package.json

Modify your package.json file's scripts section. Remove the default "test" script and add "start" and "build" scripts:

{
  "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 (index.html)

Create a basic index.html file. (Example shown below - replace with actual content of the index.html file)

React App: App.js and main.js

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

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

Create .babelrc file

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

Running the Server

Start the development server: npm start. Open the specified port in your browser.

Generate the Bundle

Create a production-ready bundle: npm run build.

2. Using the create-react-app command

This simplified approach uses the official Create React App tool. It handles Webpack and Babel configuration for you.

Install NodeJS and NPM

(Same as above - Instructions for installing NodeJS and NPM)

Setting up React with create-react-app

This guide explains how to easily set up a React development environment using create-react-app.

Prerequisites: NodeJS and NPM

You need NodeJS and NPM (Node Package Manager) to develop React applications. You can install them from this link (Please replace with a more reliable and up-to-date link if possible).

Installing React

create-react-app simplifies React installation. Use this command to install it globally:

npm install -g create-react-app
        

Creating a New React Project

After installation, create a new project. Let's call it my-react-app (you can name it whatever you prefer):

create-react-app my-react-app
        

Alternatively, you can use npx (included with npm 5.2 and later) to combine installation and project creation in one step:

npx create-react-app my-react-app
        

This creates a new directory, my-react-app, containing the basic project files. (Image showing project structure would go here)

Exploring the Project

The src folder contains the application's source code. (Image showing src folder contents would go here)

Let's modify the App.js file:

Modifying App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>Welcome to My React App!</p>
      </header>
    </div>
  );
}

export default App;
        

(You can use any code editor you prefer.)

Running the Application

1. Navigate to your project directory: cd my-react-app
2. Start the development server: npm start

Your browser will open automatically, displaying your React application. (Image of the running app would go here)