Introduction to React

React is a JavaScript library used to create user interfaces (UI).

A user interface includes everything users see and interact with on a website, such as buttons, menus, forms, pizza menus, cart controls, checkout forms, and order-status panels.

React helps organize these elements into reusable components.

For example, an online pizza-ordering website might contain:

• Header
• Navigation
• Pizza menu
• Shopping cart
• Pizza card
• Checkout form

Each of these parts can be created as a separate React component.

Example — A Simple React Component

function OrderStatus() {
  return (
    <section>
      <h1>Order #PZ-204</h1>
      <p>Your pizza is ready for delivery.</p>
    </section>
  );
}

export default OrderStatus;

How It Works

function OrderStatus() declares a React component using a normal JavaScript function.

return specifies what the component should display.

The HTML-like syntax inside return is called JSX.

export default OrderStatus allows the component to be imported into another file.

Browser Preview

localhost:5173

Order #PZ-204

Your pizza is ready for delivery.

Important: React components are usually JavaScript or TypeScript functions that return React elements, commonly written using JSX.

---

In traditional JavaScript, we often manipulate the DOM directly.

The DOM (Document Object Model) represents the structure of an HTML document inside the browser.

Traditional JavaScript Example

HTML:

<h1 id="status">Order received</h1>
<button id="confirm-button">Confirm order</button>

JavaScript:

const statusHeading = document.getElementById("status");
const confirmButton = document.getElementById("confirm-button");

function confirmOrder() {
  if (statusHeading) {
    statusHeading.textContent = "Order confirmed";
  }
}

if (confirmButton) {
  confirmButton.addEventListener("click", confirmOrder);
}

Explanation

First, JavaScript searches for the HTML elements.

Then, it attaches an event listener to the button.

When the user clicks the button, JavaScript manually changes the order status heading.

This approach works, but managing a large application with many changing elements can become complicated.

The React Approach

In React, we describe what the interface should look like based on the current data.

React manages the necessary DOM updates.

import { useState } from "react";

export default function App() {
  const state = useState("Order received");

  const status = state[0];
  const setStatus = state[1];

  function confirmOrder() {
    setStatus("Order confirmed");
  }

  return (
    <section>
      <h1>{status}</h1>

      <button onClick={confirmOrder}>
        Confirm order
      </button>
    </section>
  );
}

Browser Preview

localhost:5173

Order received

Confirm order

How It Works

useState("Order received") creates a state value containing the initial order status.

status contains the current value.

setStatus is the function used to update the state.

When the button is clicked, confirmOrder() calls setStatus().

React renders the component again and updates the displayed order status.

This is called declarative programming.

Instead of manually telling the browser how to change individual elements, we describe the desired result.

Key Difference

React does not replace JavaScript. React applications are written using JavaScript or TypeScript.

---

A React application is built from components.

A component is a reusable part of the user interface.

For example, imagine an online pizza menu.

Each pizza can have a card displaying its name, ingredients, price, and availability.

Example — Pizza Card Component

function PizzaCard() {
  return (
    <article>
      <h2>Margherita pizza</h2>
      <p>Tomato, mozzarella, and basil</p>
    </article>
  );
}

export default PizzaCard;

We can use this component multiple times:

function App() {
  return (
    <div>
      <h1>Pizza Menu</h1>

      <PizzaCard />
      <PizzaCard />
      <PizzaCard />
    </div>
  );
}

Browser Preview

localhost:5173/jobs

Pizza Menu

Margherita pizza

Tomato, mozzarella, and basil

Margherita pizza

Tomato, mozzarella, and basil

Margherita pizza

Tomato, mozzarella, and basil

In this example, PizzaCard must be defined in the same file or imported from another file.

React displays three pizza cards using the same component.

Later, we can make components more flexible by passing different data through props.

Important Rules

• Component names begin with a capital letter.
• Components can be reused.
• Components can contain other components.
• Components commonly return JSX.
• TypeScript files containing JSX use the .tsx extension.

---

React uses an internal representation of the interface to determine which changes should be applied to the browser DOM.

This mechanism is commonly explained using the concept of the Virtual DOM.

When application state changes, React calculates a new representation of the interface and compares it with the previous one.

React then applies the necessary changes to the real DOM.

Example — Updating Cart Quantity

import { useState } from "react";

export default function App() {
  const state = useState(3);

  const pizzaCount = state[0];
  const setPizzaCount = state[1];

  function addPizza() {
    setPizzaCount(pizzaCount + 1);
  }

  return (
    <section>
      <h2>Margherita order</h2>

      <p>Pizzas in cart: {pizzaCount}</p>

      <button onClick={addPizza}>
        Add another pizza
      </button>
    </section>
  );
}

Browser Preview

localhost:5173/cart

Margherita order

Pizzas in cart: 3

Add another pizza

What Happens?

1. React initially displays a count of three pizzas in the cart.
2. The user clicks the button.
3. setPizzaCount() requests a state update.
4. React renders the component with the new cart quantity.
5. React compares the results and updates the necessary DOM content.

The browser does not need to reload the entire webpage.

Note: Virtual DOM is a simplified description of React's internal rendering system, not a literal copy of every browser DOM object.

---

React provides several important advantages.

Reusable Components

You can create a component once and use it throughout the application.

For example, one PizzaCard component can display many pizzas with different names, ingredients, and prices.

Declarative UI

You describe what should be displayed, while React manages the required DOM updates.

Easier Maintenance

Large applications can be divided into smaller, independent components.

Efficient Updates

React compares rendering results and updates the necessary parts of the DOM.

This helps manage complex, interactive interfaces, although React is not automatically faster than every alternative.

Large Ecosystem

React has a large developer community, extensive documentation, and many supporting libraries.

TypeScript Support

React works well with TypeScript, allowing developers to define types for props, state, events, and other data.

---

React technology can be used in different environments.

Web Applications

React is commonly used for websites, online stores, restaurant menus, and web applications.

Examples include:

• Online pizza-ordering websites
• Restaurant kitchen dashboards
• Ingredient inventory tools
• Customer order-history pages
• Multilingual restaurant menus

Mobile Applications — React Native

React Native allows developers to build mobile applications using React concepts.

It targets native mobile interfaces rather than browser HTML elements.

Desktop Applications — Electron

React can be used to build desktop application interfaces with tools such as Electron.

Electron provides a desktop application environment using web technologies.

Although the React component model is familiar across these environments, the available UI elements and platform-specific tools can differ.

---

These technologies are related, but they have different purposes.

React

React provides the component model, state management primitives, and rendering concepts.

A React application can be built with tools such as Vite.

Next.js

Next.js builds on React and provides additional capabilities, including routing and server-side rendering.

It is useful for many websites where SEO, server rendering, and application structure are important.

React Native

React Native uses React concepts to create mobile applications for platforms such as Android and iOS.

Instead of HTML elements such as <div>, React Native uses native-oriented components such as <View>.

---

Imagine building a website where customers choose pizzas, change quantities, review their cart, and place an order online.

A possible React component structure could look like this:

App
├── Header
├── Navigation
├── MenuFilters
├── PizzaMenu
│   ├── PizzaCard
│   ├── PizzaCard
│   └── PizzaCard
├── CartSummary
└── OrderStatusFooter

Each component has a specific responsibility.

Header displays the website header.

Navigation contains navigation links.

MenuFilters lets customers filter pizzas by size or dietary preference.

PizzaMenu displays the available pizzas.

PizzaCard displays one pizza with its ingredients, price, and add-to-cart action.

CartSummary shows selected items, quantities, and the current total.

OrderStatusFooter shows the current order status.

This component-based structure makes the application easier to extend and maintain.

---

Mistake 1 — Component Names Starting with Lowercase Letters

Incorrect:

function pizzaCard() {
  return <h2>Margherita pizza</h2>;
}

Correct:

function PizzaCard() {
  return <h2>Margherita pizza</h2>;
}

React component names should begin with uppercase letters when used as JSX components.

Mistake 2 — Using class Instead of className

Incorrect:

<article class="pizza-card">Margherita pizza</article>

Correct:

<article className="pizza-card">Margherita pizza</article>

Mistake 3 — Returning Multiple Adjacent JSX Elements

Incorrect:

function App() {
  return (
    <h1>Active pizzas</h1>
    <p>Choose your favorite pizza</p>
  );
}

Correct:

function App() {
  return (
    <>
      <h1>Active pizzas</h1>
      <p>Choose your favorite pizza</p>
    </>
  );
}

The fragment <></> groups elements without adding an extra HTML element to the DOM.

Mistake 4 — Expecting Normal Variables to Trigger Updates

Changing a normal local variable does not automatically cause React to render again.

For dynamic interface values, use state when appropriate.

---

• React is a JavaScript library for building user interfaces.
• React applications are organized into reusable components.
• Components commonly return JSX.
• React uses a declarative programming approach.
• Props pass information to components.
• State allows components to remember changing information.
• React calculates and applies necessary DOM updates.
• React can be used with TypeScript.
• Next.js extends React for web application development.
• React Native applies React concepts to mobile applications.

---

Official React documentation:

https://react.dev/

React learning guide:

https://react.dev/learn

Next.js documentation:

https://nextjs.org/docs

React Native documentation:

https://reactnative.dev/

Next lesson: Creating a React Project with Vite and TypeScript.