Getting Started

React Introduction

Learn what React is, why it was created, and how it powers modern web applications.

What is React?

React is a JavaScript library for building user interfaces. It was created by Facebook and is now maintained by Meta and an open-source community.

React makes it easy to build interactive UIs by breaking them into small, reusable pieces called components.

Why React?

Component-based: Build encapsulated components that manage their own state
Declarative: Describe what your UI should look like, React handles the updates
Learn Once, Write Anywhere: Use React for web, mobile (React Native), and more
Huge Ecosystem: Rich ecosystem of libraries and tools

How React Works

React uses a Virtual DOM — a lightweight copy of the real DOM. When data changes, React updates the Virtual DOM first, calculates the minimal changes needed, then updates only those parts of the real DOM.

This makes React apps very fast and efficient.

Example

jsx

// A simple React component
function Welcome({ name }) {
  return <h1 style={{ color: '#2563eb', marginBottom: '8px' }}>Hello, {name}!</h1>;
}

// App is the root component — it gets rendered automatically
function App() {
  return (
    <div style={{ fontFamily: 'sans-serif', padding: '1rem' }}>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
      <Welcome name="Charlie" />
      <p style={{ color: '#6b7280', marginTop: '1rem' }}>React renders each component independently!</p>
    </div>
  );
}

Try it yourself — JSX