DEV Community 👩‍💻👨‍💻

Elazizi Youssouf
Elazizi Youssouf

Posted on • Updated on

Tools you need to use in your react components development 

alt text

As a react developer, I believe that everyone who is working on a react project must develop all the components separately for taking advantage of that components philosophy behind this amazing front-end framework.
Developing components separately can help you gain control of your project workflow, which allows you to develop and test every component first without having to worry about the whole project logic, more than that with this approach you can improve the components reuse, testability and development speed, which will simplify the organization and the distribution of tasks within your team.  

If this is your first time to hear about storybook or react styleguidist, this article is your best place to start with, but if you have already heard about it or perhaps have worked with it, this article also is super helpful to know some amazing storybook alternatives. 

Let's started. 

Storybook : (21K Stars )

alt text

One of the most famous and powerful react tool to build components, that’s described in GitHub as an interactive UI component dev & test that support react, react-native, vue and angular. In other words, storybook is a development environment for UI components. It allows you to browse all your components project and view the different states of each component. Storybook comes with a lot of add-ons for components design, documentation, testing and much more. As an example, you can play with your component props easily using the storybook prop add-on.
You can use storybook-preview and storybook-deploy to generate and deploy your stories as a documentation static website. 

React Cosmos : (4k Starts)

alt text
Cosmos scan your project for component and enables you to render components under any combination of props, context, and state. That means if you have already started your project and you need to add new functionalities to your components without losing your mind. Cosmos will Mock every external dependency like your rest API or local storage. Also, you can see states evolve in real-time while interacting with running instances, to handle all those features, Cosmos uses the fixture and proxy architecture.

React Styleguidist : (4k stars)

alt text

React Styleguidist is a component development environment with hot reloaded dev server and a living style guide that you can share with your team. It lists component prototypes and shows live, editable usage examples based on Markdown files and it works with react create app out of the box.  

Catalog : (500 stars)

alt text
Catalog is a tool for creating living style guides for digital products. It combines design documentation and assets with real and live components in one single place. I think this tool is more powerful when you need to present your system design colors, typography, audio, video and of course, your react component, and much more inside your markdown pages and with multiple screen size options. 

There are also other tools like Atellier, Carte Blanche, React BlueKit, React Cards, React-demo.


If I Am missing a good tool feel free to share it with us in a comment. And if you are using any tools let me know your feedback and your experience about it?


Read from my feed.

Introducing reactjs-popup 🎉 —  Modals, Tooltips, and Menus —  All in one

Top comments (8)

Collapse
 
jlevyd15 profile image
Jeremy Levy

My team uses Styleguidist at the moment. It’s working out pretty well although demoing certain components doesn’t always work well with the way the demo screens at built with their default css. The live code editor is really cool and auto-documentation of props is very nice (JsDoc support as well)

Collapse
 
elaziziyoussouf profile image
Elazizi Youssouf Author

Yes,it look like all those tools have some kind of limitations specifically on css position and dragging behavior

Collapse
 
jlouzado profile image
Joel Louzado

Do these tools fall into any broad categories? As in, it doesn't seem like a team would use all of these right? I'm wondering what would be the minimum that I can deploy to my team with the lowest friction...

Collapse
 
elaziziyoussouf profile image
Elazizi Youssouf Author

Using storybook is so helpful in your case.

Collapse
 
declanpossnett profile image
Declan Possnett

Storybook looks great!

Collapse
 
dansyuqri profile image
Muhammad Syuqri

Thanks for the heads up on these! Really useful for a beginner like me :D

Collapse
 
elaziziyoussouf profile image
Elazizi Youssouf Author

Welcome 😊

Collapse
 
fortes profile image
Fortes

Thanks for sharing, I think MDX and some new mdx tools are really interesting in that field.

jxnblk.com/mdx-go/
jxnblk.com/mdx-docs/

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

⭐️🎀 JavaScript Visualized: Promises & Async/Await

async await