Learn React

What Is React?

React is a declarative, component-based JavaScript library maintained by Meta and a large open-source community. Instead of manually updating the DOM every time your data changes, you describe what the UI should look like for a given state, and React figures out the most efficient way to update the screen.

React is used to build everything from small widgets embedded in a page to entire single-page applications and mobile apps (via React Native). Because it only handles the view layer, React pairs well with routers, state managers, and data-fetching libraries of your choice.

Why Developers Choose React

React's popularity comes from a handful of core ideas that make large applications easier to reason about: components, declarative rendering, and a one-way data flow. These ideas reduce bugs and make code easier to test and reuse.

• Component-based: UIs are built from small, self-contained pieces that manage their own markup and logic.
• Declarative: you describe the desired result, not the step-by-step DOM instructions to get there.
• Virtual DOM: React keeps a lightweight in-memory representation of the UI and only updates the real DOM where necessary.
• Unidirectional data flow: data moves from parent to child through props, making state changes predictable.
• Huge ecosystem: routing, forms, animation, and state-management libraries all build on top of React.
• Learn once, write anywhere: the same component model powers web apps and native mobile apps.

Function Components

Modern React is written almost entirely with function components. A function component is just a JavaScript function that returns markup describing what should appear on the screen. Combined with Hooks, function components can hold state, run side effects, and respond to events without ever needing a class.

function Welcome() {
  return <h1>Hello, React!</h1>;
}

export default Welcome;

A Small Real-World Example

Components can accept input, called props, and combine with other components to build richer UI, such as a simple product card.

function ProductCard({ name, price }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>${price.toFixed(2)}</p>
    </div>
  );
}

function App() {
  return <ProductCard name="Wireless Mouse" price={19.99} />;
}

export default App;

In the next lessons you'll set up a React project, learn JSX syntax in depth, and start composing components together.