React JS Complete Guide: Components, JSX, Props, State, Hooks and More

React JS is one of the most widely used JavaScript libraries for building interactive user interfaces. From small reusable website components to complex dashboards and single-page applications, React helps developers organise the interface into manageable pieces and update the screen when data changes.

If you are beginning frontend development or already know HTML, CSS and JavaScript, learning React can help you build more structured and maintainable web applications. This guide explains the important React concepts in a practical learning order, with small code examples and advice for building real projects.

What Is React JS?

React is an open-source JavaScript library for building user interfaces. It encourages developers to create interfaces from independent, reusable components. Each component can receive data, manage its own state and return the UI that should appear on the screen.

React is commonly used for single-page applications (SPAs), dashboards, e-commerce interfaces, learning platforms, admin panels and many other web experiences. React focuses on the user interface; routing, data fetching and other application needs are usually handled with additional libraries or browser APIs.

Why Do Developers Use React?

• Reusable components

  Build a button, navbar, card or form once and use it in multiple places.

• Declarative UI

  Describe what the interface should look like for the current data, rather than manually changing every DOM element.

• State-driven updates

  When state changes, React updates the parts of the interface that depend on it.

• Large ecosystem

  A broad collection of tools supports routing, forms, testing, styling and data management.

• Maintainable structure

  Components help teams divide an interface into smaller units that are easier to understand and test.

• Flexible adoption

  React can be introduced into an existing project or used as the foundation for a new application.

How to Set Up a React Project

A common way to start a modern client-side React project is with Vite. You need Node.js and npm installed on your computer. Open a terminal and run:

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

Vite displays a local development URL in the terminal. Open that address in your browser to view the starter application. If you prefer TypeScript, Vite also provides a React TypeScript template; see React with TypeScript.

Typical project structure

my-react-app/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── pages/
│   ├── App.jsx
│   └── main.jsx
├── index.html
└── package.json

This is an example structure, not a strict React rule. For a small project, fewer folders may be enough. As the application grows, grouping files by feature can make the codebase easier to navigate.

Understanding JSX

JSX is a syntax extension commonly used with React. It lets you write markup-like expressions inside JavaScript. JSX is transformed into JavaScript by the build tools before the browser runs the application.

function Welcome() {
  const name = "Anjali";
  return (
    <section>
      <h1>Welcome, {name}!</h1>
      <p>Start building with React.</p>
    </section>
  );
}
export default Welcome;

Notice that JavaScript expressions are placed inside curly braces. JSX also uses some different attribute names, for example className instead of HTML’s class, and htmlFor instead of for.

React Components

Components are the building blocks of a React application. A component is usually a JavaScript function that returns JSX. Component names must begin with a capital letter so React can distinguish them from built-in HTML tags.

function Header() {
  return <header>CodeWord Blog</header>;
}
function App() {
  return (
    <main>
      <Header />
      <h1>Learn React JS</h1>
    </main>
  );
}

Common examples include Navbar, Sidebar, ProductCard, LoginForm and Footer. Keep components focused: a component should ideally have one clear responsibility. The official guide to describing the UI goes deeper.

Props: Passing Data Between Components

Props (short for properties) allow a parent component to pass information to a child component. Props are read-only from the receiving component’s perspective. See passing props to a component.

function StudentCard({ name, course }) {
  return (
    <article>
      <h2>{name}</h2>
      <p>Course: {course}</p>
    </article>
  );
}
function App() {
  return (
    <StudentCard name="Riya" course="BCA" />
  );
}

Use props when a component needs information from its parent. If a child needs to communicate an event upward, the parent can pass a callback function as a prop.

State: Making Components Interactive

State is data that a component remembers between renders. When state is updated using the appropriate React setter, React schedules a re-render so the interface can reflect the new value. The useState reference covers every detail.

import { useState } from "react";
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
}

Do not change state variables directly. Use the setter function, and when the next value depends on the previous value, prefer the functional update form:

setCount(previousCount => previousCount + 1);

For objects and arrays, create updated copies rather than mutating the existing state value. See updating objects and arrays in state.

Handling Events in React

React event handlers let you respond to user actions such as clicks, typing, form submission and keyboard input. Event names use camelCase, and you pass a function rather than calling it immediately. Read more in responding to events.

function SaveButton() {
  function handleSave() {
    alert("Your changes have been saved.");
  }
  return (
    <button onClick={handleSave}>
      Save
    </button>
  );
}

For an event that needs data, you can use an arrow function to pass arguments. Keep event logic readable and move complex operations into named functions.

Conditional Rendering, Lists and Keys

Conditional rendering

Use normal JavaScript conditions to show different UI states. For example, a dashboard may show a loading message before data arrives and an error message if a request fails. See conditional rendering.

{isLoading ? (
  <p>Loading...</p>
) : (
  <p>Welcome back!</p>
)}

Rendering lists

The map() method is commonly used to render arrays of data into components.

const topics = ["JSX", "Props", "State"];
function TopicList() {
  return (
    <ul>
      {topics.map(topic => (
        <li key={topic}>{topic}</li>
      ))}
    </ul>
  );
}

Each item in a rendered list needs a stable, unique key among its siblings. Prefer a real identifier from your data. Avoid using array indexes as keys when items can be reordered, inserted or removed. The guide to rendering lists explains why.

Forms and Controlled Inputs

Forms are essential for login pages, registrations, search, feedback and data entry. A controlled input receives its value from React state and updates that state through an event handler.

import { useState } from "react";
function NameForm() {
  const [name, setName] = useState("");
  function handleSubmit(event) {
    event.preventDefault();
    alert(`Hello, ${name}`);
  }
  return (
    <form onSubmit={handleSubmit}>
      <input
        value={name}
        onChange={event => setName(event.target.value)}
        placeholder="Enter your name"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

For real applications, also validate user input, show helpful error messages, label fields accessibly and handle loading or submission states. Never rely only on frontend validation for security; validate important data on the server too.

Important React Hooks Every Developer Should Know

Hooks are functions that let function components use React features such as state, effects and context. Call Hooks at the top level of a React function component or custom Hook, not inside loops, conditions or nested functions.

useState

Stores component state, such as a counter, selected tab, form field or menu visibility.

const [isOpen, setIsOpen] = useState(false);

useEffect

Synchronises a component with an external system, such as a network connection, browser API or subscription. Effects are not needed for every calculation or for values that can be derived during rendering; read You Might Not Need an Effect and useEffect.

import { useEffect, useState } from "react";
function Users() {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    fetch("/api/users")
      .then(response => {
        if (!response.ok) throw new Error("Request failed");
        return response.json();
      })
      .then(data => setUsers(data))
      .catch(error => console.error(error));
  }, []);
  return <p>Users loaded: {users.length}</p>;
}

In production, handle loading, error, cancellation or stale requests as appropriate. The dependency array must include the reactive values used by the effect. An empty array means the effect does not re-run because of changing component props or state, though development Strict Mode may run an additional setup-and-cleanup cycle.

useRef

Stores a value that does not trigger a re-render when it changes, and can reference a DOM element, for example to focus an input. See useRef.

const inputRef = useRef(null);
// Later: inputRef.current?.focus();

useContext

Reads a value from a context provider. It can help share information such as the current theme or authenticated user across a component tree without passing props through every level. See useContext.

useMemo and useCallback

These Hooks can help avoid repeated calculations or preserve function identity in specific performance-sensitive situations. They are optimisation tools, not default requirements for every component. Reference: useMemo, useCallback.

useReducer

Manages more structured state transitions using a reducer function and dispatched actions. It can be useful when several related updates belong to one state model. See useReducer.

Routing: Building Multiple Pages

React itself does not include a built-in router. A routing library such as React Router can map URLs to page components, support nested layouts, route parameters and navigation without requiring a full page reload for every transition.

A typical application might have routes for Home, About, Courses, Login and Student Dashboard. Protecting private pages also requires proper authentication and authorisation checks on the backend; hiding a frontend route alone is not security.

Connecting React to APIs and Backend Services

Most practical React applications communicate with a backend to load or save data. You can use the browser’s fetch() API or a library such as Axios to make HTTP requests.

async function loadCourses() {
  const response = await fetch("/api/courses");
  if (!response.ok) {
    throw new Error("Could not load courses");
  }
  return response.json();
}

Keep API logic organised, check response status codes, handle network errors and display loading and error states. Do not place secret API keys or database credentials in frontend code: anything shipped to the browser can be inspected by users. Building the backend? See our database articles and cyber security guides.

Sharing State Across Components

Start with local component state when only one component needs the value. If multiple nearby components need it, move the state to their closest common parent and pass values and callbacks through props. This is called lifting state up.

For values needed across distant parts of the component tree, Context can reduce repetitive prop passing. Larger applications may benefit from a dedicated state-management library, but choose one based on actual complexity rather than adding it automatically.

React Performance and Optimisation

Good performance begins with a clear component structure and sensible data flow. Before adding optimisation, identify what is actually slow using browser developer tools and React Developer Tools.

• Keep state close to the components that use it.
• Use stable keys when rendering lists.
• Avoid unnecessary effects and duplicated state.
• Split large pages or routes when it improves loading behaviour.
• Use memoisation tools such as memo only when they solve a measured or understood performance issue.
• Optimise images, fonts and network requests as well as JavaScript rendering.
• Use production builds for realistic performance checks.

Testing and Debugging React Applications

Testing helps confirm that components behave correctly as the application changes. Common approaches include unit tests for individual functions, component tests for user interactions and end-to-end tests for complete workflows.

• React Developer Tools

  Inspect component trees, props and state.

• Browser DevTools

  Debug JavaScript, inspect network requests and review console errors.

• Component testing

  Test what users can see and do, such as submitting a form or opening a menu, for example with React Testing Library.

• End-to-end testing

  Verify important journeys such as registration, login and checkout.

React Best Practices for Real Projects

• Use reusable components with clear responsibilities.
• Keep component names descriptive and use consistent file naming.
• Use props for input data and state for changing data owned by a component.
• Never mutate React state directly.
• Use stable keys for rendered lists.
• Keep API calls and shared utilities organised.
• Handle loading, empty, success and error states.
• Build accessible interfaces with semantic HTML, labels and keyboard support; the W3C accessibility intro is a good start.
• Keep secrets on the server and validate untrusted input on the backend.
• Use Git and test important user flows before deployment.

Beginner-Friendly React Project Ideas

• To-do application

  Practise components, state, events and list rendering.

• Weather dashboard

  Practise API requests, loading states and error handling.

• Student management dashboard

  Practise forms, tables, search, filters and routing.

• Product catalogue

  Practise reusable cards, props, category filters and cart state.

• Blog interface

  Practise page layouts, routing, dynamic content and reusable article cards.

Start with a small working version, then add features one at a time. This approach helps you understand each concept instead of copying a large project without knowing how its parts work. Need inspiration? Browse more web development articles.

A Practical Roadmap to Learn React JS

1. Strengthen JavaScript

   Understand variables, functions, arrays, objects, modules, promises, async/await and array methods.

2. Learn JSX and components

   Build a page from small reusable UI pieces.

3. Practise props and state

   Pass data and create interactive components.

4. Learn Hooks

   Start with useState and useEffect, then explore useRef, useContext and other Hooks.

5. Build forms and API features

   Practise validation, network requests and error handling.

6. Add routing

   Create multiple pages and shared layouts.

7. Build and deploy a project

   Use Git, test the main workflows and publish a production build.

Frequently Asked Questions About React

Conclusion: Build Strong Foundations with React

React JS makes it possible to build interactive web interfaces using reusable components and state-driven rendering. The most important concepts to understand are JSX, components, props, state, events, lists, forms and Hooks. Routing, API integration, testing and performance practices help turn those fundamentals into complete applications.

You do not need to learn every library at once. Build small projects, read the official documentation, practise debugging and gradually take on more complex features. Consistent hands-on practice is the best way to become confident with React development.