Designing React 17 Components
This course will teach you how to architect and build components in React that work together to present a consistent view across your web app.
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 web app. In this course, Designing React 17 Components, you will gain the ability to architect and build high quality web apps, that ensures just the right components re-render as the data in your applications changes. First, you will learn how separation of concerns applies to building React components. Next, you will discover the various primitive methods for sharing data and methods between components. Finally, you will explore how to use Context for establishing shared information and use custom hooks for advanced state management. 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 less bugs.
Table of contents
- Version Check 0m
- Introduction 3m
- Setting up Our React Development Environment 3m
- Recognizing a React App Is Just a Collection of Components 2m
- Deciding How to Divide Your App into Components 4m
- Loading Static Assets into Our Visual Studio Code React Project 3m
- Create a Nested Tree of Components from a Single Speaker Component 6m
- Introducing Using Context as a Refactoring Strategy 3m
- Extract Session and Sessions Components from Our Single Component 5m
- Learn Multiple Ways to Pass Data into Components Using Props 3m
- Create a Nested Tree of Components from a Single Speaker Component 5m
- Takeaways 1m
- Adding a Separate Toolbar to Control What Our Speaker List Renders 2m
- Adding a Header and Toolbar to Our Speakers List App 4m
- Adding Local State Management to Our Toolbar 5m
- Lifting State for Sharing between Components 4m
- Keeping State Close to Where It’s Used 6m
- Moving Static Speaker Data to Local Component State 3m
- Updating Speaker State from the Speakers Card Component 4m
- Reacting to Events in Nested Components and Takeaways 5m
- Introduction 2m
- Handling Asynchronous Loading and State Updates 5m
- Adding Error Handling including Rendering Placeholder Graphics 5m
- Combining useState and useEffect to a Custom React Hooks 4m
- Normalize State Usage with Loading Status Instead of Booleans 4m
- Generalize the useRequestSpeakers Custom React Hook 6m
- Learning Functional Programming Techniques to Implement Callbacks in Components 4m
- Implementing a Completion Callback in Our Speaker Favorite Component 4m
- Implementing UI Progress Animations While Updating Records 4m
- Improve App Usability by Implementing and Optimistic UI for Updates 2m
- Changing Speaker Favorite Updates to Respond Optimistically and Takeaways 4m
- Why Use React Context? 3m
- Creating a Theme Context and Sharing It with Our Header Component 6m
- Introducing a Layout Component That Both Instantiates and Uses Our Theme Component 4m
- Extracting Our Theme Context to Its Own Dedicated Component and File 6m
- Separating State Management from Our Theme Context with a Custom React Hook 3m
- Create a Speaker Filter Context Synchronize the Toolbar and Speaker List 7m
- Adding More Controls to Our Speakers Toolbar 7m
- React Context Takeaways 1m
- Introduction 2m
- Building and Using a Dedicated Speaker Context 8m
- Adding Insert and Delete to Our Request Context’s Update Capability 4m
- Implement a React UI to Create and Delete Speakers 4m
- Implementing a REST Server Using API Routes from NextJS 4m
- Implement REST GET Using API Routes 4m
- Implement REST PUT POST and DELETE with API Routes 4m
- Update useRequestDelay to Persist Updates with REST 4m
- Integrate Changes including Handling Broken Images and Takeaways 4m
- Introduction to React Developer Tools 1m
- Motivation for React Debug Tooling 2m
- Working with the React Dev Tools Component Tab 3m
- Working with the React Dev Tools Profiler Tab 4m
- Fixing Our over Rendering Performance Problem 6m
- Adding Error Boundaries for Catching Errors in Production 4m
- Improving Our React Boundary Error UI and Takeaways 3m
- Introduction HOCs and Render Props 2m
- Learn Higher Order Component (HOC) Basics 6m
- Learn Render Prop Basics 3m
- Combine HOCs with React Context for Global State Management 2m
- Authoring Our withAuth HOC and Creating the Associated React Context 4m
- Consuming Our withAuth HOC in Our Header and AddSpeaker Components 4m
- Course Takeaways 2m
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