Start building from composable examples...
Wiki
Learn how to use component-driven wiki to power knowledge sharing.
Design
Create a scalable and consistent composable design system
Analytics
Build a composable and cross application analytics
Data Fetching
Build a component-driven data fetching
Basic React
Build a basic component-driven React application
Welcome to the Bit documentation site! This site is a composition of independent components, built and maintained mainly by the Docs, Design and Community teams here at Bit! It was built from React, Markdown, and Node components we have crafted specifically for the purpose and needs of this app.
During this quick start, you will learn to create your own composable wiki app. We will show you how simple it is to build a complex app like a Wiki using components! We will use the components built for this documentation app in this example.
Welcome to your component-driven wiki app!
This is the first component-driven wiki! Content pages are MDX components, and you can use any type of component from inside any wiki page.
Here is an example using our What is Bit component:
Bit is an open-source tool for composing component-driven software.
Bit stands at the intersection between product and engineering. It helps you take complex product requirements, and break them down into independent, and reusable pieces called "components". It allows you to create components and compose them with each other. Components are described by names and APIs, and contain source code implementation. They can be of different kinds like apps, pages, UI components, backend services and even content. You can think of almost anything in components.
People tend to think of components like apps as "bigger" and components like a button as "smaller", but for us they are the same size. Both Button and App are components, with different responsibilities. An App is the most "concrete" component with a dependecy graph and minor amount of dependents, and button is the most "abstract" component with just few dependencies and a lot of dependents, indicating higher reusability. They have different responsibilities but they are equal in size and importance.
Bit does not prescribe how you build your entire application. It helps you define and compose components and allows for every component to adopt the dev tools that best fit its nature. A React component might be compiled, tested and sometimes even deployed with a different composition of tools than a backend-service component, or a generic function. Bit comes with native support in various dev tools like TypeScript, Babel, Jest, Webpack, ESLint and ready made development environments for React, NodeJS, Angular and more. New tools can be easily integrated by adding one more component into Bit!
Anything is possible with Bit! We built Bit and bit.cloud entirely using Bit. These are complex systems which includes infrastructure tools, cloud products and multiple user interfaces.
People use Bit to create all kind of applications, from user interfaces with component-driven frameworks like React, Vue and Angular, to complex micro-service architectures, serverless functions, CLI utilities, desktop applications, native mobile applications and even IoT. You can do with Bit about anything you can do with JS and even beyond.
Bit was built with TypeScript and supports it natively. It was designed to be language-agnostic, and can support other software languages in the future! For now, our development environments use official TypeScript by default, to compile both JS and TS components and you can easily change to use Babel as a compiler or anything else, Bit has no opinion regarding your tech stack.
To get started, we would first have to make sure the bit binary is installed on your machine and configured to your PATH.
npx @teambit/bvm install
For a more advanced installation guide, head to our installation section.
The first step in the Bit journey is to initiate a new Bit workspace. It is a development workspace for distributed, component-driven software. You can create new components, use and modify existing components, and export your changes.
- Distributed. Developers can pull the specific components they need to work on from any project, whether it is a repo, monorepo or a new Bit workspace.
- Scalable. Scale from one to hundreds of components in a single workspace. Distribute to more worksapces as more people get involved for your codebases to stay small and easy to maintain.
- Tech agnostic. Designed to fit your tech needs - for example, React, Node and Angular components can be built and used in the same workspace.
To create a new workspace, run:
bit new react my-wiki --default-scope my-org.wiki
cd my-wikiStart the Workspace UI console:
bit start
tip
It is recommended to open an editor like VSCode on the workspace to start editing the components source code. To learn more on editor setup head here.
Bit was designed for gradual adoption and has a minimal footprint. You can use Bit to start building and sharing components from an existing project.
A component is an independent, reusable product that provides an interface for using it. You begin by designing the component interface to suit your own needs, and iterate over time to broaden support for new needs as they come. Design every component to serve your own needs, then iterate and grow to serve the needs of your fellow product teams, or even the entire world.
Components are described by names and APIs, and contain source code implementation. They can be of different kinds like apps, pages, UI components, backend services and even content. You can think of almost anything in components.
During this tutotial we will walk through building the components below. You can either create a new component, implement it yourself and use our component just as a reference or fork ours as a starting point.
Keep in mind you can record your progress at any time, push components to remote scopes and resume work later! Head over to the collaborate section and follow the step to push your changes to remote scopes at any time!
First, make sure to install react-router-dom in your workspace.
bit install react-router-dom@^6.0.0bit fork teambit.wiki/apps/wikiAlternatively, create a new component, and use the code from the component below as a reference!
# ..or create it yourself
bit create react apps/wiki
bit fork teambit.wiki/sections/wikiAlternatively, create a new component, and use the code from the component below as a reference!
# ..or create it yourself
bit create react sections/wiki
bit fork teambit.wiki/blocks/headerAlternatively, create a new component, and use the code from the component below as a reference!
# ..or create it yourself
bit create react blocks/header
bit fork teambit.wiki/blocks/footerAlternatively, create a new component, and use the code from the component below as a reference!
# ..or create it yourself
bit create react blocks/footer
bit fork teambit.wiki/content/welcomeAlternatively, create a new component, and use the code from the component below as a reference!
# ..or create it yourself
bit create react content/welcome
Now that we have done our work and all seems to be working locally, its time to share our changes and collaborate with others.
Bit tells you which components changed and their current status.
bit status
A Scope is a collaboration server for components. It enables you to export components created in your workspace, to have them stored remotely, and to collaborate on them with others. Other developers, with access to your scope, could either use your components or propose changes to them.
Scopes help organize components in a shared domain of responsibility. For example, the analytics scope will include all components that provide Analytics services, and the design scope will
include the services for our design language.
If you don't have a remote scope yet, it is a good time to create one! You can create and host scopes on bit.cloud for free or self-host your scope.
Create your free bit.cloud account
bit.cloud is free for open source and personal use. It is recommended to create your bit.cloud account prior to creating your workspace to ensure the right owner name for your components.
Create your accountIf you've created a new remote scope, to update it to be your default scope, use this command:
bit scope rename <old-name> <new-name> --refactor
The --refactor flag updates the components in your workspace with the new scope name, if you prefer to update manually, remove it:
bit scope rename <old-name> <new-name>
To record your component changes you can use:
bit snap --all --message "initial snap"
To release components in a new semantic version, use:
bit tag --all --message "initial tag"
Lanes are used to propose component changes to the component main history lane. To record changes on a Lane.
bit lane create my-feature
Then, use snap to record your changes into the Lane:
bit snap --all --message "my first lane snap"
After recoding component changes with snaps or tags, you can sync the staging changes with the defined remote scopes.
bit export
Bit automatically detects affected dependents in your Workspace. It is a best practice import few or more dependents and test your changes against them prior to releasing.
bit import blocks/header --dependents
Running test and build can test your modified components vs affected dependencies.
bit test
If you think you can build a better quick start, or just show anything else. Head over to the Quick start for creating Quick Starts, share your own and let us know about it!
- Read Thinking in Components
- Dive deeper into any of the topics.
