React Tutorial

What is React? #

React is a free and open-source front-end JavaScript library for building user interfaces. It is maintained by Meta (formerly Facebook) and a community of individual developers and companies. React can be used to develop single-page, mobile, or server-rendered applications.

How Does React Work? #

React creates a Virtual DOM in memory — a lightweight copy of the real browser DOM. Instead of updating the actual DOM directly on every change (which is slow), React:

1. Re-renders the component in the Virtual DOM (fast, in memory)
2. Diffs the new Virtual DOM against the previous snapshot
3. Applies only the minimal set of changes to the real DOM (reconciliation)

Why Use React? #

• Component-based: Build encapsulated components that manage their own state
• Declarative: Describe what you want the UI to look like — React figures out how
• Learn once, write anywhere: React Native lets you build mobile apps with the same skills
• Massive ecosystem: Thousands of libraries, tools, and a huge community
• Used at scale: Powers Facebook, Instagram, Netflix, Airbnb, Discord, and thousands more

A Simple React Component #

function Welcome({ name }) {
  return (
    <div className="card">
      <h1>Hello, {name}!</h1>
      <p>Welcome to React.</p>
    </div>
  );
}

// Render it into the page
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Welcome name="World" />);

React Version History #