React Fundamentals

Building with Components

Think of a webpage like a complex structure built from LEGO bricks. Instead of one massive, unchangeable block, you have small, reusable pieces that you can snap together. In React, these pieces are called components.

A component is a self-contained, independent piece of the user interface (UI). A button, a search bar, or a user profile card could all be components. Each one manages its own appearance, logic, and data. You can then combine these simple components to build more complex ones, like a navigation bar made of several button components.

Components are the fundamental building blocks of any React application.

This approach, known as component-based architecture, makes your code much easier to manage. If you need to update a button, you only change the button component, and that change will apply everywhere it's used. It also makes your code more readable and reusable across different parts of your application.

Here’s what a very basic component might look like. This Welcome component simply displays a greeting.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, world!</h1>;
  }
}

Writing with JSX

You might have noticed the <h1>Hello, world!</h1> in the code above looks a lot like HTML, but it's sitting right inside JavaScript. This syntax is called JSX, which stands for JavaScript XML. It's a syntax extension that lets us write HTML-like code in our JavaScript files.

JSX is not required to use React, but it's highly recommended. It makes writing your components feel more intuitive, as if you're describing what the UI should look like directly in your code. Behind the scenes, a tool called a transpiler (like Babel) converts your JSX into regular JavaScript that browsers can understand.

For example, <div className="greeting">Hello</div> in JSX becomes a JavaScript function call: React.createElement('div', {className: 'greeting'}, 'Hello').

Because JSX is JavaScript, you can embed JavaScript expressions directly inside it by wrapping them in curly braces {}. This is incredibly powerful for displaying dynamic data.

const name = 'Ada Lovelace';
const element = <h1>Hello, {name}</h1>; // Renders "Hello, Ada Lovelace"

Handling Component Data

Components are useful because they can manage data. There are two main ways components get their data: props and state.

Props (short for properties) are used to pass data from a parent component down to a child component. They are read-only, meaning a component cannot change the props it receives. Think of them like arguments you pass to a function. You can use props to customize a component's appearance or behavior.

// The parent component passes a 'name' prop
<Welcome name="Alice" />

// The Welcome component receives and uses the prop
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

State, on the other hand, is data that is managed within a component. It’s private to that component and can change over time in response to user actions, network responses, or other events. When a component's state changes, React automatically re-renders the component to reflect the new data.

Imagine a simple counter. The current count is part of its internal state. When you click a button to increment the count, you update the state, and React takes care of updating the display.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

Props are passed into a component from its parent, while state is managed by the component itself.

The Virtual DOM

Web browsers use a structure called the Document Object Model (DOM) to represent a webpage. The DOM is like a tree of all the HTML elements on the page. Manipulating this tree directly can be slow and inefficient, especially for complex applications.

React solves this problem with something called the Virtual DOM. The Virtual DOM is a lightweight copy of the real DOM that exists only in memory. When a component's state changes, React doesn't immediately change the real DOM. Instead, it follows a clever process called reconciliation.

Here's how it works:

When you update a component's state, React creates a new Virtual DOM tree.
It then compares this new tree with the previous one, figuring out the minimal number of changes required to make them match. This comparison process is called "diffing."
Finally, React takes these calculated changes and applies them to the real DOM in one single, efficient batch.

This process is much faster than re-rendering the entire page from scratch. It's the secret sauce that makes React applications feel so fast and responsive.

Now that you have a grasp of the core concepts, let's test your knowledge.

Quiz Questions 1/6

What is a React component?

Quiz Questions 2/6

What is JSX?

Understanding components, JSX, props, state, and the Virtual DOM provides a solid foundation for building with React. These are the core ideas you'll use every day as you create dynamic and interactive web applications.

React.js Mastery