 Resources from Michael Chan in 2024

Beginner’s Guide to Storybook 7 with React

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

A Beginner’s Guide to Storybook 7 with React

Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force specific data into your database.

In this course, Michael Chan will teach you how to integrate Storybook 6.3 with Next.js 11 so that you can flawlessly build UIs. 

The course will kick off by taking the default Next.js page and turning it into a Story. You will then learn how to leverage Story `Args`, configure the `next/image` component to be unoptimized, and mock server workers with MSW inside Storybook.

Next.js is a minimalistic framework for server-rendered React applications.

Integrate Storybook in a Next.js Application

🚧 CONCURRENT MODE IS EXPERIMENTAL! 🚧

Michael Chan has years of experience with React, and in this course, he will guide you through the ins-and-outs of working with Suspense. 

React Suspense gives us a new way of describing with fine-grain controls how users experience should look based on data we have or don’t have.

This will change the way you build React applications forever and this is the opportunity to get an early look and head start!





Build an App with React Suspense

Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X.

Vim Videos for Beginners

Practical, repeatable CSS for application development.

Cascading Style Sheets bring order and beauty to our applications.

Styling

Migrate a Client-Side Application to React 18 Beta

Extracting new function components in React applications is something we do several times a day.
This video illustrates how to use errors to focusing your component extractions and component refactoring.

Extract a Function Component in React

In this lesson, we include the `getServerSideProps` and `getStaticProps` exports into a story, using Storybook loaders. We mock the fetch request using MSW.

Mock getServerSideProps and getStaticProps Request with MSW and Storybook Loaders

In this lesson, we add the Mock Service Worker (MSW) library to Storybook for API endpoint mocking in Storybook. We configure MSW by hand for use with Next.js features like `getServerSideProps` and `getStaticProps` in stories.

Integrate MSW and Storybook

In this lesson, we add Storybook controls to page stories using Storybook args. With args, stories can be manipulated and transformed in the browser. Additionally, we configure all stories in a module to use default args.

Add Controls to Next.js Page Props with Story Args

In this lesson, we configure `next/image` for use in Storybook. `next/image` is a Next.js component that creates highly performance-optimized images to users based on device capability and browser dimensions. It can be unoptimized for compatibility in development environments like Storybook.

Configure next/image Component to be Unoptimized

In this lesson, we configure Storybook to load global stylesheets for all stories. This is a great way to get general CSS into all stories and useful practice for adding resets, fonts, and globally shared stylesheets.

Import Global Stylesheets for all Stories in preview.js

Michael Chan shows you where to stay up to date on React 18 changes and showcases in-process React Working Group discussions on GitHub!

Stay up-to-date on React 18 progress with the React Working Group

React 17 had an edge-case that meant that `this.state` could show partial state changes. This was never intended and has been patched in React 18. In cases where you need that same behavior, `ReactDOM.flushSync` to achieve the same result. While it's an available option, it is not recommended.

Handle Class Component setState edge-case with ReactDOM.flushSync

In React 18, useState update calls are batched for improved performance. A new API — `ReactDOM.flushSync` — lets us selectively escape batching. This option is useful when reading the DOM after state changes. Use `ReactDOM.flushSync` to exempt specific state updates from batching.

Opt-out of Automatic Batching with ReactDOM.flushSync

Want to explore new features in React, play with cutting packages like react-cache, or contribute to core?
You need to know how to build React from source.

If you work in node a lot, this process should feel pretty familiar — with a couple additional complications.

By the end of this video you'll be building React packages like a pro.



Build React from Source

The Suspense component isn't new. We've been able to use it since 2018.

Learn the simplest way to start using Suspense in any React codebase (v16.6 or later), using dynamic imports.

Import Components Lazily with Suspense React.lazy

JavaScript's try/catch feature allows you to isolate errors and prevent them from halting execution in adjacent parts of an app.

Error boundaries do the same for component trees. They allow you to isolate errors and send them to an error reporting service.

Let's learn they are used to catch errors thrown by promises.

Catch Errors with a React Error Boundary Component

React Suspense won't magically detect and inspect promises in your code. You have to wrap promises to communicate promise status to Suspense and Error Boundaries.

React.lazy acts as a model for which states we need our promise wrappers to handle.

Understand How React.lazy Communicates Loading Status to Suspense and Error Boundaries

We can write our own promises wrappers to communicate pending, error, and success statuses to Suspense and error boundaries components.

The wrapper we write in this lesson is the minimum viable wrapper required for data fetching. Knowing how to wrap promises for communication with Suspense and error boundaries allows you to suspend any asynchronous data.

Wrap Fetch Requests to Communicate Pending, Error and Success Status to React Suspense

Separating concerns can improve code re-use.
Keeping API functions separate from components can be a nice way to isolate concerns with the data layer and make data fetching functions available to other modules.

Topics

Instructors

Content Type

Michael Chan