Section outline

• Select section Day 1: React & Next.js 14 Fundamentals (7 Hours)

  Day 1: React & Next.js 14 Fundamentals (7 Hours)

  Collapse all Expand all

  Session 1: Introduction to React & Next.js (1 Hour)

  • Overview of React and its role in modern web development.
  • Setting up a Next.js 14 project with TypeScript.
  • Understanding React client components and JSX syntax.

  Session 2: Props and State in React (1.5 Hours)

  • Understanding props: Passing data between components.
  • Managing state with useState.
  • Practical examples (e.g., counters, form inputs).

  Session 3: Server Components in Next.js 14 (2.5 Hours)

  • Understanding server-side rendering with Next.js server components.
  • Building a basic server component to render dynamic data.

  Session 4: Routing with Next.js App Router (1.5 Hours)

  • Understanding the App Router for multi-page applications.
  • Setting up static and dynamic routes in Next.js.
  • Creating and navigating between pages.

  Session 5: Hands-on Lab – Setting Up a Next.js Project (30 Minutes)

  ---

   
• Select section Day 2: UI Components, API Integration & HTTP Basics (7 Hours)

  Day 2: UI Components, API Integration & HTTP Basics (7 Hours)

  Session 1: Building Interactive UI with React Components (2 Hours)

  • Creating reusable components (e.g., buttons, forms, lists).
  • Handling event listeners (onClick, onChange).
  • Managing state updates with useState for search bars and forms.

  Session 2: HTTP & REST API Basics (1.5 Hours)

  • Understanding HTTP methods (GET, POST, PUT, DELETE).
  • Introduction to REST APIs & JSON data exchange.

  Session 3: Data Fetching in Next.js 14 (2 Hours)

  • Fetching data in client components using the Fetch API.
  • Fetching data in server components for SSR.
  • Practical example: Fetching API data and displaying it.

  Session 4: Hands-on Lab – Fetching and Displaying API Data (1 Hour)
• Select section Day 3: Full-Stack Application Development (7 Hours)

  Day 3: Full-Stack Application Development (7 Hours)

  Session 1: Integrating APIs in Next.js (2 Hours)

  • Making API calls within client and server components.
  • Handling async operations & promises with TypeScript.
  • Building a small app that consumes an API and displays data.

  Session 2: Introduction to Redux & State Management (1 Hour)

  • Basics of Redux: Actions, reducers, store.
  • Setting up Redux in Next.js & managing global state.

  Session 4: Server Components & Dynamic Page Rendering (2 Hours)

  • Using server components to render dynamic pages.
  • Passing props from server to client components.

  Session 5: Hands-on Lab – Implementing a Full-Stack Form (30 Minutes)