Log in
Cristobal Chao
Cristobal Chao
Cristobal Chao is a software engineer, UX specialist and founder of Torii Studio, a studio that helps small to large companies implement front-end processes and systems that are easier to scale efficiently while building beautiful UI/UX products. Prior to forming Torii Studio, Mr. Chao worked as a Software Engineer in companies like Google and Oracle. Also, he worked as the first software engineer for Hattery Labs, a front-end consultancy acquired by Google in 2013. At Google, he worked as part of the Material Design team building the first two versions of Material Design, as well as evangelizing the systems across Google Search, Maps and Google for Work.
Torii, USAcrchaocristobalchao
React Day Berlin 2022React Day Berlin 2022
10 min
Accelerate Innovation
Designers and developers work on different timelines—designers look to the future while developers build from what’s already been designed. They speak different languages and follow different processes. How can we bridge these gaps and build a more collaborative development process? This talk will showcase how design systems can improve communication between cross-functional teams—while boosting productivity and innovation.
performancedeveloper experience
React Day Berlin 2022React Day Berlin 2022
156 min
Innovate with React
Workshop Free
In this workshop, you will learn how to create a Custom Component System from scratch in React, and take it to the next level.
You will learn best practices when building a Component System, as well as the tools that you can use to be a more effective collaborator with other cross-functional teams.
What's included
1. Introduction
2. Learn the fundamentals of a Component System
3. Setting up the development environment
4. Importing fonts
5. Choosing a base React Component Library
6. Writing our first components
7. Setting up a centralized theme
8. Writing custom styles to inject to our components
9. Injecting icons to our components
10. Adding hooks
11. Making components responsive
12. Adding dark mode
13. Deploying your Component System
14. Exporting your Component System to a design tool
15. Prototyping with your production components
react