React Component Generators

Component generators enable you to easily create new components. Generators include boilerplate code as well as configs, such as default env to be set for the component.

To add templates from your React dev environment to a workspace, add your env to the generator section in `workspace.jsonc`:

{
  "teambit.generator/generator": {
    "envs": ["my-org.my-scope/envs/my-react-env"]
  }
}
CopiedCopy

Run the following to list the available component templates for react-env:

$bit
Copiedcopy
See command synopsis

You should see the following templates - note the output includes the env they are associated with:

react-env (my-org.my-scope/envs/my-react-env)
react-env
react
react-js-component
react-hook
react-context
react-app

Use bit create with any template to generate a new component:

$bit
Copiedcopy
See command synopsis

Create a Custom Generator

You can also create your own component generators, and expose them via your custom env.

To create your own custom generators, we recommend starting by forking the default React generator component:

$bit
Copiedcopy

See the Create Component Generators section for more information on creating custom generators.

Once your generators are ready, ensure to import your custom templates and register them to your env:

// my-react-env-env.bit-env.ts
import { MyReactEnvGenerator } from '@my-org/my-scope.generators.my-react-env-generator';

export class MyReactEnv extends ReactEnv {
  generators() {
    return TemplateList.from([
      MyReactEnvGenerator.from(),
    ]);
  }
CopiedCopy
info

Make sure to run bit compile after adding the new generators - you can run bit watch to automatically compile on changes.