Create Components

A component is a reusable, independently source-controlled module, that is stored in scopes and maintained in workspaces. Components enable a new software development strategy that can be used to complement monorepos and poly-repos, or replace them, altogether.

Components can be of various types. Choose between a client-side component (React is used here as an example) and a server-side component.


React component
Node component

The following creates a component named apps/to-do using a component generator, provided by a react env. It sets my-org.tasks-scope as its scope name.

$bit
Copiedcopy
See command synopsis

The output is similar to the following:

1 component(s) were created my-org.tasks-scope.apps/to-do location: tasks-scope/apps/to-do env: teambit.react/react-env (set by template)

This component has a component ID: my-org.tasks-scope/apps/to-do. This ID consists of the component's scope name and component name. Component IDs are used by workspaces and scopes to reference components.

This components also has a development environment, or 'env'. An env is a also a component. It provides this component with pre-defined configuration and a set of development tools such as a , a , a , and more. Envs can be of different types. This component was configured (by the 'react-env' component generator) to use the React env (teambit.react/react).


Note: the component used for this demo is not identical to the one created in your workspace. The implementation for this component can be copied from the editor down below.

Component files

A component can be of different types. A NodeJS module, an Angular component, a CSS module, and so on. Since this component was created by the react template, the generated files are for a React component.

These files include standard React implementation files, as well as development files that are handled by the different tools ('env services') which are provided by the React env.

tasks-scope/apps/to-do
index.ts
todo.composition.tsx
todo.docs.mdx
todo.spec.tsx
todo.tsx

To learn about compiling, testing, documenting, rendering components in isolation ('compositions'), as well as other development procedures, see Running env services.

Head over to the workspace UI (http://localhost:3000/), to further explore the component (run bit start to run the UI server).

a screenshot of the to-do component UI

Component configuration and metadata

For a component to be independently consumable and maintainable, it must contain information regarding its dependencies, development tools, configurations, and more. This information is constantly being re-calculated during development, and once the component is versioned, it is persisted in the component snapshots.

Our new component is already configured with the React env, as well as a set of core 'Bit aspects', which are a certain type of components that compose Bit. The metadata of this component is the sum of data generated by these aspects (including the env).

To inspect the component's metadata and configuration run the following:

$bit
Copiedcopy
See command synopsis

The output is similar to the following. Click on the different sections to learn more about each of them.

┌───────────────────┬───────────────────────────────────────────────────────────┐
id │ my-org.tasks-scope/apps/to-do
├───────────────────┼───────────────────────────────────────────────────────────┤
scope │ my-org.tasks-scope
├───────────────────┼───────────────────────────────────────────────────────────┤
name │ apps/to-do
├───────────────────┼───────────────────────────────────────────────────────────┤
env │ teambit.react/react-env
├───────────────────┼───────────────────────────────────────────────────────────┤
package name │ @my-org/tasks-scope.apps.to-do
├───────────────────┼───────────────────────────────────────────────────────────┤
deprecated │ false
├───────────────────┼───────────────────────────────────────────────────────────┤
main file │ index.ts
├───────────────────┼───────────────────────────────────────────────────────────┤
files │ index.ts
│ to-do.composition.tsx
│ to-do.docs.mdx
│ to-do.spec.tsx
│ to-do.tsx
├───────────────────┼───────────────────────────────────────────────────────────┤
dev files │ to-do.spec.tsx (teambit.defender/tester)
│ to-do.composition.tsx (teambit.compositions/compositions)
│ to-do.docs.mdx (teambit.docs/docs)
├───────────────────┼───────────────────────────────────────────────────────────┤
aspects │ teambit.envs/envs
│ teambit.react/react
│ teambit.compilation/compiler
│ teambit.component/dev-files
│ teambit.compositions/compositions
│ teambit.pkg/pkg
│ teambit.docs/docs
│ teambit.dependencies/dependency-resolver
│ teambit.compilation/compiler
├───────────────────┼───────────────────────────────────────────────────────────┤
dependencies │ core-js@^3.0.0- (package)
├───────────────────┼───────────────────────────────────────────────────────────┤
dev dependencies │ @types/testing-library__jest-dom@5.9.5- (package)
│ @babel/runtime@7.12.18----------------- (package)
│ @types/jest@^26.0.0-------------------- (package)
│ @types/react-dom@^17.0.5--------------- (package)
│ @types/react@^17.0.8------------------- (package)
│ @types/node@12.20.4-------------------- (package)
├───────────────────┼───────────────────────────────────────────────────────────┤
peer dependencies │ @testing-library/react@^12.1.5- (package)
│ react-dom@^16.8.0 || ^17.0.0--- (package)
│ react@^16.8.0 || ^17.0.0------- (package)
└───────────────────┴───────────────────────────────────────────────────────────┘