Introduction to React

React is a JavaScript library for building user interfaces, created at Facebook (now Meta) and released in 2013. Instead of changing the page step by step, you describe what the interface should look like for the current data, and React updates the page to match.

Components

A React app is built from components: small, reusable pieces of interface, like Lego bricks. A component is a JavaScript function that returns what should appear on screen.

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>This heading and paragraph were drawn by a component.</p>
    </div>
  );
}

Press Run. CodeMIRAI renders the App component in the result frame below the code.

Why React?

• Components keep code organised: a Navbar, a ProductCard, a CartButton, each in its own place.
• Declarative: describe the result for the current data; React works out the changes to the page.
• State: when data changes, the parts of the page that depend on it update automatically.
• Ecosystem: React powers sites like Instagram, Netflix and Airbnb, and React Native uses the same ideas for mobile apps.

Tool	What it adds to React
Vite	a fast way to start and build a React project
Next.js	routing, server rendering and full-stack features
React Native	the same components, for iOS and Android apps
Redux	shared state for large apps

A taste of interactivity

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times.</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Click the button in the result. You didn't write any code to update the paragraph; React re-rendered it because count changed. You'll learn exactly how in the state lesson.