Introduction to React

Overview

React is a popular JavaScript library for building user interfaces (UIs). Think of it like building with LEGO blocks - you create small, reusable pieces (called components) and combine them to build complex web applications.

This guide covers:

• What React is and why it's useful
• Core concepts and terminology
• How React makes web development easier
• Basic React architecture

What is React?

Before React, building web applications was like trying to organize a messy room where everything is connected to everything else. When you moved one thing, it could unexpectedly affect something else. React helps solve this by organizing your code into neat, separate containers (components) that are easier to manage.

Components: The Building Blocks

A component is like a reusable blueprint for a part of your website. For example:

// A simple Button component
function Button({ text, onClick }) {
  return (
    <button onClick={onClick}>
      {text}
    </button>
  );
}

// Using the Button component
function App() {
  return (
    <div>
      <Button text="Click me!" onClick={() => alert('Hello!')} />
      <Button text="Sign up" onClick={() => alert('Welcome!')} />
    </div>
  );
}

To learn more about components, check out the Components guide.

Why Use React?

Let's look at why React has become so popular by examining its key features:

1. Predictable Data Flow

Imagine a TV remote control. When you press a button (an action), you expect a specific change on the TV screen (the view). React works the same way - data flows in one direction, making it easier to understand and predict what will happen in your app.

2. Component-Based Architecture

Think of components like recipe cards in a cookbook:

• Each recipe (component) is self-contained
• You can reuse recipes in different meals (pages)
• Changing one recipe doesn't affect the others

// Recipe card example
function RecipeCard({ title, ingredients, instructions }) {
  return (
    <div className="recipe">
      <h2>{title}</h2>
      <ul>
        {ingredients.map(ingredient => (
          <li>{ingredient}</li>
        ))}
      </ul>
      <p>{instructions}</p>
    </div>
  );
}

3. State Management

State is like the memory of your application. It keeps track of things that can change, like:

• Is the user logged in?
• What items are in the shopping cart?
• Which theme (light/dark) is selected?

function Counter() {
  // useState creates a piece of state
  const [count, setCount] = useState(0);

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

To learn more about state, check out the React useState Hook guide.

How React Works

React uses a concept called the Virtual DOM to make updates efficient. Here's how it works:

1. Virtual DOM: A lightweight copy of the actual webpage
2. State Changes: When data changes, React creates a new Virtual DOM
3. Comparison: React compares the new Virtual DOM with the real webpage
4. Smart Updates: Only updates what actually changed

Example of React's Efficiency

function TodoList() {
  const [todos, setTodos] = useState([
    'Learn React',
    'Build something cool'
  ]);

  // Only the new todo gets added
  // The rest of the list stays the same
  function addTodo(newTodo) {
    setTodos([...todos, newTodo]);
  }

  return (
    <ul>
      {todos.map(todo => (
        <li>{todo}</li>
      ))}
    </ul>
  );
}

Additional Resources

• 📖 Official React Documentation
• 📖 Thinking in React
• 🎮 Interactive React Tic-Tac-Toe Tutorial