ReactJS Environment Setup

🛠️ ReactJS Environment Setup

---

🎯 Objective:

To set up a ReactJS development environment so you can build, run, and test React applications on your local system.

---

✅ Step 1: Prerequisites

Before installing React, you need the following software installed:

🔹 1. Node.js

• React uses Node.js for running scripts and installing packages using npm (Node Package Manager).
• It also includes npm, which is required to install React packages.

🔧 Install Node.js:

• Visit: https://nodejs.org/
• Download LTS version (Long Term Support).
• Install using the wizard.

🔍 Check Installation:

node -v   # Shows Node.js version
npm -v    # Shows npm version

---

✅ Step 2: Install Create React App

Create React App is a tool that sets up a new React project with a ready-to-use development environment.

📥 Install it (one-time globally):

npm install -g create-react-app

✅ This command installs a global utility to quickly scaffold new React projects.

---

✅ Step 3: Create a New React Project

Now, let’s create a React app called myapp.

npx create-react-app myapp

🔹 This command:

• Sets up the project structure
• Installs all required dependencies
• Adds React boilerplate code

✅ npx (comes with npm) ensures you’re using the latest version of create-react-app without installing it globally.

---

✅ Step 4: Navigate to Project Directory

cd myapp

This is now your project root folder, where all React files reside.

---

✅ Step 5: Start the Development Server

To start the app:

npm start

🎉 This will:

• Compile the code
• Open your app in the browser (usually at http://localhost:3000)
• Show a default React welcome page

---

✅ React Folder Structure Overview

myapp/
├── public/
│   └── index.html     # Single root HTML page
│
├── src/
│   ├── App.js         # Main App Component
│   ├── index.js       # Renders App component to DOM
│   └── components/    # (You create this folder for reusable components)
│
├── package.json       # Project configuration and dependencies
├── node_modules/      # All installed libraries

---

📦 package.json – React App Configuration

This file stores:

• Project name and version
• Installed dependencies (React, React DOM)
• Scripts like start, build, and test

🔧 Important Commands:

Command	Purpose
npm start	Run development server
npm run build	Prepare production build
npm test	Run tests (if written)
npm install <pkg>	Install new packages (like Bootstrap, Axios)

---

🧪 Optional Tools to Enhance Workflow

Tool	Purpose
VS Code	Recommended code editor
React Developer Tools (Chrome/Firefox)	Inspect components in browser
Git	Version control (for teamwork)
Postman	Test APIs (for React-API apps)

---

✅ Recap of Setup Steps

Step	Action
1️⃣	Install Node.js + npm
2️⃣	Use npx create-react-app myapp
3️⃣	Navigate to project folder
4️⃣	Run npm start to launch dev server
5️⃣	Build components and start coding!

---

🔰 Additional Tips for MCA Students

• Always create reusable components (Header, Footer, etc.).
• Practice passing props and managing state.
• Learn React Router for building multipage apps.
• Explore Hooks (useState, useEffect) for functional components.
• Use Bootstrap or Material UI for designing UI quickly.