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.

Who is this workshop for

Frontend React developers with a solid understanding of HTML and CSS who are challenged with building a UI component library that is coupled with their design system. You'll need an intermediate to advanced level of understanding React concepts and you need to be proficient in writing functional components using React hooks. This workshop won't teach you writing React code but instead will focus on code organization, API design, and making your components reusable.

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