React Tutorial

React tutorial for building component-based user interfaces

React is a JavaScript library for building user interfaces with reusable components. It is commonly used for single-page applications, dashboards, forms, product pages, admin panels, and interactive parts of larger websites.

React is maintained by Meta and the React open-source community. In everyday usage, the terms React, ReactJS, and React.js usually refer to the same library. This React tutorial starts with the core ideas, then moves through JSX, components, props, state, events, lists, forms, hooks, routing, and project practice.

React does not provide every feature of a complete application framework by itself. It focuses mainly on the view layer: how data is converted into UI. For routing, data fetching, build tooling, testing, and server rendering, React is usually combined with tools such as Vite, React Router, Testing Library, or a React framework such as Next.js.

Helpful references while learning include the official React tutorial and the MDN guide to getting started with React.

---

What React is used for in modern web development

React is useful when a page has many small UI parts that change over time. Instead of manually updating the DOM after every action, you describe the UI for each state, and React updates the screen when the data changes.

• Interactive forms: login forms, checkout flows, profile editors, and validation screens.
• Dashboards: charts, filters, tables, notifications, and real-time status panels.
• Content-heavy interfaces: search pages, tabs, accordions, menus, and pagination.
• Reusable design systems: buttons, cards, modals, layouts, and shared application components.
• Single-page applications: applications where routing and screen updates happen mostly in the browser.

---

Core React features to understand first

• Component-based architecture: A React app is built from small components that can be reused and combined.
• JSX: JSX lets you write UI markup inside JavaScript, making component structure easier to read.
• Props: Props pass data from a parent component to a child component.
• State: State stores data that can change while the user interacts with the page.
• Declarative rendering: You describe what the UI should look like for a given state, and React handles updates.
• Hooks: Hooks such as useState and useEffect let function components use state and side effects.
• Unidirectional data flow: Data normally moves from parent components down to child components, which makes UI behavior easier to trace.

---

Skills to know before starting this ReactJS tutorial

You do not need to be an advanced JavaScript developer before learning React, but the basics of HTML, CSS, and JavaScript should be clear. React becomes much easier when you already understand how web pages are structured, styled, and updated.

1 HTML knowledge needed for React components

• HTML elements, attributes, forms, buttons, inputs, lists, and links.
• Semantic HTML such as header, main, section, nav, and footer.
• How browser events such as clicks, input changes, and form submissions work.

2 CSS knowledge needed for React layouts

• Selectors, classes, colors, spacing, borders, and typography.
• The box model, Flexbox, Grid, and responsive layout basics.
• How to organize styles using normal CSS files, CSS Modules, utility classes, or component-level styling.

3 JavaScript knowledge needed for React state and props

• Variables, functions, arrays, objects, loops, and conditionals.
• Modern JavaScript features such as arrow functions, destructuring, spread syntax, template literals, and modules.
• Array methods such as map(), filter(), and find(), because they are used often in React rendering.
• Basic asynchronous JavaScript using promises, async, and await.

4 Node.js and npm basics for running React locally

• Installing Node.js on your computer.
• Running terminal commands from a project folder.
• Installing packages with npm and starting a local development server.

---

Create and run a React app on your computer

A common beginner-friendly way to create a React project is to use Vite. It creates a modern development setup with a local server, fast refresh during editing, and a production build command.

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

After running the development command, the terminal shows a local URL. Open that URL in your browser to view the React app.

Local:   http://localhost:5173/

The exact port may be different if another application is already using port 5173.

Important files in a beginner React project

• package.json: stores scripts and project dependencies.
• src/main.jsx: starts the React app and renders the root component.
• src/App.jsx: usually contains the main application component in a starter project.
• src/App.css or src/index.css: contains the styles used by the app.
• index.html: contains the root HTML element where React attaches the app.

---

React component syntax with JSX

A React component is a JavaScript function that returns UI. In most modern React code, components are written as functions and named with a capital letter.

function WelcomeMessage() {
  return <h1>Welcome to React</h1>;
}

JSX looks similar to HTML, but it is JavaScript syntax. That is why there are small differences. For example, use className instead of class, and write JavaScript expressions inside curly braces.

function UserCard() {
  const name = "Asha";

  return (
    <div className="card">
      <h2>{name}</h2>
      <p>Learning React components</p>
    </div>
  );
}

JSX rules beginners should remember

• Return one parent element from a component, or use a fragment with <>...</>.
• Use className for CSS classes.
• Use htmlFor instead of for on label elements.
• Close all tags, including tags such as <img /> and <input />.
• Use curly braces to insert JavaScript values into JSX.

---

React props for passing data into components

Props are inputs passed to a component. They help you reuse the same component with different data.

function CourseCard({ title, level }) {
  return (
    <article>
      <h2>{title}</h2>
      <p>Level: {level}</p>
    </article>
  );
}

function App() {
  return (
    <main>
      <CourseCard title="React Tutorial" level="Beginner" />
      <CourseCard title="React Hooks" level="Intermediate" />
    </main>
  );
}

In this example, CourseCard is reused twice. The component structure stays the same, but the displayed data changes through props.

---

React state and event handling with useState

State is used when a value can change after the component appears on the screen. The useState hook is the usual starting point for learning React state.

import { useState } from "react";

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

  function increaseCount() {
    setCount(count + 1);
  }

  return (
    <section>
      <p>Count: {count}</p>
      <button onClick={increaseCount}>Increase</button>
    </section>
  );
}

export default Counter;

When the button is clicked, setCount updates the state. React then renders the component again with the new value.

React event names are camelCase

In HTML you may write onclick. In React JSX, event names use camelCase, such as onClick, onChange, onSubmit, and onMouseEnter.

---

Rendering React lists with keys

React apps often render arrays of data. Use map() to convert an array into JSX elements, and give each repeated element a stable key.

function TopicList() {
  const topics = [
    { id: 1, name: "JSX" },
    { id: 2, name: "Props" },
    { id: 3, name: "State" }
  ];

  return (
    <ul>
      {topics.map((topic) => (
        <li key={topic.id}>{topic.name}</li>
      ))}
    </ul>
  );
}

A key helps React identify which item changed, moved, or was removed. Prefer a stable ID from your data instead of the array index, especially when the list can be sorted, filtered, inserted into, or deleted from.

---

Handling forms in React with controlled inputs

In a controlled input, the form value is stored in React state. This makes it easier to validate, reset, submit, or conditionally display form data.

import { useState } from "react";

function NameForm() {
  const [name, setName] = useState("");

  function handleSubmit(event) {
    event.preventDefault();
    alert(`Submitted name: ${name}`);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name</label>
      <input
        id="name"
        value={name}
        onChange={(event) => setName(event.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

The input value comes from state, and every change updates that state through onChange. This pattern is common in search boxes, signup forms, filters, and settings pages.

---

Using useEffect for side effects in React

Rendering should calculate UI. Side effects are operations that happen outside rendering, such as fetching data, updating the document title, subscribing to a service, or working with browser APIs. The useEffect hook is commonly used for these tasks.

import { useEffect, useState } from "react";

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

  useEffect(() => {
    document.title = `Clicked ${count} times`;
  }, [count]);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

The dependency array [count] tells React to run the effect when count changes. When an effect subscribes to something, starts a timer, or attaches an event listener, return a cleanup function from the effect.

---

Recommended React learning path from beginner to project-ready

A good React learning path should move from small syntax examples to complete interfaces. Do not start with too many external libraries. First learn how components communicate, how state changes the UI, and how user events update data.

Phase 0: Set up React and understand the project structure

1. Install Node.js and npm.
2. Create a React app using Vite.
3. Start the development server and edit App.jsx.
4. Learn the role of main.jsx, App.jsx, CSS files, and package.json.

Phase 1: Learn React basics with JSX, components, props, and state

1. Write JSX and understand how it differs from HTML.
2. Create function components and export them.
3. Pass data with props.
4. Update values with useState.
5. Handle button clicks, input changes, and form submissions.
6. Render lists with map() and stable keys.

Phase 2: Practice React hooks and component communication

1. Use useEffect for side effects such as document title updates and data fetching.
2. Lift state up when two components need the same data.
3. Pass callback functions from parent components to child components.
4. Split large components into smaller components.
5. Create custom hooks only after repeated logic becomes clear.

Phase 3: Add routing, data fetching, and application structure

1. Use React Router for multiple screens in a client-side app.
2. Fetch data from an API and display loading and error states.
3. Organize folders for components, pages, hooks, services, and styles.
4. Use Context only for data that many components need, such as theme or signed-in user details.
5. Learn when a dedicated state library is useful and when local state is enough.

Phase 4: Improve React code quality with testing and TypeScript

1. Write component tests for user-visible behavior.
2. Test forms, buttons, loading states, and conditional rendering.
3. Use TypeScript with React to describe props, state, and event types.
4. Check accessibility basics such as labels, keyboard navigation, and meaningful button text.
5. Build production files and preview the app before deployment.

Phase 5: Build React projects that connect the concepts

1. Todo app: practice state, list rendering, filtering, and controlled inputs.
2. Quiz app: practice conditional rendering, scoring, component composition, and reset logic.
3. Weather app: practice API fetching, loading states, error messages, and reusable display components.
4. Blog UI: practice routing, layout components, reusable cards, and dynamic pages.
5. Dashboard: practice tables, filters, charts, forms, and shared state across components.

---

Common React beginner mistakes and how to avoid them

• Changing state directly: Do not mutate state values directly. Use the setter function returned by useState.
• Using array index as key everywhere: Index keys can cause confusing UI bugs when list order changes. Use a stable ID when possible.
• Putting too much code in one component: Break large UI sections into smaller components with clear responsibilities.
• Running effects without correct dependencies: Missing or unnecessary dependencies can cause stale values or repeated effect runs.
• Learning many libraries too early: First become comfortable with React components, props, state, events, and hooks.
• Ignoring accessibility: Use labels for inputs, meaningful button text, semantic HTML, and keyboard-friendly interactions.

---

React tutorial editorial QA checklist

• Does the React tutorial explain what React is before introducing tools and frameworks?
• Are JSX, components, props, state, events, lists, forms, and hooks covered with simple examples?
• Do command-line examples use npm commands that a beginner can run locally?
• Are React code blocks marked with the correct PrismJS language-javascript class?
• Does the roadmap separate core React concepts from ecosystem tools such as routing, testing, TypeScript, and frameworks?
• Are beginner mistakes specific to React behavior, such as state updates, keys, and effect dependencies?

---

React tutorial FAQs