A Modern Approach to React Development
Build composable and modernized React apps with Bit!
Conventional development methodologies and tools face challenges when it comes to component isolation. With the growing complexity of applications, the task of managing and reutilizing components in and across various projects becomes progressively more demanding.
This is where Bit steps in to offer a modern and efficient solution.
Bit is a build system for composable sofware. With Bit, you can build components as independent pieces of code shared and collaborated via remote component hosting.
Software composability
A composable software or application is composed of loosely coupled and reusable components. These components can be re-arranged and reused to produce new features and projects.
Think of it as having your own toolkit of well-crafted components ready to be integrated into your React project. These components, encapsulated with their logic and styles, can be combined to create complex and feature-rich applications, like assembling building blocks.
This method offers many benefits, including:
- Enhanced maintainability: Complex applications become significantly easier to manage and update when composed of independent components.
- Improved reusability: Reusable components can be shared across different applications, saving time and effort and promoting consistency.
- Specialization and collaboration: Each team can specialize in specific parts of the application development (user management, APIs, forms, etc.) with a clear scope and share their components with other teams.
- Better testability: Independent and smaller components are more straightforward to test individually, leading to a more robust and reliable application.
Quick start on using React with Bit
Integrating Bit with your React project is simple and easy to do.
Step 1: Install Bit in your React project
First, use Bit’s version manager (bvm) to install Bit globally and then initialize a workspace with React.
npx @teambit/bvm install
bit new react my-workspace --env bitdev.react/react-envStep 2: Creating and tracking components
Once Bit is set up, use the Bit CLI to create and track components.
bit create react ui/my-buttonThis will create a Button component. You can build your component and code using standard React syntax. Once you’re ready to ship your component onto the world, you can run the command:
bit tag -m "create new button component"Sharing components is where Bit shines the most. Push your components to bit.cloud to make them accessible to your team or the broader community.
bit exportIf necessary, you can also publish your components to npm’s registry instead of Bit’s registry.
Step 4: Consuming Bit components in React applications
Now that your components are on bit.cloud, let’s explore how to consume them in other React projects.
Create a React application
In your workspace, create a new React application. We’ll be using a template for a Vite React app:
bit create react-app apps/my-react-appInstall any missing dependencies required by your new app:
bit install --add-missing-depsRun the app locally:
bit run my-react-appAlternatively, explore your app as a component in the workspace UI:
bit startYour app component should look something like this:
This is also a component. Unlike our button component, it can be deployed to cloud providers like Netlify and Vercel.
Importing Bit components
As shown above, you can consume these components like any other package. If the new React application is in a different workspace, you first need to install it:
bit install @my-org/my-scope.ui.my-buttonNext, you can import it like you’d typically would and continue using it:
import { MyButton } from '@my-org/my-scope.ui.my-button';The benefits of using Bit for React development
There are many benefits of using React with Bit. For a better understanding, let’s look at them in detail.
Bit components and React components
In React, a component is a JavaScript function that produces HTML elements and logic that handles events.
Bit components are more like modular repositories that contain source code, artifacts, and a list of dependencies. It is a collection of files related to a specific functionality or purpose.
Think of Bit components as packages. Each component will have its package.json file and be distributed with its package name.
Component-centric approach
Bit is a modern development tool that treats components as first-class citizens, making them easy to manage, organize, and share across projects.
Instead of dealing with cumbersome monorepos, you can focus on building and maintaining independent pieces of functionality.
Each Bit component is automatically compiled and available in the node modules of your workspace.
That means that you can import them like any other package. This simplifies development because you do not need to build your React libraries before you run your app; everything is already set up for you.
Isolation and dependency management
Bit keeps track of the dependency tree and can understand the components that rely on each other. It parses the compoentns source code to deceted depndencies and generate the package.json file automatically. It also categorizes dependencies as runtime, peer, and dev dependencies.
You do not need to manually create and maintain your library package file. Of course, you can still change it manually if you have any specific requirements in terms of dependencies.
Each component is then versioned independently, providing granular control over updates and changes. You do not need to wait for large-scale releases to push bug fixes and new features.
Bit’s collaboration and sharing capabilities
Bit facilitates developers’ collaboration and sharing of components by providing a centralized hub for your components. The bit.cloud platform is a repository where developers can discover, share, and collaborate on components. You can set up different levels of access to your organization’s code, and even non-developers can follow along and interact with the progress of your projects, providing valuable feedback.
This means that you can easily find out if your organization has already created the component that you need instead of reinventing the wheel. You can check its code, API, and documentation to see if it meets your expectations.
Effortless component documentation
Documentation is often an overlooked aspect of software development. Bit, however, makes it easy to generate and maintain documentation for individual components. This enhances collaboration and serves as a valuable resource for developers using shared components.
Besides markdown or MDX documentation, you can also create “compositions” or previews that simulate components in different variations for testing, visualization, and discoverability purposes. This is similar to other solutions like Storybook, except that it is already integrated, so you do not need to set it up.
Advanced component testing
Bit enables you to test components both in isolation and integrated into your applications.
When working on packages imported into different applications, a mono repository was previously the only solution to quickly test if your code changes were functional. But with Bit, you get the advantages of a mono repository while keeping the versatility of independent components. You can import everything in the same workspace locally to simulate a mono repository, but then every component is individually packaged and versioned.
Using Bit’s CI, named Ripple CI, you can ensure that your changes do not break your components’ dependents, as they can be automatically tested against the code you pushed to bit cloud.
If you’re new to Bit, I highly recommend you watch this introduction video to get a better understanding of the tool, its core concepts, and how they can be used to modernize your React development:
Conclusion
Bit and Ripple CI have drastically improved how to approach React development. It introduces a modern and efficient process for building composable applications. By embracing app composability, developers can create more maintainable, reusable, and testable applications while enhancing collaboration and productivity.
With its powerful features, seamless integration with React, and out-of-the-box support for Ripple CI, Bit is the ideal solution for developers seeking to elevate their React development skills and create the best web applications.
If you want to explore a sample application with Bit and React, feel free to explore this scope in Bit Cloud.
I hope you have found this useful.
Thank you for reading!
