Latest news about Bitcoin and all cryptocurrencies. Your daily crypto news habit.
As a react developer, I believe that everyone who is working on a react project must develop all the components separately for taking advantage from 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Ā )
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)
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)
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)
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 tools 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 š āReact popup, Modals, Tooltips and MenusāāāAll in one
Thanks for reading! If you think other people should read this post and use this component, clap for me,tweet and share theĀ post.
Remember to follow me on Medium so you can get notified about my futureĀ posts.
Tools you need to use in your react components development was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.
Disclaimer
The views and opinions expressed in this article are solely those of the authors and do not reflect the views of Bitcoin Insider. Every investment and trading move involves risk - this is especially true for cryptocurrencies given their volatility. We strongly advise our readers to conduct their own research when making a decision.