Working with Components in React 18
This course will teach you how to build React apps that use components in the best possible way while minimizing computer resources and maximizing browser UI experience.
What you'll learn
Creating UIs in React is all about creating independent components that seamlessly work together to present a consistent view across your React web app. In this course, Working with Components in React 18, you will gain the ability to architect and build high quality react apps. First, you will explore the various primitive methods for sharing props and state between components, as well as sharing data more globally with the Context API. Next, you’ll learn how to best handle errors in React components to make sure your users continue to have a great experience with your apps. Finally, you will discover how you can improve your app performance through minimizing over-rendering and other UI improvements. When you are finished with this course, you will have the skills and knowledge of React component design needed to leverage re-usability and ensure consistency in your apps and code with fewer bugs.
Table of contents
- Introduction 3m
- Three Ways to Propagate State Between Components 2m
- Passing State as props Between Components 5m
- Sharing State with React Context 2m
- Implementing React Context in Our Layout Component 5m
- Move React Context into a Dedicated Component 4m
- Promote Context Creation to Where It Is Used 4m
- Enhance Components with HOCs (Higher Order Components) 5m
- Code a Higher Order Component (HOC) 4m
- Share Component State with HOCs 5m
- Comparing Ways to Share State Between Components 5m
- Introduction 2m
- Motivation for React Debug Tooling 3m
- Working with the React Dev Tools Component Tab 4m
- The useDebugValue Hook Basics 3m
- Integrating useDebugValue into Custom Theme Hook 5m
- An Advanced Use of useDebugValue 2m
- Working with the React Dev Tools Profiler Tab 5m
- Inspecting Component Renders with React Dev Tools 3m
- Adding Error Boundaries for Catching Errors in Production 6m
- Improving Our React Boundary Error UI 4m
- Takeaways 1m
- Introduction 3m
- Fixing over Rendering Performance Problems 5m
- React.memo Can Solve over Rendering Problems 5m
- Implementing React.memo to Solve Our Re-rendering Problem 2m
- Advanced Usage of React.memo with a Custom Function 5m
- Deferring UI Updates with useDeferredValue 4m
- Implement useDeferredValue in the Todo App 2m
- Prioritizing State Updates in Components with useTransition 4m
- Implement useTransition in the Todo App 5m
- Verifying setTransition Is Working as Expected 2m
- Takeaways 1m
- Introducing Server Components 3m
- Concurrent Rendering and Server Components 3m
- The Flow of Server Components 3m
- A Simplified ToDo App with Server Components 7m
- Async Data Fetching in Server Components 4m
- Code Review of an App Using RSCs 7m
- Server Components as Descendants of Client Components 4m
- React Server Component Takeaways 1m
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