Introduction to React

Lesson Overview

Welcome to Modern React Fundamentals! In this first lesson, you'll discover why React has become the dominant library for building user interfaces and how its component-based architecture revolutionizes web development. We'll explore React's core philosophy and set up the foundation for your journey into modern React development.

What You'll Learn:

• What React is and why it's so popular
• The component-based architecture paradigm
• React's declarative approach to UI development
• The Virtual DOM and performance benefits
• Modern React development with hooks
• Setting up your React development environment

Key Concepts:

• Component: Reusable, self-contained pieces of UI
• JSX: JavaScript syntax extension for writing UI
• Virtual DOM: React's efficient DOM updating mechanism
• Declarative Programming: Describing what the UI should look like
• Hooks: Functions that let you use React features in functional components
• Unidirectional Data Flow: Data flows from parent to child components

What is React?

React is a JavaScript library for building user interfaces, particularly web applications with complex, interactive UIs. Created by Facebook (now Meta) in 2011, React has grown to become the most popular frontend library in the world.

React's Core Philosophy

React is built around a few key principles that make it powerful:

1. Component-Based Architecture: Break down complex UIs into small, reusable, independent pieces
2. Declarative Programming: Describe what you want to see, not how to change the DOM
3. Learn Once, Write Anywhere: Use React for web, mobile (React Native), and desktop applications

Why Choose React?

React's popularity isn't accidental. Here's why developers love it:

1. Reusable Components

// A button component that can be used anywhere
function Button({ text, onClick }) {
  return <button onClick={onClick}>{text}</button>
}

// Use it multiple times
<Button text="Click me" onClick={handleClick} />
<Button text="Submit" onClick={handleSubmit} />

2. Virtual DOM for Performance

React creates a virtual representation of the DOM and only updates what actually changes:

// React efficiently updates only the changed text
function Counter({ count }) {
  return <h1>Count: {count}</h1>
}

3. Strong Ecosystem

• Next.js: Production-ready React framework
• React Router: Client-side routing
• TanStack Query: Server state management
• shadcn/ui: Modern component library
• Tailwind CSS: Utility-first styling

4. Excellent Developer Experience

• Fast refresh for instant feedback
• Amazing debugging tools (React DevTools)
• Strong TypeScript support
• Huge community and ecosystem

Understanding Components

Components are the heart of React. They're like JavaScript functions that return UI elements.

Functional Components (Modern Approach)

// A simple functional component
function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>
}

// Using the component
function App() {
  return <Welcome name="Sarah" />
}

Component Composition

Components can contain other components:

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  )
}

function UserProfile({ name, email }) {
  return (
    <Card>
      <h2>{name}</h2>
      <p>{email}</p>
    </Card>
  )
}

JSX: Writing HTML in JavaScript

JSX lets you write HTML-like syntax directly in your JavaScript:

const element = <h1>Hello, world!</h1>

// It compiles to:
const element = React.createElement('h1', null, 'Hello, world!')

JSX Rules

1. Must have one parent element:

// ✅ Good
function App() {
  return (
    <div>
      <h1>Title</h1>
      <p>Content</p>
    </div>
  )
}

// ✅ Also good (using Fragment)
function App() {
  return (
    <>
      <h1>Title</h1>
      <p>Content</p>
    </>
  )
}

2. Use camelCase for attributes:

// ✅ Correct
<div className="container" onClick={handleClick} />

// ❌ Incorrect
<div class="container" onclick={handleClick} />

3. Close all tags:

// ✅ Correct
<img src="image.jpg" alt="description" />
<br />

// ❌ Incorrect
<img src="image.jpg" alt="description">
<br>

Props: Passing Data to Components

Props (properties) let you pass data from parent to child components:

function Button({ variant, children, onClick }) {
  const className = `btn btn-${variant}`
  
  return (
    <button className={className} onClick={onClick}>
      {children}
    </button>
  )
}

function App() {
  return (
    <div>
      <Button variant="primary" onClick={() => console.log('Primary clicked')}>
        Primary Button
      </Button>
      <Button variant="secondary" onClick={() => console.log('Secondary clicked')}>
        Secondary Button
      </Button>
    </div>
  )
}

State: Managing Component Data

State is data that can change over time and trigger re-renders:

import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      <button onClick={() => setCount(count - 1)}>
        Decrement
      </button>
    </div>
  )
}

Setting Up Your Development Environment

For modern React development, we recommend using Next.js:

1. Create a Next.js App

npx create-next-app@latest my-react-app
cd my-react-app
npm run dev

2. Project Structure

my-react-app/
├── src/
│   ├── app/          # Next.js app router
│   ├── components/   # Reusable components
│   ├── lib/          # Utilities and helpers
│   └── styles/       # Global styles
├── public/           # Static assets
└── package.json

3. Essential VS Code Extensions

• ES7+ React/Redux/React-Native snippets
• Prettier - Code formatter
• ESLint
• Auto Rename Tag
• Bracket Pair Colorizer

Your First React Component

Let's create a simple interactive component:

// src/components/GreetingCard.jsx
import { useState } from 'react'

export default function GreetingCard() {
  const [name, setName] = useState('')
  const [submittedName, setSubmittedName] = useState('')
  
  const handleSubmit = (e) => {
    e.preventDefault()
    setSubmittedName(name)
    setName('')
  }
  
  return (
    <div style={{ 
      padding: '20px', 
      border: '1px solid #ccc', 
      borderRadius: '8px',
      maxWidth: '300px'
    }}>
      {submittedName ? (
        <h2>Hello, {submittedName}! 👋</h2>
      ) : (
        <h2>Enter your name</h2>
      )}
      
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="Your name"
          style={{
            width: '100%',
            padding: '8px',
            margin: '10px 0',
            border: '1px solid #ddd',
            borderRadius: '4px'
          }}
        />
        <button
          type="submit"
          style={{
            width: '100%',
            padding: '10px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Greet Me!
        </button>
      </form>
    </div>
  )
}

React Development Best Practices

1. Component Naming

• Use PascalCase for component names
• Be descriptive and clear
• Prefix with proper nouns when needed

// ✅ Good
function UserProfileCard() { }
function NavigationMenu() { }

// ❌ Avoid
function card() { }
function nav() { }

2. File Organization

• One component per file
• Use index files for cleaner imports
• Group related components

components/
├── ui/
│   ├── Button/
│   │   ├── Button.jsx
│   │   └── index.js
│   └── Card/
└── features/
    └── UserProfile/

3. Props Validation

Use TypeScript or PropTypes for type safety:

// With TypeScript
interface ButtonProps {
  variant: 'primary' | 'secondary'
  children: React.ReactNode
  onClick?: () => void
}

function Button({ variant, children, onClick }: ButtonProps) {
  // ...
}

Common React Patterns

1. Conditional Rendering

function UserStatus({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <button>Logout</button>
      ) : (
        <button>Login</button>
      )}
    </div>
  )
}

2. List Rendering

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          {todo.text}
        </li>
      ))}
    </ul>
  )
}

3. Event Handling

function SearchBox() {
  const [query, setQuery] = useState('')
  
  const handleChange = (e) => {
    setQuery(e.target.value)
  }
  
  const handleSearch = () => {
    console.log('Searching for:', query)
  }
  
  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={handleChange}
        placeholder="Search..."
      />
      <button onClick={handleSearch}>Search</button>
    </div>
  )
}

Summary

In this lesson, you've learned:

• What React is and why it's popular
• Component-based architecture and how it promotes reusability
• JSX syntax for writing UI in JavaScript
• Props and state for managing component data
• Setting up a React development environment with Next.js
• Best practices for writing clean, maintainable React code

Practice Exercise

Create a simple Temperature Converter component that:

1. Has an input field for Celsius temperature
2. Converts Celsius to Fahrenheit when the input changes
3. Displays both temperatures
4. Shows a weather emoji based on the temperature range

Hint: The formula is: Fahrenheit = (Celsius × 9/5) + 32

Next Up

In the next lesson, we'll dive deeper into Next.js and understand why it's the preferred framework for building production React applications. We'll explore its powerful features like server-side rendering, file-based routing, and built-in optimizations.

---

Ready to continue? Let's move on to understanding Next.js and how it enhances React development!