Join Brian Holt in 'Intermediate React v6' for Frontend Masters to gain expertise in server-side and performance capabilities of React. This comprehensive course requires prior knowledge from 'The Complete Intro to React v9' and focuses on leveraging React's inherent tools for web development, making it ideal for anyone with a foundational understanding of React. Brian Holt, an experienced React developer, provides hands-on projects and detailed instructions, enhancing your React skills and knowledge.

Intro

Explore Brian Holt's 'Intermediate React v6' course, providing insights on the use of Node.js, preferred development tools like Visual Studio Code, and a balanced perspective on AI integration in coding. Learn how these tools and technologies enhance the process of writing efficient React Server Components, as taught for Frontend Masters.

My Setup

Explore the new features of React 19, focusing on React Server Components, which enable partial server-side rendering of React components, a feature that facilitates safe database querying directly within React. Discover insights into this cutting-edge technology, stable since 2023 and actively developed since 2022, with guidance from expert Brian Holt. Ideal for developers aiming to leverage the latest advancements in React functionality.

React 19

Welcome

Learn about React Server Components in the 'Intermediate React v6' course by Brian Holt on Frontend Masters. Understand the trade-offs of React Server Components and different React rendering methods, including client-side, server-side, and static site generation. Explore the benefits and limitations of these approaches and optimize your web development skills using advanced React techniques.

Client-Side React

Learn how to implement Static Site Generation (SSG) using React and Next.js, with expert guidance from Brian Holt in the Intermediate React v6 course at Frontend Masters. Discover the simplicity of generating static web pages for content-heavy sites and explore how this streamlined approach can expedite course creation without sacrificing quality. Enhance your knowledge on using modern frameworks like Astro and Next.js for optimized static content delivery.

Static Site Generation

Discover how to enhance your React app's performance with server-side rendering (SSR) as demonstrated by Brian Holt in the Intermediate React v6 course for Frontend Masters. Learn how to implement SSR by hand to optimize time to interactive and first meaningful paint, along with considerations for complexity and device performance. Explore practical examples of SSR app setup with Fastify, Vite, and React, including handling browser-only scripts and overcoming hydration errors.

Server Side Rendering

React Render Modes

In the Intermediate React v6 course by Brian Holt from Frontend Masters, explore the concept of React Server Components (RSCs) and their role in rendering components on the server for improved performance and security. Learn how RSCs differ from server-side rendering and how to implement them using frameworks like Next.js. The course also involves building a messaging app to practice hand-coding with RSCs.

Intro to React Server Components

Learn how to set up a React Server Components project from scratch using Webpack and Babel, with guidance from Brian Holt's Intermediate React v6 course on Frontend Masters. This comprehensive guide includes configuring Webpack, Babel, and Fastify to run RSCs efficiently without additional frameworks, enhancing your web development skills.

RSC Dependencies

Learn how to build a simple React app with server and client components using React Server Components as taught by Brian Holt in Intermediate React v6 for Frontend Masters. Discover the differences between client and server components, and how to implement async functions in server components for efficient rendering.

Server and Client Components

Explore how to use Fastify to serve a React app with server components by setting up a Node.js server that handles both client-side and server-side rendering. Written by Brian Holt for Frontend Masters, this guide offers step-by-step integration of React and Fastify, demonstrating the use of React Flight Protocol and reinforcing React's modular framework for advanced web development.

The RSC Server

RSCs without a Framework

Explore Next.js and React Server Components (RSC) in the "Intermediate React v6" course by Brian Holt for Frontend Masters. This guide uses Next.js as a tool to demonstrate RSCs, covering basic setup, dependencies, and the implementation of essential page components for developing apps like Note Passer. Begin your Next.js journey with practical insights on integrating versatile front-end frameworks with a wide range of back-end solutions for web development success.

Abbreviated Intro to Next.js

Learn how to create a server component in React to display user-specific notes using SQLite, as part of the Intermediate React v6 course taught by Brian Holt for Frontend Masters. This lesson guides you through setting up a route to fetch and display notes for a logged-in user, leveraging async functions and server components.

Server Components

Learn how to create server actions in React using a backend function integration with forms, simplifying the process of managing form data in this lesson from Brian Holt's Intermediate React v6 course from Frontend Masters. This tutorial covers the implementation of server components to automatically handle data transport from frontend to backend without manual 'fetch' coding.

Server Actions

Learn how to effectively combine server and client components in React by implementing a polling system for real-time data updates, as explained by Brian Holt in Intermediate React v6 for Frontend Masters.

Server and Client Components Together

In the Intermediate React v6 course by Brian Holt for Frontend Masters, learn how to work with React Server Components (RSC) by implementing a client component that renders a server component, with special emphasis on overcoming data transmission barriers between them using pre-rendering and client-side APIs. Discover key insights on optimizing React applications with this advanced web development tutorial.

Limitations of RSCs

RSCs with Next.js

Learn how to enhance React performance by using tools like memo, useMemo, and useCallback, as taught by Brian Holt in "Intermediate React v6" for Frontend Masters. Discover when to optimize your React components to avoid unnecessary re-renders and improve efficiency without preemptive adjustments. The course is perfect for developers seeking to refine their React skills with practical insights and advanced concepts.

Where React Can Be Slow

Explore performance optimization techniques in React with Brian Holt's course "Intermediate React v6" as you build a markdown previewer using artificial jank for testing. This segment covers creating MarkdownPreview.jsx and App.jsx, addressing rendering issues, and demonstrating the use of dangerouslySetInnerHTML to prevent XSS attacks.

The Project

This guide explains how to optimize React component re-rendering using memoization techniques such as the memo function, useCallback, and useMemo, highlighting how these can prevent unnecessary re-renders by ensuring that a component only re-renders when its props or state variables change. Authored by Brian Holt for the Intermediate React v6 course, offered by Frontend Masters, this lesson is essential for web developers seeking to enhance React performance and manage state efficiently in their applications.

Fixing It

Explore the differences between useMemo and useCallback Hooks in React, as explained by Brian Holt in the Intermediate React v6 course for Frontend Masters. Understand when to use these Hooks for performance optimization and learn about the potential pitfalls of overusing memoization, alongside insights into React Compiler. Enhance your React skills with practical advice on state management and performance enhancement techniques.

Performance Optimizations

Learn how to use React's useTransition hook to optimize user experience when selecting options with poor network connectivity, ensuring the user interface remains interactive by building a sports score app with delayed API responses, as taught by Brian Holt in the 'Intermediate React v6' course for Frontend Masters.

What Are Transitions

Explore Brian Holt's 'Intermediate React v6' course where you'll build a scoreboard project using Vite and Node.js, focusing on transitions without server-side dependencies. Discover how to set up and run the project with practical guides, making use of the provided starter and completed templates from GitHub.

Learn about handling UI transitions and pending states in React applications with this practical example from Brian Holt's "Intermediate React v6." This lesson provides code snippets for managing API requests and displaying scores using a "Score" component, focusing on user experience improvements during data fetching.

Making It Work without Transitions

Learn how to implement React's useTransition hook to manage UI transitions effectively during API requests, as taught in Brian Holt's Intermediate React v6 course for Frontend Masters.

Making It Work with Transitions

Transitions

Discover the concept of optimistic UI updates in messaging apps, where the user interface reflects message sending before the actual network send, enhancing user experience. This approach, explained by Brian Holt in the Intermediate React v6 course, utilizes hooks like useOptimistic and useTransition to efficiently manage state changes in React applications.

What Are Optimistic Values

Discover how to build a UI in React using server and client interactions including POST requests with intentional delays for error simulation, as outlined in Brian Holt's Intermediate React v6 course on Frontend Masters. Learn to handle UI feedback during asynchronous operations efficiently with techniques like useOptimisticState, enhancing your web development skills with JavaScript and server components.

Discover how optimistic UI updates in messaging apps like iMessage or WhatsApp give users immediate visual feedback before a message is truly sent. Learn with Brian Holt in the Intermediate React v6 course for Frontend Masters, focusing on using React Server Components and hooks like useOptimistic and useTransition for seamless web development.

useOptimistic Hook

Optimistic Values

Learn how to manage computationally expensive components in React to prevent UI lag and improve performance in this Intermediate React v6 course by Brian Holt for Frontend Masters. Discover techniques to handle jank during frequent re-renders and optimize browser interactions in a client-side image editor project.

What Are Deferred Values

Learn how to utilize deferred values and sliders in React to apply dynamic filters to images, featuring examples like the 'DisplayImage' and 'Slider' components. Part of Intermediate React v6 by Brian Holt for Frontend Masters, this lesson covers implementing user input sliders, managing deferred values, and optimizing renders by simulating real-world application performance issues like jank. Perfect for developers looking to enhance their React skills with practical coding examples.

Learn how to optimize React performance using 'useDeferredValue' to manage low priority rendering, a tool that dynamically adapts to user's device speed, in Brian Holt's "Intermediate React v6" course by Frontend Masters.

Making It Less Janky

Deferred Values

Congratulations on completing Intermediate React v6 by Brian Holt, taught through Frontend Masters. You're now ready to deploy and enhance your React projects, exploring cloud integration with services like Vercel and Neon, and adding advanced features like authentication and social media-like functionalities. Share your builds and innovations with the community and continue to expand your skills in web development.

Intermediate React v6