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.

Introduction

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.

Your first component-driven wiki

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.


What is Bit?

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.

What can you do with 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.

What Bit supports?

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.

Installation

To get started, make sure the bit binary is installed on your machine and configured in your PATH variable.

$npx @teambit/bvm install
Copiedcopy

For a more advanced installation guide, head to our installation section.

Create workspace

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.

To create a new workspace, run:

$bit
Copiedcopy

$cd my-wiki
Copiedcopy

Run the Workspace UI to preview your components:

$bit
Copiedcopy
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.

Components

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.

Building the 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!

1
teambit.wiki/apps/wiki
We start with Building the Wiki-app. This will use other components to add the functionality and content. To learn more about apps in Bit you can continue reading the Docs or skip to the Apps section.

First, make sure to install react-router-dom in your workspace.
bit install react-router-dom@^6.0.0
CopiedCopy
You can either fork the component.
bit fork teambit.wiki/apps/wiki
CopiedCopy
After forking, please make sure `import` statements point to the component of your choice and change as needed.
Alternatively, create a new component, and use the code from the component below as a reference!
# ..or create it yourself
bit create react apps/wiki
CopiedCopy
2
teambit.wiki/sections/wiki
After adding the App to our workspace (either by using fork or create), we are now adding the wiki component. Our App will use the wiki component to get all the functionality it needs.
You can either fork the component.
bit fork teambit.wiki/sections/wiki
CopiedCopy
After forking, please make sure `import` statements point to the component of your choice and change as needed.
Alternatively, create a new component, and use the code from the component below as a reference!
# ..or create it yourself
bit create react sections/wiki
CopiedCopy
3
teambit.wiki/blocks/header
Now we have the functionality we need, but we would also like some structure to the page, so we are adding a header and footer component. Starting with the header:
You can either fork the component.
bit fork teambit.wiki/blocks/header
CopiedCopy
After forking, please make sure `import` statements point to the component of your choice and change as needed.
Alternatively, create a new component, and use the code from the component below as a reference!
# ..or create it yourself
bit create react blocks/header
CopiedCopy
4
teambit.wiki/blocks/footer
And now we add the footer! You can choose to skip this component and you will still have a working app, with only a header.
You can either fork the component.
bit fork teambit.wiki/blocks/footer
CopiedCopy
After forking, please make sure `import` statements point to the component of your choice and change as needed.
Alternatively, create a new component, and use the code from the component below as a reference!
# ..or create it yourself
bit create react blocks/footer
CopiedCopy
5
teambit.wiki/content/welcome
It's time to add some content to this Wiki! Here is an example of a content component. You can ask your whole team to contribute to the content by creating their own content components. See next section on how to collaborate with Bit!
You can either fork the component.
bit fork teambit.wiki/content/welcome
CopiedCopy
After forking, please make sure `import` statements point to the component of your choice and change as needed.
Alternatively, create a new component, and use the code from the component below as a reference!
# ..or create it yourself
bit create react content/welcome
CopiedCopy

Collaborate

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
Copiedcopy

Create a remote scope

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.

Once you've created a new remote scope, update the defaultScope property of your workspace to the new scope name:

$bit
Copiedcopy

Snap your changes

Run the following to record your component changes:

$bit
Copiedcopy

Run the following to record your component changes and tag them with a semantic release version:

$bit
Copiedcopy

Create a Lane (alpha)

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):

$bit
Copiedcopy

Once a new lane has been created (and automatically, switched to), you can run the following to record component changes in that lane:

$bit
Copiedcopy

Export changes to remote scopes

After recoding component changes with snaps or tags, you can sync the staging changes with the defined remote scopes.

$bit
Copiedcopy

Be aware to how changes affect others

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.

$bit
Copiedcopy

Running test and build can test your modified components vs affected dependencies.

$bit
Copiedcopy

Have an idea for your own Quick Start?

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!

What's next?