React Getting Started

React Getting Started

React is one of the most popular JavaScript libraries for building fast, interactive user interfaces. If you are completely new to React, this guide will walk you through everything from setup to your first working React app, step by step.

Step 1: Prerequisites (Before Learning React)

Before starting React, make sure you understand:

Basic HTML
Basic CSS
Fundamental JavaScript (ES6+)
- let / const
- Arrow functions
- Arrays & objects
- Destructuring

React becomes much easier once JavaScript basics are clear.

Step 2: Install Node.js and npm

React requires Node.js to run development tools.

Download Node.js from the official website
Install the LTS version (recommended)

To verify installation:

If both commands return versions, Node.js is installed correctly.

Step 3: Create Your First React App

The easiest way to start is using Create React App (CRA).

Create a React project

Go to project folder

Start development server

Your React app will open at:

Step 4: Understanding Project Structure

Important files inside your React project:

Key Files Explained

index.js → Entry point of React app
App.js → Main component
App.css → Styling file
public/index.html → Root HTML file

Step 5: Your First React Component

React apps are built using components.

Functional Component Example

Step 6: Understanding JSX

JSX lets you write HTML inside JavaScript.

Example:

Looks like HTML
Compiled into JavaScript
Makes UI easier to read

Step 7: Using Props in React

Props are used to pass data from parent to child components.

Example

Props are read-only
Used for reusable components

Step 8: Using State in React

State stores dynamic data that changes over time.

useState Hook Example

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </>
  );
}

import { useState } from "react";

function Counter() {

const [count, setCount] = useState(0);

return (

<p>Count: {count}</p>

<button onClick={() => setCount(count + 1)}>

Increase

</button>

</>

);

}

State updates automatically re-render UI
Hooks work only inside functional components

Step 9: Handling Events

React events are written in camelCase.

Example:

Step 10: Conditional Rendering

Render content based on conditions.

Step 11: Lists and Keys

Rendering lists using .map():

key helps React identify elements efficiently

Step 12: Styling in React

CSS File

Inline Styling

Step 13: Build React App for Production

Create optimized production build:

Minified code
Faster performance
Ready for deployment

Step 14: What to Learn Next?

After getting started, learn:

React Hooks (useEffect, useContext)
React Router
API integration
State management (Redux / Context API)
Next.js for SEO

Common Beginner Mistakes

Modifying state directly
Forgetting key in lists
Mixing too much logic in one component
Not understanding JavaScript basics

Summary

Install Node.js
Create React app
Learn JSX, components, props & state
Handle events & lists
Build and deploy your app

React is beginner-friendly, powerful, and widely used in modern web development. Starting with small steps and consistent practice is the key to mastering React.

React Getting Started