Migrate a Client-Side Application to React 18 Beta

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!

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