React Fundamentals

What is React?

React is a JavaScript library for building user interfaces. Created by Facebook, its main job is to make it easier to create interactive UIs by breaking them down into smaller, manageable pieces.

Think of it like building with LEGO bricks. Instead of constructing a whole castle from one giant piece of plastic, you use small, standard bricks that you can snap together. Each brick has a specific purpose, and you can reuse them to build other things.

In React, these bricks are called components. A button, a search bar, or an entire user profile card can each be a component. You build simple components first, then compose them together to create complex applications.

React is a JavaScript library for building user interfaces.

Components and Props

A component is a self-contained, reusable piece of code that returns a piece of the UI. In modern React, we write components as simple JavaScript functions.

function WelcomeMessage() {
  return <h1>Hello, world!</h1>;
}

This WelcomeMessage component is static. It will always display "Hello, world!". To make components dynamic and reusable, we pass data into them. This data is passed through special objects called props, short for properties.

Props are passed to components like HTML attributes. Let's modify our component to accept a name prop.

function WelcomeMessage(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// You can now use this component like this:
<WelcomeMessage name="Alice" />
<WelcomeMessage name="Bob" />

Now, we can reuse the WelcomeMessage component to greet anyone we want. Props are read-only; a component should never change its own props.

JSX: JavaScript and HTML Together

You might have noticed the HTML-like syntax inside the JavaScript functions. This is JSX, which stands for JavaScript XML. It's a syntax extension that lets us write what looks like HTML directly in our JavaScript code. It makes describing our UI intuitive.

The real power of JSX is that you can embed any valid JavaScript expression inside it by wrapping it in curly braces {}.

const user = {
  name: 'Charlie',
  favoriteFood: 'pizza'
};

function UserProfile() {
  return (
    <div>
      <h2>{user.name}'s Profile</h2>
      <p>Favorite food: {user.favoriteFood}</p>
      <p>2 + 2 = {2 + 2}</p>
    </div>
  );
}

Browsers don't understand JSX out of the box. A tool like Babel compiles your JSX into regular React.createElement() calls, which are just JavaScript function calls that browsers can understand.

State and Handling Events

Props are for data passed from a parent component. But what about data that a component needs to manage itself? Data that can change over time, like what a user types into an input field or whether a button has been clicked? For this, we use state.

State

noun

An object that holds data managed within a component. When a component's state changes, React re-renders the component to reflect the new data.

To add state to a functional component, we use a special function called the useState Hook. Let's build a simple counter.

import React, { useState } from 'react';

function Counter() {
  // `count` is our state variable.
  // `setCount` is the function to update it.
  const [count, setCount] = useState(0);

  function increment() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>
        Click me
      </button>
    </div>
  );
}

Here's what's happening:

We call useState(0) to create a piece of state initialized to 0.
React gives us back two things: the current state value (count) and a function to update it (setCount).
We attach the increment function to the button's onClick event.
When the button is clicked, increment calls setCount().
Calling setCount() tells React that the component's state has changed. React then automatically re-renders the Counter component, displaying the new count.

The Virtual DOM

Directly changing the webpage's structure, known as the Document Object Model (DOM), is slow and computationally expensive. If an application has to re-draw everything every time a tiny piece of data changes, it becomes very sluggish.

React solves this with a clever concept: the Virtual DOM. The Virtual DOM is a lightweight, in-memory copy of the real DOM. It's just a JavaScript object that represents the structure of the UI.

When a component's state changes, React doesn't immediately touch the real DOM. Instead, it follows a process called reconciliation:

This process is incredibly fast. By calculating the minimum necessary changes in memory and applying them in one batch, React keeps applications feeling responsive and smooth, even when lots of data is changing.

Ready to test your knowledge? Let's see what you've learned.

Quiz Questions 1/6

What is the primary purpose of the React library?

Quiz Questions 2/6

How is data passed from a parent component to a child component?

These are the core ideas behind React. By understanding components, props, state, JSX, and the virtual DOM, you have the foundation needed to start building powerful web applications.

React Frontend Architecture Mastery