Getting Started with React.js

React is a JavaScript library for building user interfaces from small, reusable pieces called components. Instead of manually updating the page when data changes, you describe what the UI should look like for a given state, and React updates the page for you.

This guide covers the core ideas you need to build your first React app.

Before you start

You should be comfortable with basic HTML, CSS, and modern JavaScript, including arrow functions, const and let, destructuring, array methods like map and filter, and modules (import and export).

You also need Node.js installed, which includes npm.

Creating a project

The React documentation recommends starting new production apps with a framework such as Next.js or React Router. For learning React itself, a lightweight build tool like Vite is a simple choice:

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

Open the local URL that appears in the terminal. Create React App, which many older tutorials use, has been deprecated, so prefer Vite or a framework for new projects.

JSX: HTML-like syntax in JavaScript

React components return JSX, a syntax that looks like HTML but lives inside JavaScript:

function Greeting() {
  const name = "Asha";
  return <h1>Hello, {name}!</h1>;
}

A few differences from HTML:

• Use curly braces {} to insert JavaScript expressions.
• Use className instead of class, and htmlFor instead of for.
• Every tag must be closed, including <img /> and <input />.
• A component returns a single root element; use a fragment (<>...</>) to group elements without adding extra markup.

Components

A component is a JavaScript function that returns JSX. Component names start with a capital letter:

function Avatar() {
  return <img src="/avatar.png" alt="Profile photo" width={64} height={64} />;
}

export default function ProfileCard() {
  return (
    <section>
      <Avatar />
      <h2>Asha Rao</h2>
    </section>
  );
}

You build an app by combining components, like nesting HTML elements.

Props: passing data to components

Props let a parent pass data to a child. They work like function arguments:

function ProfileCard({ name, role }) {
  return (
    <section>
      <h2>{name}</h2>
      <p>{role}</p>
    </section>
  );
}

export default function App() {
  return (
    <>
      <ProfileCard name="Asha Rao" role="Designer" />
      <ProfileCard name="Ravi Kumar" role="Developer" />
    </>
  );
}

Props are read-only. A component should never change its own props.

State: data that changes

State is data a component remembers between renders, such as the value of an input or whether a menu is open. The useState hook creates a state variable and a function to update it:

import { useState } from "react";

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

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

When you call setCount, React re-renders the component with the new value. Never change state directly (count = 5); always use the setter function.

If the new value depends on the previous one, pass a function to the setter:

setCount((previous) => previous + 1);

Handling events

Event handlers are passed as props such as onClick, onChange, and onSubmit. Pass the function itself, not the result of calling it:

// Correct: React calls handleClick when the button is clicked
<button onClick={handleClick}>Save</button>

// Wrong: handleClick() runs immediately during render
<button onClick={handleClick()}>Save</button>

A controlled input keeps its value in state:

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

  function handleSubmit(event) {
    event.preventDefault();
    alert(`Hello, ${name}`);
  }

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

Conditional rendering

Use normal JavaScript to decide what to show:

function Status({ isOnline }) {
  return <p>{isOnline ? "Online" : "Offline"}</p>;
}

function Notifications({ count }) {
  return <div>{count > 0 && <span>{count} new</span>}</div>;
}

Be careful with && and numbers: {count && <span />} renders 0 when count is zero. Compare explicitly, as above.

Rendering lists

Use map to turn an array into elements. Each item needs a stable, unique key so React can track it between renders:

const tasks = [
  { id: 1, title: "Design homepage" },
  { id: 2, title: "Build contact form" },
];

function TaskList() {
  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>{task.title}</li>
      ))}
    </ul>
  );
}

Use an ID from your data as the key. Array indexes can cause bugs when items are added, removed, or reordered.

Thinking in React

The React documentation suggests a useful approach for building a new screen:

1. Break the UI into a component hierarchy.
2. Build a static version with props only.
3. Find the minimal state the UI needs.
4. Decide which component should own each piece of state.
5. Pass data down with props and changes up with callback functions.

Where to go next

Once these basics feel comfortable, learn about useEffect for synchronizing with external systems, fetching data, styling options, and routing. The official react.dev tutorial is the best next step.

Key takeaways

• React builds UIs from components, which are functions that return JSX.
• Props pass data down; state holds data that changes.
• Update state with its setter, and React re-renders the UI.
• Use stable keys when rendering lists.
• Start learning with Vite, and use a framework like Next.js for production apps.

Conclusion

React's core ideas, components, props, and state, are small but powerful. Build a few small projects, such as a to-do list or a weather card, to make them feel natural before moving on to routing and data fetching.