Create Components

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 create react apps/to-do --scope my-org.tasks-scope --aspect teambit.react/react-env

Copied

The output is similar to the following:

deprecated

• first to-do!

apps

to-do

A to-do app component

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 compiler, a tester, a linter, 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.

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

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 show apps/to-do

Copied

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