Resilient component libraries with React

In the world where frontend applications are becoming more complex and time constrained, we have to rethink best practices used in the past to adjust to fast changing business requirements without sacrificing the user experience and quality of the product. Instead of drawing static mockups and writing HTML and CSS, design systems and component libraries are becoming essential designer’s and developer’s tools.

The truth is, the way your component library is built will inevitably affect its adoption and quality of the product. If components aren’t flexible enough to match business requirements and time constraints, there will be hacks and workarounds — the source of endless bugs and maintenance issues. On the other hand, too much control over markup and styling can lead to inconsistent user interfaces and hurt user experience.

This workshop covers general architecture principles and React-specific techniques that lead to better components architecture and API design and are going to make teams be more productive and products be more consistent.

What will you learn

  1. Why building your own component library
  2. What makes a great component library
  3. How to name and structure your components
  4. How to create great APIs of your components
  5. How to write reusable and composable components
  6. Basics of components composition in React
  7. Compound Components
  8. Behavior Composition with React hooks
  9. Managing global state with React.Context