Skip to main content

Creating Components

Once you have initialized a Bit workspace you can create components using the bit create command. Alternatively you can add pre-existing components using the bit add command.

Quick Guide#

For those that don't like reading docs feel free to follow the quick guide at the top of each page.

  1. Create an example component and add it to the workspace
bit create react-component ui/button     # TypeScriptbit create react-component-js ui/button  # JavaScript
  1. Install dependencies for test files
bit install @testing-library/react
  1. Compile and then start the dev server
bit compilebit start

Create New Components#

Use bit create to create an example button component with the namespace of ui. This will also create a package in your workspace node_modules directory and add your component to the workspace UI. It will also add your component to the bitmap file.

To see a list of all available templates run the bit templates command.

bit create react-component ui/button

is the same as using the --namespace flag:

bit create react-component button --namespace ui

The following message will appear in the terminal and your component will be created at the location specified and using the env that has been set in your workspace.jsonc.

the following 1 component(s) were created
my-scope/ui/button    location: my-scope/ui/button    env:      teambit.react/react
tip

Use bit create --help or bit create -h to get a list of available options for this command.

Install Dependencies#

Our component contains a spec.tsx file that includes a dependency for Testing Library. If you don't already have this library installed you can install dependencies using bit install:

bit install @testing-library/react

Create Multiple Components#

Create multiple components by adding more component names after the command.

bit create react-component ui/component1 ui/component2 design/component1
Reset DevServer

You will need to reset the Dev Server every time you use bit-create. We are working on this.

Bit Templates#

To see a list of component templates available:

bit templates

If you would like to create your own component template generator then check out our guide in Extending Bit

Add Pre-existing Components#

Each component in a Bit workspace must have all its implementation files under the same directory. A component must have an entry file (index.[ts|js] is used as the default.

my-component├── index.ts├── my-component.compositions.tsx├── my-component.docs.md└── my-component.ts

To add your component to the workspace run the bit add command followed by the namespace. The namespace is the component folder structure you would like to see in your workspace.

bit add button --namespace ui

For recommendations on how to add pre-existing components see our pre-existing components guide

Add Multiple Components#

To track multiple components, set the path to the common directory and use the * wildcard.

bit add path/to/common/path/*

Namespaces#

Namespaces serve as folders that organize components in the Workspace or inside a scope on bit.dev. You can use namespaces inside a scope to group related components.

To namespace a component use the --namespace or -n option.

Specifying a namespace helps you organize your components and lets you perform actions on multiple components at once. Namespaces are also useful in specifying overriding rules for all components under a specific namespace.

Component Location#

Components are created in a directory using the name configured in your defaultScope in your workspace.jsonc. The defaultScope should be configured as your username.scope-name and cannot contain a /. If you would like to change the default behavior of where you components are created you should use the --path flag.

bit create react-component ui/button --path bit/components
Organizing your Components

We don't recommend creating Bit components in your apps src/components folder. You should build components as if they were external modules, as if your components were in a different app.

Bitmap File#

After adding a component the .bitmap file will be regenerated to show the added component. For now the scope and version will be empty. Below is an example of button component created with the ui namespace.

/* THIS IS A BIT-AUTO-GENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. */
{  "ui/button": {    "scope": "",    "version": "",    "mainFile": "index.ts",    "rootDir": "my-scope/ui/button"  },  "version": "1.0.39"}
my-scope

Components are created under the default scope name which in this case is my-scope. You can configure the default scope name in the workspace.jsonc file.

Show Component#

Use the bit show command followed by your ComponentID to see all details about the component including the env, the files and the dependencies.

bit show ui/button
tip

Use bit show --help or bit show -h to get a list of available options for this command.

  ┌───────────────┬────────────────────────────────────────────────────────────────────┐  │ id            │ my-scope/ui/button                                                 │  ├───────────────┼────────────────────────────────────────────────────────────────────┤  │ scope         │ my-scope                                                           │  ├───────────────┼────────────────────────────────────────────────────────────────────┤  │ name          │ ui/button                                                          │  ├───────────────┼────────────────────────────────────────────────────────────────────┤  │ env           │ teambit.react/react                                                │  ├───────────────┼────────────────────────────────────────────────────────────────────┤  │ package name  │ @my-scope/ui.button                                                │  ├───────────────┼────────────────────────────────────────────────────────────────────┤  │ main file     │ index.ts                                                           │  ├───────────────┼────────────────────────────────────────────────────────────────────┤  │ files         │ button.composition.tsx                                             │  │               │ button.docs.mdx                                                    │  │               │ button.tsx                                                         │  │               │ button.spec.tsx                                                    │  │               │ index.ts                                                           │  ├───────────────┼────────────────────────────────────────────────────────────────────┤  │ dev files     │ button.docs.mdx (teambit.docs/docs)                                │  │               │ button.spec.tsx (teambit.defender/tester)                          │  │               │ button.composition.tsx (teambit.compositions/compositions)         │  ├───────────────┼────────────────────────────────────────────────────────────────────┤  │ extensions    │ teambit.react/react                                                │  │               │ teambit.component/dev-files                                        │  │               │ teambit.compositions/compositions                                  │  │               │ teambit.pkg/pkg                                                    │  │               │ teambit.docs/docs                                                  │  │               │ teambit.envs/envs                                                  │  │               │ teambit.dependencies/dependency-resolver                           │  ├───────────────┼────────────────────────────────────────────────────────────────────┤  │ dependencies  │ core-js@3.8.3- (package)                                           │  ├───────────────┼────────────────────────────────────────────────────────────────────┤  │ dev           │ @testing-library/react@11.2.6- (package)                           │  │ dependencies  │ @babel/runtime@7.12.18-------- (package)                           │  │               │ @types/react-router-dom@5.1.7- (package)                           │  │               │ @types/jest@26.0.20----------- (package)                           │  │               │ @types/react@16.9.43---------- (package)                           │  │               │ @types/node@12.20.4----------- (package)                           │  ├───────────────┼────────────────────────────────────────────────────────────────────┤  │ peer          │ react@16.13.1----- (package)                                       │  │ dependencies  │ react-dom@16.13.1- (package)                                       │  └───────────────┴────────────────────────────────────────────────────────────────────┘

Starting the Dev Server#

The start command starts our dev server, and watches for changes using Hot Module Replacement. It runs different workspace tasks through workers, such as testing, linters and any workspace tasks that are defined by the component.

Compile Components

If you created or added a new component, you will need to compile before running the server. If you are following along this guide, you should run bit compile to compile your newly created components.

bit compilebit start

This will open-up your browser on localhost:3000, or any other available port, and display your workspace with your components.

Building the UI

The first time you run the start command it can take a bit of time as it needs to build the whole UI.

tip

Use bit start --help or bit start -h to get a list of available options for this command.

FAQ#

1 issue found with this component?#

Run bit status in the terminal to get a better understanding of what the issue is and what steps to take.

What's Next?#

Once you have created and added your component to the workspace the next step is to render the Workspace UI so you can see the component locally.

Learn more about tracking components and removing components