What is React?

React is a JavaScript library for building user interfaces. Created and maintained by Meta and a large open-source community, it lets you build a page out of small, reusable pieces called components and keeps the screen in sync with your data automatically. Instead of manually updating the page every time something changes, you describe what the UI should look like for a given state, and React figures out how to update the page efficiently.

Components: the building blocks

In React you build interfaces from components — self-contained functions that return a piece of UI. Modern React uses function components:

// A component is just a function that returns markup (JSX).
// Component names start with a capital letter.
function Welcome() {
  return <h1>Welcome to Infoplanet</h1>;
}

That HTML-like syntax inside JavaScript is called JSX. It is not HTML — it compiles down to JavaScript — but it reads naturally and lets you keep markup and logic together.

You assemble bigger interfaces by nesting components:

function App() {
  return (
    <div>
      <Welcome />
      <p>Start learning web development today.</p>
    </div>
  );
}

Props: passing data into components

Props (short for "properties") let a parent component pass data down to a child, making components reusable:

// This component accepts a "name" prop and uses it
function Greeting({ name }) {
  return <h2>Hello, {name}!</h2>;
}

// Use it with different data — same component, different output
function Page() {
  return (
    <>
      <Greeting name="Asha" />
      <Greeting name="Rohan" />
    </>
  );
}

Props flow one way: from parent to child. A component never changes its own props.

State and hooks: data that changes

When a component needs to remember and update data — a counter, a form value, whether a menu is open — it uses state. State is managed with hooks, special functions that start with use. The most common is useState:

import { useState } from "react";

function Counter() {
  // count is the current value; setCount updates it.
  // 0 is the starting value.
  const [count, setCount] = useState(0);

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

When you call setCount, React re-runs the component and updates only the part of the screen that changed. You never touch the DOM directly — React does it for you.

Note: Modern React (React 19 and the versions before it) is built around function components and hooks. Older tutorials show "class components" with lifecycle methods — you don't need them to start, and the current recommended style is functions plus hooks.

Why use React at all?

For a small page, plain JavaScript is fine. React earns its keep when an interface grows complex: many moving parts, shared data, and frequent updates. Its component model keeps large applications organised, and its automatic re-rendering removes a whole class of manual DOM-updating bugs. React is one of the most widely used front-end libraries today, which is why it appears so often in modern web work.

Common mistakes

• Trying to learn React before JavaScript. React is JavaScript. Get comfortable with JavaScript basics and functions first.
• Mutating state directly. Don't write count = count + 1. Always use the setter function (setCount) so React knows to re-render.
• Lowercase component names. React treats lowercase tags as plain HTML elements. Component names must start with a capital letter.
• Confusing JSX with HTML. JSX looks similar but has differences (className instead of class, for example) because it is JavaScript.
• Reaching for class components. The modern approach is function components with hooks. New learners should start there.

FAQ

Is React a framework or a library? React calls itself a library focused on the user interface. Frameworks like Next.js build on top of it to add routing, data fetching, and more.

Do I need React to build websites? No. Many excellent sites use plain HTML, CSS, and JavaScript. React is a tool for building larger, interactive applications — reach for it when complexity warrants it.

Keep learning

• Hub: Web Fundamentals
• Foundation: JavaScript Basics for Beginners
• Related: The DOM Explained
• Plan your path: Web Development Roadmap 2026

Want to build for the web? Explore our courses in Jalgaon.