Working with Data in React
This course will teach you to construct React apps adept at managing all data seamlessly. You'll also learn about the React concurrent rendering feature, Suspense, which enables superior user experiences.
What you'll learn
React applications running in browsers often need to retrieve remote data, which could be from databases, web servers, or other sources. Understanding the best methods for incorporating this data into your production application is crucial. In the course Working with Data in React, you will explore how to leverage React's latest concurrent rendering features. First, you'll explore Server Components and Server Actions to establish a data connection. Then, you will see best practices that facilitate development and maintenance and enable outstanding user interfaces. Finally, you will learn to provide performant experiences for users of your browser applications. By the end of this course, you will be able to ensure that your applications adhere to the highest standards.
Table of contents
- Introduction 1m
- A Typical App Flow for First Render 3m
- A Typical App Flow UI Interaction 4m
- Using Component State to Handle Data Changes 3m
- Using Suspense and Server Components for Loading Data 4m
- Server Action Replacing REST PUT Call 2m
- What’s Coming in This Course 3m
- A Word About What Is React and What Is Next.js 2m
- Introduction 4m
- All Demos in GitHub Repository 1m
- Scaffolding the React App with Next.js 3m
- Launching the React App with Next.js and VS Code 4m
- A Big Gotcha with the App Router in Next.js 4m
- Rendering a Static List of Attendees with Loading State 6m
- Streamlining Style and Component Design in React 4m
- A Brief Review of TypeScript 4m
- Adding Proper TypeScript Typing to the React App 6m
- Adding Data Persistence with SQLite and Prisma 5m
- Seeding SQLite with Data 5m
- Replacing Static Data with REST and SQLite Calls 5m
- Implement a REST Server in Node with API Router 4m
- Updating the Speaker Component to Call REST Service 4m
- Takeaways 2m
- Introduction 1m
- Create a Combined State Object 4m
- Add Component Nesting to Allow for React Context 3m
- Create Dedicated Data Context from Existing State Management 6m
- Adding Layout, Navigation, Header, and a Footer 6m
- Adding a REST Implementation for a Second Table 4m
- Processing a REST POST with the Form Element 4m
- Enhancing the Form Processing UI 4m
- Takeaways 1m
- Introducing Suspense for Data 4m
- Comparing Suspense to Code without Suspense 4m
- Error Processing with Suspense 3m
- The React Hook “use” Is Canary Release 2m
- Source Code Going Forward in This Module 5m
- Data with Loading States Code Review 5m
- Data with Client Components Suspense Code Review 4m
- Nest Suspense Boundaries 5m
- Data with Server Suspense Code Review 3m
- Takeaways 1m
- Introduction 3m
- Adding Login Authentication 4m
- Implementing Authentication into Our React App 5m
- Adding Event Processing with a Speaker Favorite Toggle 5m
- Nested Context Providers and Implementing General Search 5m
- Implement Modal Dialog for Updates 6m
- Create a Two Step Wizard Sign-up Form 3m
- Animating Loading Status Rendering 2m
- Loading Data with Server Components and Suspense 7m
- Takeaways 1m
- Introduction 4m
- Form Action Basics 3m
- Comparing Server Actions to REST 2m
- Responding to a Form POST with a Server Action 5m
- Separating Server Actions into Their Own Files 3m
- Calling a Server Action from a Client Component 5m
- Returning Data from Server Actions 7m
- Revisiting React Form Basics and Clearing Data 2m
- Returning Success and Errors from Server Actions 7m
- Calling Server Actions Directly 3m
- Implementing Directly Calling Server Actions 5m
- Improving Server Action UI Performance 3m
- Motivation for Runtime Data Validation in Server Actions 2m
- Adding Zod Runtime Validation to a Server Action 4m
- Replacing REST Calls with Server Actions for Speaker Updates 6m
- Takeaway 2m
About the author
Peter is an independent software consultant, specializing in .NET development from 1985 through 2001, as well as an eleven time Microsoft MVP. He was founder and president of Tufden Inc, where he successfully delivered systems for clinic scheduling, insurance company management and medical claim processing. His solutions included delivering a turnkey medical office management system to over 500 customers nationwide. His passion for the computer dates back to elementary school when he joined his ... more