Introduction to React

React is a JavaScript library for building user interfaces, created by Facebook in 2013. Today, it's one of the most popular frontend technologies used by companies like Netflix, Airbnb, and Instagram.

Why React?

React solves a fundamental problem in web development: keeping the UI in sync with data. Before React, developers had to manually update the DOM whenever data changed, which was error-prone and slow.

React introduces a declarative approach - you describe what the UI should look like based on the current state, and React handles the updates automatically.

Key Benefits

• Component-Based: Build encapsulated components that manage their own state
• Declarative: Design simple views for each state in your application
• Learn Once, Write Anywhere: Use React for web, mobile (React Native), and even VR

The Virtual DOM

One of React's superpowers is the Virtual DOM. Instead of directly manipulating the browser's DOM (which is slow), React maintains a lightweight copy in memory.

When state changes, React:

• Creates a new Virtual DOM tree
• Compares it with the previous one (called "diffing")
• Updates only the parts that changed in the real DOM

This makes React incredibly fast, even for complex UIs.

// React handles DOM updates efficiently
function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Setting Up React

The easiest way to start a React project is using Vite:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

This creates a modern React setup with:

• Fast hot module replacement (HMR)
• ES modules support
• Optimized builds

Key Takeaways

• React is a library for building UIs declaratively
• The Virtual DOM makes React fast and efficient
• Components are the building blocks of React apps
• You can start quickly with Vite or Create React App

In the next lesson, we'll dive into JSX - the syntax that makes React so expressive.