What You’ll Learn

This page is a self-contained introduction to React—a JavaScript library for building interactive user interfaces. You will understand what React is, how components and JSX work, and why teams choose React for modern front-end apps.

🤔 What is React?

React is a declarative, efficient, and flexible front-end JavaScript library for creating user interfaces using UI components. Instead of manually updating the DOM every time data changes, you describe what the UI should look like—React figures out the minimal updates needed.

React powers single-page applications, dashboards, mobile apps (via React Native), and static sites. Companies such as Meta, Netflix, Airbnb, and Discord use React in production.

🧩 What Are React Components?

React components are small, isolated pieces of code that help you compose complex UIs from simple building blocks. A component is usually a JavaScript function that returns JSX describing what to render.

For example, if you build a Button component once, you can reuse it anywhere in your project to generate a button without rewriting the same markup and styles each time. Nest components inside one another to build pages: App → Header → NavItem.

function Button({ label }) {
  return <button type="button">{label}</button>;
}

// Reuse anywhere:
// <Button label="Save" />
// <Button label="Cancel" />

🤷 Why React?

Many JavaScript tools exist for front-end work—Angular, Vue, Svelte, jQuery, and plain DOM APIs. So why choose React?

React is a library (not a full framework) focused on the view layer. It promotes reusable UI components that display data that changes over time. When user input or server data updates, React re-renders only what changed—keeping apps fast and predictable.

• Component model — break UIs into manageable, testable pieces
• Declarative code — describe the UI for each state, not every DOM step
• Large ecosystem — routing, state, UI kits, and meta-frameworks like Next.js
• Strong hiring demand — one of the most requested front-end skills
• React Native — reuse concepts for iOS and Android mobile apps

📖 About React

React is a free and open-source front-end JavaScript library developed by Meta and the open-source community under the MIT License.

Jordan Walke is recognized as the original author of React. It was first deployed on Facebook’s news feed in 2011 and open-sourced at JSConf US in 2013. Today React follows semantic versioning with frequent improvements to hooks, server components, and developer tooling.

Table of Content

Have a quick look at React at a glance:

📝 JSX Explained

JSX (JavaScript XML) lets you write HTML-like tags inside JavaScript. It is not required, but almost every React project uses it because it keeps structure readable.

const element = <h1>Hello, {name}!</h1>;

// JSX compiles to:
// React.createElement('h1', null, 'Hello, ', name, '!');

• Use curly braces {expression} to embed JavaScript values
• Return one parent element, or use a <>fragment</>
• Use className instead of class for CSS classes
• Close all tags—including <img /> and <br />

⚙️ Virtual DOM

The browser DOM is slow to change when you touch many nodes. React keeps a lightweight virtual DOM tree in memory—a JavaScript representation of your UI.

When state or props change, React builds a new virtual tree, compares (diffs) it with the previous one, and updates only the real DOM nodes that actually changed. That batching keeps interfaces responsive even with frequent data updates.

🏁 Getting Started with React

Create a project with Vite (recommended)

For real apps, use a build tool. Vite is fast and widely used in 2026:

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

VITE v5.x  ready in 400 ms
➜  Local:   http://localhost:5173/
➜  App hot-reloads when you edit src/App.jsx

Try React in the browser (CDN)

For quick experiments without installing Node.js, load React from a CDN:

<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<h1>Hello, React!</h1>);
</script>

👍 Advantages of Using React

The following are some of the most significant advantages of using React in your project:

1. UI-focused design — React lets you create component-driven, user-interface-centric applications
2. Easier JavaScript UI code — JSX and components reduce repetitive DOM manipulation
3. SEO-friendly options — server rendering (Next.js) delivers HTML search engines can crawl
4. Handles dependencies — one-way data flow makes state changes easier to trace
5. Excellent developer tools — React DevTools inspect component trees and props
6. Easy to adopt incrementally — add React to one page or widget in an existing site
7. Cross-platform — React Native shares concepts for iOS and Android
8. Strong community — tutorials, libraries, and hiring pool are enormous

👎 Disadvantages and Considerations

React is powerful, but weigh these trade-offs before adopting it everywhere:

1. Tooling required — JSX and modern syntax need a bundler (Vite, webpack) for production apps
2. Fast-moving ecosystem — patterns and libraries evolve; staying current takes effort
3. Not a full framework — you choose routing, data fetching, and state libraries yourself
4. Bundle size — React adds JavaScript compared to plain HTML pages
5. Learning curve — hooks, context, and performance patterns take practice

🧰 Core Building Blocks

Examples Gallery

Five starter demos. Use View Output to preview here, or open Try It Yourself to edit and run React in the browser editor (CDN + Babel).

<div id="root"></div>
<script type="text/babel">
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<h1>Hello, React!</h1>);
</script>

function Greeting() {
  return (
    <div>
      <h1>Welcome to React</h1>
      <p>Components are reusable pieces of UI.</p>
    </div>
  );
}

root.render(<Greeting />);

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

function App() {
  return (
    <div>
      <Welcome name="Alex" />
      <Welcome name="Sam" />
    </div>
  );
}

const { useState } = React;

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

  return (
    <div>
      <p>Count: {count}</p>
      <button type="button" onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

function TodoList() {
  const tasks = ['Learn JSX', 'Build a component', 'Add state'];

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

📚 Why Learn React?

• Industry standard — thousands of companies hire React developers
• Component thinking — skills transfer to Vue, Svelte, and design systems
• Rich ecosystem — Next.js, React Router, TanStack Query, and UI libraries
• Mobile path — React Native uses the same mental model
• Portfolio projects — build todo apps, dashboards, and SPAs employers recognize

Summary

• React is a declarative JavaScript library for building user interfaces with components.
• Components are reusable functions that return JSX; props pass data in, state tracks changes.
• React uses a virtual DOM to update the browser efficiently when data changes.
• Created by Jordan Walke at Meta; open source under the MIT License.
• Start with Vite for projects, or the CDN for quick browser experiments.
• React really shines when your data changes over time—forms, feeds, dashboards, and live apps.

💡 Best Practices