9 React Libraries and Tools to Master your Component Workflow
Stack overflow’s survey for 2017 ranked React as the most popular technology, and the one most loved by developers around the world.
Here is a curated (unranked) list of 9 tools that can make all the difference when it comes to your React components, and help you develop a beautiful modular component-based UI that fulfills your app’s true potential.
These tools are all open source and are valuable players in the React eco-system. If you have suggestions of your own, feel free to share. For popular UI component libraries and frameworks, you can also check out this list for 2018.
1. Bit
Bit helps you turn your components into building blocks which can be organized and used in multiple projects and apps.
With Bit, you can simply choose components from any of your repos, let Bit isolate them for you and share them to the cloud — without changing a single line of code in your project, creating new repos or configuring anything.
From there, they can be installed with NPM / Yarn just like any other package. Bit also makes it possible to change the components you sync from any other project with 2–way code changes, creating a distributed dev workflow.
You can use Bit’s hub to organize a visual collection of your components, which will be presented with live examples, rendering, docs and more.
2. Storybook
Storybook is a rapid development environment for UI components.
It allows you to browse a component library, view the different states of each component, and interactively develop and test components.
Storybook will help you develop React components faster by adding an environment where you can actually see and showcase your components while playing with their properties, with hot-reloading on the web.
Different plugins can help make the process even better, so you can feel like an artist and shorten the cycle between code tweaking to visual output.
Apart from React, Storybook can also be used with Vue and angular projects. Definitely worth checking out for your next UI project.
- Also check out: React live by Formidable labs.
3. Styled Components
With an idea born in an Australian Whisky bar, the crown jewel of the CSS-in-JS evolution, styled-components, aims to make it really easy to use CSS in your React components.
Basically, this project lets you define styled-components that posses their own encapsulated styles so that styling becomes an actual part of your components while avoiding the use of CSS classes as a mediator layer.
Styled-components are created by defining components using the ES6 template literal notation. CSS properties can be added to the component as needed, just like you would do normally using CSS.
When the JavaScript code is parsed, styled-components will generate unique class names, and inject the CSS into the DOM. styled-components also supports media queries, pseudo-selectors, and nesting.
This project is growing in popularity to become the go-to choice for styling React components, and is definitely worth checking out for your next app.
- Also check out: Stylable by Wix-Eng which is still in development, but looks interesting.
4. Codesandbox
Codesandbox is a live web playground for your React components, which on its client own was bootstrapped with create-react-app.
It’s an online code editor with hot reload tailored for web application development, which provides useful integrations from automatic prettying and linting to installing NPM dependencies in your sandbox, exporting your project to GitHub and even embedding your sandboxes in other platforms.
Codesandbox is already hosting over 80k projects including some of the React examples, which you can search through using an Algolia search-engine (like the one you know from the official React docs).
The guys behind the project aim to add features to support importing for existing GitHub projects, and even paid plans for private sandboxes.
5. React Cosmos
The react-cosmos project is a dev-tool for “creating reusable React components”.
Cosmos isn’t limited to the stateless parts of your UI. This project “scans” your app for React components and lets you render components with different states and props while mocking external dependencies, so you can see your app’s state in real-time.
The people behind the project explain that “Focusing your work on one component at a time beats rendering the entire app only to see updates on the part you’re performing surgery on”.
This way, react-cosmos can be used as a “dashboard” to change and test each component in isolation. This tool can also be an interesting combination with Bit, which provides an isolated build and test environment to develop components outside of your project’s context.
6. UiZoo.js
UiZoo.js is a rather anonymous yet very useful dynamic React component library that showcases your components, letting you develop them in an isolated environment and browse what you already have and can use, with a reduced amount of effort.
You can provide the components and their docs to UiZoo.js, which in turn creates a page for each component, as well as a sidebar to search and filter the available components.
Using JSDoc it will parse your component’s documentation to show visual information on your component’s page, including description, possible props and full JSX examples. Using its own version of Doctrine, the project supports a wide variety of JSDoc tags.
This tool can be used for application development as well as for UX / Product designers as a live playground to collaborate and build a beautiful React app.
7. Apollo with React
Apollo Client is a community-driven effort to build an easy-to-understand and flexible GraphQL client, which provides JavaScript client with bindings for popular frameworks like React.
The Apollo + React integration can be a useful combination that allows you to fetch data from your GraphQL server and use it in building UIs using React. React Apollo may be used in the browser, in React Native, or in Node.js when you want to do server-side rendering.
React Apollo also works out of the box with both create-react-app and React Native with a single install and with no extra hassle configuring Babel or other JavaScript tools.
GraphQL components (including apollo-client) can also be combined with Bit, to organize a sand-box collection of your API’s components which can be easily used and changes from any user project.
Here is an example with GitHub’s GraphQL API.
8. Radium
Although there are many CSS-in-JS libraries including Aphrodite, Glamor, Glamorous (by Paypal), Emotion and more, Radium is probably one of the most underrated projects on this list, and here is why.
Radium is a set of tools to manage inline styles on React elements which gives you powerful styling capabilities without CSS. While there are some common CSS features and techniques that inline styles don’t easily accommodate: media queries, browser states (:hover, :focus, :active) and modifiers, Radium offers a standard interface and abstractions for dealing with these problems.
It lets you bundle up styles with your React components, coupling javascript, html, and styling together. It also provides props-based rendering, allowing you to style your components based on the state of your app.
For those of you looking for the right CSS-in-JS solution and don’t want to work with styled-components, Radium should probably be on the short-list.
9. React Sketch.app
For the UI designer / dev among you, React-sketchapp is Airbnb’s open source project built for design system which enables the rendering of React components using Sketch.
This project is another step in bridging the gap between application design and UI development. From the design perspective, it provides many incredible innovations such running multiple examples at once, while re-rendering the output to Sketch (like hot reloading for sketch).
The major breakthrough of this project is the brave step towards closing the gap between UI design and implementation, while letting both sides shorten iteration cycles and keeping sync even when changing stuff over time.
Conclusion
React brings us modularity through isolated, reusable components to build our UI. However, to unleash the full potential of you components you can leverage additional tools from the community to improve your workflow.
From sharing components between apps with Bit to styling with styled-components or using storybook to render and play with components in isolation, and all the way to less familiar projects like UiZoo and others, the React ecosystem is growing rapidly to help you build an amazing UI.
Hope this review is useful, and feel free to share your own suggestions in the comments so everyone can use them to build great stuff. Cheers, Jonathan.
