Download Working with Data in React Course for Free

Course Overview

Using Suspense and Server Components for Loading Data

Introduction

A Typical App Flow for First Render

Using Component State to Handle Data Changes

A Typical App Flow UI Interaction

A Word About What Is React and What Is Next.js

What’s Coming in This Course

Server Action Replacing REST PUT Call

Introduction

Scaffolding the React App with Next.js

All Demos in GitHub Repository

Launching the React App with Next.js and VS Code

A Big Gotcha with the App Router in Next.js

Adding Proper TypeScript Typing to the React App

A Brief Review of TypeScript

Streamlining Style and Component Design in React

Rendering a Static List of Attendees with Loading State

Adding Data Persistence with SQLite and Prisma

Replacing Static Data with REST and SQLite Calls

Takeaways

Implement a REST Server in Node with API Router

Seeding SQLite with Data

Updating the Speaker Component to Call REST Service

Create a Combined State Object

Add Component Nesting to Allow for React Context

Adding Layout, Navigation, Header, and a Footer

Adding a REST Implementation for a Second Table

Create Dedicated Data Context from Existing State Management

Processing a REST POST with the Form Element

Takeaways

Enhancing the Form Processing UI

Comparing Suspense to Code without Suspense

Introducing Suspense for Data

The React Hook [use] Is Canary Release

Error Processing with Suspense

Source Code Going Forward in This Module

Data with Loading States Code Review

Takeaways

Data with Client Components Suspense Code Review

Nest Suspense Boundaries

Data with Server Suspense Code Review