" The secret to efficiently building ‘large’ things is generally to avoid building them in the first place. Instead, compose your large thing out of smaller, more focused pieces. This makes it easier to see how the small thing fits within the broader scope of your large thing. These concepts apply to existing ways of doing things, including Web Components. "
A. Osmani
Bit is the fastest and simplest way to share React components, create beautiful galleries reuse components between apps. With Bit, you can easily share components from any React applications, organize them for your team and use them in other applications with NPM and Yarn. It saves the overhead of keeping component in separate repos just to publish packages, makes maintenance much easier with component source code distribution and provides great discoverability. Here are some popular React libraries turned into Bit collections (do the same for your own lib). And here you can explore thousands of React components to build your apps!
React components provide greater modularity which is great for code sharing, reuse, maintenance, testability and separation of concerns. They also help you split your UI into independent, reusable pieces and think of them in isolation.
To help you build your next React application with a great UI, here are some popular and useful resource for working with React components in 2018. Enjoy.
Storybook is a 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 runs outside of your app. You can develop components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies.
Built at WalmartLabs Electrode is a platform for building small to large scale universal ReactJS/NodeJS web applications with a standardized structure, best practices, and modern technologies baked in. Electrode focuses on performance, component reusability, and simple deployment to multiple cloud providers—so you can focus on what makes your app unique.
With over 30k stars on GitHub, it is probably the most popular React component library. The project is still under heavy development which is directly sponsored by the community. You can also check out the project's documentation website and There are 3 projects that you can look at to get started.
React components with the look and feel of Bootstrap 3. At over 12K stars on GitHub and thousands of users t's still under development.
Gatsby is a powerful and simple static site generator for React. It can help you transform any plain text into beautiful React websites without the overhead of setting up, deploying and maintaining complicated databases and servers. For developers already working with React, it can save a lot of time and effort while making sure your work looks awesome.
React component IO © 2018
A neat selection of essential components organized by usage classifications which are all accessible, cross-browser compatible and support theme adjustments.
React components written in TS and following the Ant Design specifications which can be used with Webpack and NPM to build rich UIs.
Semantic UI is used by Netflix and Amazon, and it's React integration which includes a set of components is popular with over 5k stars.
With nearly 6k stars these components are made available through Onsen UI's React integration with hybrid mobile apps.
Developed by a team at Google these components replaced React MDL reaching nearly 7k stars on GitHub.
React component written by team members of the styled-components and polished projects with highly configurable styles and hybrid adaptivity.
React components built by Khan academy with inline CSS and released to the community with an MIT license.
These React components implementing Google's material design working with SASS, ES6 and webpack reached 8k stars on GitHub.
At over 8k stars it's a collection of React UI components that cover the majority of the common interface elements, patterns, and interactions on the web.
Atlassian's UI library built according to their design guide lines (ADG). a collection of reusable components that can be downloaded independently into your projects with NPM.
With over 60 components it's a rich collection of UI components for React which also a verity of themes and optimized native templates.
React components with Bootstrap 4 which favor composition and control. The library does not depend on jQuery or Bootstrap javascript.
An open source collection of awesome tools, libraries and other things related to React's ecosystem.
At 12k stars it's a useful catalogue of React components and tools to build your UI.
React.js provides a low barrier to entry for any developer with decent Javascript skills. It's basically view oriented and not a heavy VM framework. As such, onboarding to start working with React components is simple with a short learning curve.
React.js components, from simple components like "button" or "slider" to higher level wrapper components, help you "think React" and increase the modularity of your application while making it's different building blocks more reusable.
This reusability helps you achieve desired outcomes. First, it improves the consistency of your UI throughout your application, and given the right sharing, throughout all your apps and platforms. Keeping a consistent UI is key in your costumer's experience and empowers the impression your application leaves on its users while strengthening your brand. A consistent UI is not something which is easy to achieve or to be underestimated.
Reusability through React components also makes it easier to develop and test your app, and makes maintenance simpler by separating concerns. It also helps to shorten the learning curve for new developers to join your team's work, and given the right tooling saves times by not reinventing the wheel over and over again.
Feel free to get started with React and build your amazing app!