React Core Concepts

The React Way

React is a JavaScript library for building user interfaces. Instead of manually telling the browser how to change the page step-by-step, you describe what the UI should look like for any given piece of data. React then handles the hard work of updating the actual DOM efficiently.

This declarative approach makes your code more predictable and easier to debug. At the heart of React is the concept of a Virtual DOM, an in-memory representation of the real browser DOM. When data changes, React creates a new Virtual DOM tree, compares it with the old one, and calculates the most efficient way to update the real DOM. This process, called reconciliation, is what makes React so fast.

JSX and Components

When you write React, you're not writing HTML. You're writing JSX (JavaScript XML), a syntax extension that lets you write HTML-like code directly inside your JavaScript files. This might look strange at first, but it's incredibly powerful because it keeps your UI logic and markup in one place.

Under the hood, tools like Babel transpile your JSX into regular React.createElement() function calls. So, while you write what looks like HTML, you're actually creating JavaScript objects.

// This JSX...
const element = <h1>Hello, world!</h1>;

// ...gets compiled into this JavaScript
const element = React.createElement(
  'h1',
  null,
  'Hello, world!'
);

The fundamental building blocks of any React application are components. A component is a self-contained, reusable piece of the UI. In modern React, we use functional components, which are just JavaScript functions that accept data and return a React element (written in JSX) to describe what should appear on the screen.

function WelcomeMessage() {
  return <h1>Welcome to our app!</h1>;
}

// You can then use this component like an HTML tag:
// <WelcomeMessage />

Props, State, and Events

Components wouldn't be very useful if they were static. We need ways to pass data into them and for them to manage their own internal data.

Props (short for properties) are how you pass data from a parent component down to a child. Think of them like arguments to a function. They are read-only, meaning a component can never change the props it receives.

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

// Parent component using Greeting
function App() {
  return <Greeting name="Alice" />;
}

// Renders: <h1>Hello, Alice!</h1>

State is for data that is managed inside a component and can change over time. When a component's state changes, React automatically re-renders the component to reflect the new data. To manage state in functional components, we use the useState hook.

A hook is a special function that lets you “hook into” React features. useState is a hook that lets you add React state to function components.

The useState hook returns an array with two elements: the current state value and a function to update it. Let's build a simple counter.

import { useState } from 'react';

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

  // Event handler function
  const increment = () => {
    setCount(count + 1);
  };

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

Notice the onClick attribute on the button. This is how you handle events in React. The naming convention is camelCase, like onClick or onChange. We pass a function, increment, which calls setCount to update our state, triggering a re-render.

Rendering Dynamically

Often, you'll need to show or hide parts of your UI based on certain conditions. This is called conditional rendering. Since JSX is just JavaScript, you can use standard JavaScript operators to achieve this.

One common pattern is using the ternary operator ? : for simple if/else logic directly in your JSX.

function LoginStatus({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn 
        ? <p>Welcome back!</p> 
        : <p>Please log in.</p>}
    </div>
  );
}

Another common task is rendering a list of items from an array. We can do this using the .map() array method. It's crucial to provide a unique key prop for each item in the list. This helps React identify which items have changed, been added, or been removed, optimizing the rendering process.

function ToDoList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

const myTasks = [
  { id: 1, text: 'Learn React' },
  { id: 2, text: 'Build an app' },
];

// Usage:
// <ToDoList items={myTasks} />

Keys should be stable, predictable, and unique within a list of siblings. Using an item's index as a key is an anti-pattern if the list can be reordered, as it can lead to bugs and performance issues.

These core concepts, components, props, state, and dynamic rendering, form the foundation of building with React. By combining simple, focused components, you can build complex and interactive user interfaces.

Quiz Questions 1/6

What is the primary programming paradigm React uses for building user interfaces?

Quiz Questions 2/6

What is the primary role of the Virtual DOM in React?

React Mastery: From Fundamentals to Job Ready