React has become the king of Javascript UI frameworks, with a tremendous rise in users, and reaching no less than 50000 stars on Github. It’s easy to see why: it allows building truly reusable UI components more easily than other competitors. It is also fast, sturdy and reliable.

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

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:

  1. 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
  2. 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
Cosmos is a great tool and it helps frontend developers like me every time we need to create a new component or tweak something to an existing one. Being an open source project, Cosmos aims to make it easy to integrate it in any other project. To do that you only need to write some fixtures for your components. A fixture is simply a snapshot of the component, a serialization of its state and props at a given moment. Then, point Cosmos at those fixtures and you’re ready to go.

Read More …