Designing React 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.
Course info
Level
Intermediate
Updated
May 29, 2020
Duration
2h 43m
Table of contents
Course Overview
Designing Better Components with React
Add Component Styles with Tailwind CSS
Building a React Web App and Refactoring into Components
Implementing Higher Order Component (HOC) and Render Props
Using React Context and the useContext React Hook for Component Data Sharing
Master Performance Monitoring, Error Reporting, and Debugging of Components
Component Techniques Including Optimistic UI and Course Takeaways
Description
Course info
Level
Intermediate
Updated
May 29, 2020
Duration
2h 43m
Description

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 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 how Higher Order Components (HOCs) and Render Props have led the way in achieving code separation. 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.

About the author
About the author

Peter is the founder of Silicon Valley Code Camp and long-time software professional specializing in mobile and web technologies. He has also been a Microsoft MVP in ASP.NET since 2006.

More from the author
ASP.NET Core Tag Helpers and View Components
Intermediate
3h 1m
Aug 23, 2019
Using React Hooks
Beginner
1h 53m
May 3, 2019
More courses by Peter Kellner
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi. I'm Peter Kellner, and welcome to my course, Designing React Components. I'm a part‑time docs writer for Microsoft, part‑time author, part‑time conference organizer, and full‑time learner. Creating UIs in React is all about creating independent components that seamlessly work together to present a consistent view across your web app. The right component design ensures that as the data in your application changes, just the right components rerender. You will learn the techniques and develop the skills in this course to ensure that the components you design are up to delivering the best experience possible. Some of the major topics that we will cover include best use of the latest JavaScript features like object destructuring and spreading, the architecture and usage of higher order components and render props, combining React context with custom hooks to build the ultimate solution for component data and functionality sharing, using the React developer tools to understand exactly what is going on inside your components, including diagnosing and fixing performance problems. Finally, we'll look at some advanced component techniques such as error boundaries to catch and handle errors and an advanced optimistic UI technique to make your app appear to respond instantly to slow server responses. By the end of this course, you'll feel comfortable designing full‑featured, real‑world, high‑quality React components. Before beginning this course, I recommend you have completed the React: Getting Started course or have equivalent knowledge. This is Designing React Components. Let's get started.