illustration for Migrate a Client-Side Application to React 18 Beta

Migrate a Client-Side Application to React 18 Beta


Michael Chan

15m closed-captioning
11 lessons
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
people completed
Published 3 years ago
Updated 3 years ago

Most applications are not greenfield. We rarely get to jump in and start doing whatever we like. Instead, we have to migrate, adapt, and grow the code that exists.

This course will help you practice those skills — in the context of a React version-to-version migration.

In this new course, Michael (a.k.a. chantastic) guides you through incrementally migrating a legacy application that uses the legacy ReactDOM.render()API to the new ReactDOM.createRoot() API.

Along the way, you'll learn other new features including batching, edge-case handling, and an approach for conditionally choosing an API to render with.

Spend 15 minutes watching this course, and see how you can start utilizing tomorrow's features today!

Intro to Migrate a Client-Side Application to React 18 Beta

Gradual Adoption Strategy

The React team encouraged a gradual adoption strategy. As new versions have been released, the "old way" of doing things will continue to work. This approach ensures that you can safely experiment and add new features on your own time.

Despite React 18 shipping with a host of new features, using the same APIs in the same ways as you do with React 17 will yield the exact same results as you had in React 17.

However, there's a bunch of performance improvements that can be gained by changing our root API and updating the way that we interact with state updates.

That's what this course focuses on, is going through all of the changes that are a result of changing that root API and places in your app that you might need to update to get the most performance benefit from these changes.

Once you've made those changes, your app is in a stable place to take advantage of all of the new and upcoming features in React 18. ✨

Gain These Skills

By taking this course, you'll:

  • Be prepared to confidently migrate your React 17 codebase to React 18
  • Learn how to opt-out of breaking changes (where needed)
  • Implement the new Root API from React 18
  • Learn about the new features that come with React 18 ✨

What's Next?

After you finished watching this course, you can continue improving your React skills with these courses:

  • If you don't understand state management, you don't understand React. Part interview, part screen share, these videos will benefit you if you're building web modern React applications → React State Management in 2021

  • This course will serve as a good tutorial for learning React Hooks. It will also help you apply state management patterns when using Redux. These patterns, powered by the new useSelector and useDispatch hooks will transform your Redux applications → Modernizing a Legacy Redux Application with React Hooks

  • Just under fourteen minutes, you'll know enough about React to start building modern frontend applications. This is a great resource for getting up and running with React Hooks → React Crash Course with Hooks

Course Content

15m • 11 lessons

    You might also like these resources:

    illustration for Introduction to Cloudflare Workers
    Kristian Freeman・36m・Course

    Become familiar with the Workers CLI wrangler that we will use to bootstrap our Worker project. From there you'll understand how a Worker receives and returns requests/Responses. We will also build this serverless function locally for development and deploy it to a custom domain.

    illustration for Create an eCommerce Store with Next.js and Stripe Checkout
    Colby Fayock・1h 4m・Course

    This is a practical project based look at building a working e-commerce store using modern tools and APIs. Excellent for a weekend side-project for your developer project portfolio

    illustration for Practical Git for Everyday Professional Use
    Trevor Miller・1h・Course

    git is a critical component in the modern web developers tool box. This course is a solid introduction and goes beyond the basics with some more advanced git commands you are sure to find useful.