@teambit/react

Website | Docs | Community | Bit Cloud

Bit is a build system for development of composable software. It makes the composition of applications from independently versioned components seamless and fast.

Bit is similar in sense, but stands as the opposite for the "Monorepo" approach, which aims to center all code under a central repository. Instead, Bit is bringing simplicity for distribution of source code into independently versioned components, depending on each other.

People often use Bit to run a Monorepo, a Polyrepo or without using repositories at all.

The core innovation of Bit is the "Bit Component", a composable and versioned container for source code, whereas dependencies are first-class citizens. Components can be used as packages, ESM modules, runtime scripts, and any other artifact a build task can generate.

• 📦 Descriptive module names. Use components through descriptive package names. No aliases required.
• 🚀 Dependency versioning. Automatic detection and versioning of dependency changes. No more redundant package.json files.
• ⚓ Reusable development environments. Reusable components including all of your dev config. No more duplication of countless tsconfig.json, eslintrc or pretterrc configs.
• ⚒️ Build pipelines. Independently build and store packages, bundles, and binaries.
• 👓 Preview and auto-generated docs. Every component is an asset with auto-generated docs and component previews.
• 🛫 Change review. Use Lanes to propose and preview changes and collaborate on them with others.
• 🧑‍💻 Component generators. Create new components using pre-built or custom templates for any type of component.

Getting started

Install Bit

Use the Bit installer to install Bit to be available on your PATH.

npx @teambit/bvm install

For better VSCode dev experience, install the Bit VSCode Plugin.

Create a new workspace

Run the following to create a workspace with a few components included, using the hello-world starter:

bit new hello-world my-hello-world --env teambit.community/starters/hello-world

For the quick start, we use two React components and one Node module, though you can create components using any JS-based framework. You can explore our official starters for Vue, Angular, and other supported tools or learn how to create your own.

Run the app

Your workspace maintains a number of components. One of these components is also an app. Run it using:

bit run hello-world-app

You can get any component to become an app by adding a single file to it.

Create components

Start creating components using the default component generators, or create your own.

bit create react buttons/button

You can view other built-in component templates, by running the bit templates command.

Use components

After creating a new component, start using it by adding an import statement in one of your workspace components.

import { Button } from '@org/scope-name.buttons.button';

Once added, Bit will autodetect the dependency between these components. Use bit show or the VSCode plugin to view the list of dependencies Bit detected for your components.

Create a remote scope

You can either use hosted scopes on Bit Cloud or by hosting scopes on your own. Use the following command to create your Bit Cloud account and your first scope.

bit login

Once done, change to your own owner and scope names using this command:

bit scope rename org.scope-name my-org.my-scope-name --refactor

This command will refactor your components to use the new owner and scope names.

Record component and dependency changes

Run snap or tag to record component changes, and assign a semantic version to them. Bit will version the dependents graph of each modified components.

bit snap --message 'initial release'

Snapped components are ready to be built upon 'export' (see next step). The build artifacts will also be stored in the component's new version ('snap').

By default, components are built using bit.cloud's CI platform, Ripple CI. However, you can run the components' build locally by adding the --build flag, or use your own CI platform. To learn more see Set up CI.

Export components to a remote scope

Export your staged components from your workspace to their remote scopes. This will make them available to be used by components outside of your workspace, and from your other projects.

bit export

Head over to your bit.cloud account to see your components build progress. Once the build process is completed, the components will be available for use in their remote scopes. 🎉🎉🎉

Contributors

Bit is entirely built with Bit and you can find all its components on Bit Cloud.

Your contribution, no matter how big or small, is much appreciated. Before contributing, please read the code of conduct.

See Contributing.

License

Apache License, Version 2.0