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 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.
It is common to think of components that function as full applications, as "large", whereas components that function as simple elements, like a 'button', as "small". For us, both types of components are "the same size", but each has a different responsibility. An app is a very concrete component. It has many dependencies and just a few (if any) dependents. A button, on the other hand, is very abstract. It has just a few dependencies and many dependents. Having this sort of dependents-to-dependencies ratio indicates that a component is highly-reusable.
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.
It is common to think of components that function as full applications, as "large", whereas components that function as simple elements, like a 'button', as "small". For us, both types of components are "the same size", but each has a different responsibility. An app is a very concrete component. It has many dependencies and just a few (if any) dependents. A button, on the other hand, is very abstract. It has just a few dependencies and many dependents. Having this sort of dependents-to-dependencies ratio indicates that a component is highly-reusable.
Bit does not prescribe how to 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 is likely to be compiled, tested and perhaps even deployed using a composition of tools different than the one a backend-service component, or a generic function, may use. Bit offers native support for 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 extending Bit with one more component.
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 will support other software languages in the future! For now, our development environments use TypeScript as the default compiler for JS and TS components. You can easily switch to Babel or any other compiler. Bit is completely agnostic to your tech stack.
To get started, make sure the bit binary is installed on your machine and configured in your PATH variable.
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'd like to maintain, whether they're currently working in a repo, a 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:
Start the Workspace UI console:
Using your IDE
Open the workspace directory using your IDE to start editing your components' source code. To learn how to set up your IDE see Set up your IDE.
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, iterating over time to increase support for new needs as they come. Design every component to serve your needs, then iterate and grow others needs, 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 tutorial 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.
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, can 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 accountOnce you've created a new remote scope, update the defaultScope property of your workspace to the new scope name:
Run the following to record your component changes:
Run the following to record your component changes and tag them with a semantic release version:
By default, component changes are recorded on the main lane. You can create a new lane and use it to propose changes to multiple-components (in the main lane):
Once a new lane has been created (and automatically, switched to), you can run the following to record component changes in that lane:
After recoding component changes with snaps or tags, you can sync the staging changes with the defined remote scopes.
Bit automatically detects affected dependents in your Workspace. It is a best practice to import few or more dependents and test your changes against them prior to releasing.
Running test and build can test your modified components vs affected dependencies.
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.
