React Blitz - Day 1: React 19.2 Fundamentals & Modern Setup

Master React 19.2 fundamentals in 60 minutes - learn components, props, JSX, and build a task list app with Vite + TypeScript from scratch

13 min read

Duration: 60 minutes

Prerequisites: JavaScript/TypeScript basics, npm/node installed

Goal

By the end of this lesson, you will understand React’s core concepts, set up a modern development environment, and build your first component-based application using React 19.2.

Theory Part (20 minutes)

1. What is React and Why React 19.2?

React is a declarative UI library for building user interfaces. Instead of telling the browser how to update the DOM step by step, you describe what the UI should look like, and React handles the updates efficiently.

Core Concepts

Component-Based Architecture

  • Applications are built from small, reusable pieces called components
  • Each component manages its own logic and rendering
  • Components can be composed together to create complex UIs

Virtual DOM and Reconciliation

  • React maintains a lightweight copy of the DOM in memory
  • When state changes, React compares the virtual DOM with the real DOM
  • Only the differences are updated in the browser (efficient!)

What’s New in React 19?

  • React Compiler: Automatic optimization of your components
  • Actions API: Better handling of async operations and form submissions
  • Improved Performance: Faster rendering and smaller bundle sizes
  • use() Hook: Simplified data fetching and resource handling

React 19.2 Additions

  • Activity Component: Built-in loading states management
  • useEffectEvent: Separate effects from event handlers
  • cacheSignal: Better caching primitives for data

2. Modern React Setup

Why Vite?

  • Create React App (CRA) is now deprecated
  • Vite is faster, simpler, and more modern
  • Hot Module Replacement (HMR) is lightning fast
  • Built-in TypeScript support

TypeScript from Day One

  • Type safety prevents bugs before they happen
  • Better IDE autocomplete and documentation
  • Industry standard for modern React applications

Project Structure Best Practices

my-react-app/
├── src/
│   ├── components/     # Reusable UI components
│   ├── hooks/          # Custom hooks
│   ├── types/          # TypeScript type definitions
│   ├── utils/          # Helper functions
│   ├── App.tsx         # Root component
│   └── main.tsx        # Application entry point
├── public/             # Static assets
├── index.html          # HTML template
├── vite.config.ts      # Vite configuration
└── tsconfig.json       # TypeScript configuration

3. Components Basics

Function Components

// Modern React uses function components exclusively
function Welcome(props: { name: string }) {
  return <h1>Hello, {props.name}</h1>;
}

JSX Syntax

  • JSX looks like HTML but it’s actually JavaScript
  • Expressions go inside curly braces {}
  • Must return a single parent element (or Fragment)

Props (Properties)

  • Props are how components communicate
  • Props flow down from parent to child
  • Props are immutable (read-only)

Component Composition

function App() {
  return (
    <div>
      <Header />
      <MainContent />
      <Footer />
    </div>
  );
}

Practice Part (35 minutes)

Exercise 1: Environment Setup (10 minutes)

Step 1: Create a new Vite project

# Create project with React + TypeScript template
npm create vite@latest my-react-app -- --template react-ts

# Navigate to project directory
cd my-react-app

# Install dependencies
npm install

# Start development server
npm run dev

Step 2: Explore the Project Structure

Open src/main.tsx:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

// Entry point - renders the App component into the DOM
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Step 3: Configure ESLint for React 19

Update eslint.config.js:

import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'

export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
  },
)

Exercise 2: Build a Task List Component (25 minutes)

We’ll build a simple task list application to practice the fundamentals.

Step 1: Define Types

Create src/types/task.ts:

// Define the shape of a Task object
export interface Task {
  id: number;
  title: string;
  completed: boolean;
}

Step 2: Create TaskItem Component

Create src/components/TaskItem.tsx:

import { Task } from '../types/task';

// Props interface defines what data this component expects
interface TaskItemProps {
  task: Task;
}

function TaskItem({ task }: TaskItemProps) {
  return (
    <div 
      style={{
        padding: '12px',
        margin: '8px 0',
        border: '1px solid #ddd',
        borderRadius: '4px',
        display: 'flex',
        alignItems: 'center',
        gap: '12px',
        // Conditional styling based on task.completed
        backgroundColor: task.completed ? '#f0f0f0' : 'white',
      }}
    >
      {/* Checkbox to show completion status */}
      <input 
        type="checkbox" 
        checked={task.completed} 
        readOnly // We'll add interactivity in the next lesson
      />
      
      {/* Task title with strikethrough if completed */}
      <span 
        style={{
          textDecoration: task.completed ? 'line-through' : 'none',
          color: task.completed ? '#888' : '#333',
        }}
      >
        {task.title}
      </span>
    </div>
  );
}

export default TaskItem;

Step 3: Create TaskList Component

Create src/components/TaskList.tsx:

import { Task } from '../types/task';
import TaskItem from './TaskItem';

// Props interface for TaskList
interface TaskListProps {
  tasks: Task[];
  title?: string; // Optional prop with default value
}

function TaskList({ tasks, title = 'My Tasks' }: TaskListProps) {
  // Conditional rendering: show message if no tasks
  if (tasks.length === 0) {
    return (
      <div style={{ padding: '20px', textAlign: 'center' }}>
        <h2>{title}</h2>
        <p style={{ color: '#888' }}>
          No tasks yet. Add some to get started! 🎯
        </p>
      </div>
    );
  }

  return (
    <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
      <h2>{title}</h2>
      
      {/* Summary statistics */}
      <p style={{ color: '#666', marginBottom: '20px' }}>
        {tasks.filter(t => t.completed).length} of {tasks.length} completed ✅
      </p>
      
      {/* Render list of tasks */}
      <div>
        {tasks.map(task => (
          // Key prop is CRITICAL for React to track items efficiently
          <TaskItem key={task.id} task={task} />
        ))}
      </div>
    </div>
  );
}

export default TaskList;

Step 4: Update App Component

Update src/App.tsx:

import TaskList from './components/TaskList';
import { Task } from './types/task';

// Sample data - in a real app, this would come from an API or state
const sampleTasks: Task[] = [
  { id: 1, title: 'Learn React fundamentals', completed: true },
  { id: 2, title: 'Build a task list app', completed: true },
  { id: 3, title: 'Explore React hooks', completed: false },
  { id: 4, title: 'Master component composition', completed: false },
  { id: 5, title: 'Deploy to production', completed: false },
];

function App() {
  return (
    <div style={{ 
      minHeight: '100vh', 
      backgroundColor: '#f5f5f5',
      padding: '20px'
    }}>
      <header style={{ textAlign: 'center', marginBottom: '40px' }}>
        <h1 style={{ color: '#333' }}>React Task Manager 📝</h1>
      </header>
      
      {/* Pass tasks as props to TaskList */}
      <TaskList tasks={sampleTasks} title="Today's Goals" />
      
      {/* Example of empty state */}
      <div style={{ marginTop: '40px' }}>
        <TaskList tasks={[]} title="Completed Projects" />
      </div>
    </div>
  );
}

export default App;

Step 5: Run Your Application

npm run dev

Visit http://localhost:5173 to see your task list in action!

Quick Review - Key Concepts (5 minutes)

1. React is Declarative

You describe what the UI should look like, React handles how to update it efficiently.

// You write this (declarative)
const greeting = <h1>Hello, {name}!</h1>;

// React does this (imperative)
// const h1 = document.createElement('h1');
// h1.textContent = `Hello, ${name}!`;
// document.body.appendChild(h1);

2. Components are Building Blocks

  • Reusable: Write once, use many times
  • Composable: Combine small components into larger ones
  • Isolated: Each component manages its own logic

3. Props Flow Down

  • Data flows from parent to child (one-way data flow)
  • Props are read-only (immutable)
  • Child components cannot modify their props

4. JSX is JavaScript

// This JSX...
const element = <h1 className="greeting">Hello!</h1>;

// ...is transformed to this JavaScript
const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello!'
);

Checklist - What You Should Know After Day 1

  • ✅ Set up a React 19.2 project with Vite and TypeScript
  • ✅ Create functional components
  • ✅ Pass and use props with TypeScript interfaces
  • ✅ Render lists with proper key props
  • ✅ Use conditional rendering (&&, ternary operator)
  • ✅ Understand JSX syntax and expressions
  • ✅ Organize components in a logical file structure

Quick Reference Card - Save This!

Basic Component

// Component with typed props
interface GreetingProps {
  name: string;
  age?: number; // Optional prop
}

function Greeting({ name, age = 18 }: GreetingProps) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      {age && <p>Age: {age}</p>}
    </div>
  );
}

List Rendering

// Always use 'key' prop for list items
{items.map(item => (
  <Item key={item.id} {...item} />
))}

Conditional Rendering

// AND operator - renders if true
{condition && <Component />}

// Ternary operator - renders one or the other
{condition ? <ComponentA /> : <ComponentB />}

// Conditional with null
{showModal ? <Modal /> : null}

Props Patterns

// Destructuring props
function User({ name, email }: UserProps) { }

// Spreading props
<Component {...props} />

// Children prop
function Card({ children }: { children: React.ReactNode }) {
  return <div className="card">{children}</div>;
}

What’s Tomorrow?

In the next lesson, we’ll cover:

  • State Management: Using useState and useReducer
  • Event Handling: Making components interactive
  • React’s Rendering Behavior: Understanding when and why components re-render
  • Effects: Using useEffect for side effects
  • Forms: Controlled components and form validation

Additional Resources

Practice Challenges

Try these on your own to reinforce learning:

  1. Add a priority field to tasks (high, medium, low) and display it with different colors
  2. Create a TaskStats component that shows total tasks, completed, and pending
  3. Add filtering to show only completed or only pending tasks
  4. Create a UserCard component with name, avatar, and bio props
  5. Build a ProductList component for an e-commerce app with products having name, price, and image

Happy coding! 🚀

Back to blog