By Bogdan Stefan on September 29, 2016
All of the benefits of React – when combined with a single-page web app – can, however, lead to complications. Specifically, in the process of building a new component, you might feel the need to get visual feedback on it, for either styling or debugging matters. For example, previewing a button. Nonetheless, building and starting your entire application just for previewing that button is a slow and unnecessary process. This becomes more and more complicated if you’re using many components that have intricate relationships between them.
Read on to find out how we managed to solve this kind of problem and also how we improved the overall design experience for React developers.
Meet React Cosmos
In Hootsuite’s Bucharest office our front-end developers use a great open source tool for designing React components called React Cosmos. This DX (developer experience) tool provides your project with a powerful environment, in which you can easily:
- Render any of your project’s components under any combination of props and state – so you can easily see the output for a given input
- Observe how it reacts to prop changes in real-time, in a 2-way manner:
- Edit the props/state and see the component update
- Interact with the component and see its props/state change