1. Introduction to React

What is React?

React is a JavaScript library for building user interfaces, created by Facebook (Meta) in 2013. It's the most popular frontend library in the world, used by companies like Netflix, Airbnb, Instagram, and thousands of others.

Why React?

Component-Based Architecture

React lets you build UIs from small, reusable pieces called components:

1// A simple component
2function Welcome() {
3  return <h1>Hello, World!</h1>
4}
5
6// Components can be composed together
7function App() {
8  return (
9    <div>
10      <Welcome />
11      <Welcome />
12      <Welcome />
13    </div>
14  )
15}

Declarative UI

You describe what you want to see, and React figures out how to make it happen:

1// Declarative - describe the UI
2function Counter({ count }) {
3  return <span>Count: {count}</span>
4}
5
6// React automatically updates the DOM when count changes

Virtual DOM

React uses a virtual representation of the DOM to efficiently update only what's changed:

React vs Other Frameworks

Core Concepts

1. Components

Everything in React is a component. Components are like JavaScript functions that return HTML:

1function Greeting({ name }) {
2  return <h1>Hello, {name}!</h1>
3}

2. JSX

JSX is a syntax extension that lets you write HTML-like code in JavaScript:

1// JSX
2const element = <h1 className="title">Hello</h1>
3
4// Compiles to
5const element = React.createElement('h1', { className: 'title' }, 'Hello')

3. Props

Props are how you pass data from parent to child components:

1function Parent() {
2  return <Child name="John" age={25} />
3}
4
5function Child({ name, age }) {
6  return <p>{name} is {age} years old</p>
7}

4. State

State is data that changes over time within a component:

1function Counter() {
2  const [count, setCount] = useState(0)
3  
4  return (
5    <button onClick={() => setCount(count + 1)}>
6      Clicked {count} times
7    </button>
8  )
9}

The React Ecosystem

React has a rich ecosystem of tools and libraries:

• Create React App / Vite - Project setup
• React Router - Navigation
• Redux / Zustand - State management
• React Query - Data fetching
• Next.js - Server-side rendering
• React Native - Mobile apps

When to Use React

React is great for:

• Single Page Applications (SPAs)
• Complex, interactive UIs
• Applications that need frequent updates
• Large teams (component-based architecture helps)
• Projects that might need mobile apps (React Native)

Your First React App

Here's what a simple React app looks like:

1import { useState } from 'react'
2
3function App() {
4  const [message, setMessage] = useState('Hello, React!')
5  
6  return (
7    <div>
8      <h1>{message}</h1>
9      <button onClick={() => setMessage('You clicked!')}>
10        Click me
11      </button>
12    </div>
13  )
14}
15
16export default App

In the next lesson, we'll set up our development environment and create our first React project!