React Component Generators

Component generators are pre-configured templates that make it easy to create new components already scaffolded with much of their boilerplate code and configuration.

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

$bit templates

Copied

See command synopsis

The output lists component generators that are provided by different sources. One of these sources is your env.

The following template(s) are available with the command bit create: Example - bit create <template-name> <component-name>

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

Don't see your env listed?

If your don't see your env listed, you're probably missing the following config, in your workspace.jsonc (replace the env id with your own):

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

Run the following to create a new component using one of the available generators:

$bit create react-env name/spaces/my-react-env

Copied

See command synopsis

The generator should create the following files:

. └── name/spaces/my-react-env ├── index.ts ├── name/spaces/my-react-env.composition.tsx ├── name/spaces/my-react-env.docs.mdx ├── name/spaces/my-react-env.spec.tsx └── name/spaces/my-react-env.tsx

The generator should also set your component with pre-made configuration. Run the following to inspect it:

$bit show name/spaces/my-react-env

Copied

Notice how your component is already set to use your env:

┌──────────────────┬─────────────────────────────────────────────────────────────┐ │ id │ my-org.my-scope/name/spaces/my-react-env │ ├──────────────────┼─────────────────────────────────────────────────────────────┤ │ env │ my-org.my-scope/envs/my-react-env-env │ ├──────────────────┼─────────────────────────────────────────────────────────────┤ │ dev dependencies │ @my-org/my-scope.envs.my-react-env-env@*---- (component) │ └──────────────────┴─────────────────────────────────────────────────────────────┘

Change your generators' properties

name: the generator's name
description: the generators description
hidden: display the generator only when running bit templates --show-all
env: set the generated components with this env (component id)

Install the component that provides the generators to customize its properties:

$bit install @teambit/react.generator.react-starters

Copied

Implement the generator env handler in your env, and provide the generators with the properties to override:

{
// @filename: env.jsonc
// ...
import { TemplateList } from '@teambit/generator';
import { ReactComponentTemplate } from '@teambit/react.generator.react-starters';

export class MyReactEnv extends ReactEnv implements ReactEnvInterface {
  generators() {
    return TemplateList.from([
      ReactComponentTemplate.from({
        name: 'new-name',
        description:
          'standardize and speed up development with this React template',
      }),
    ]);
  }
}

export default new MyReactEnv();
}
Copied

Extend or customize your generators

To extend or customize your generators, fork the generator component and set your env with you own custom component, instead.

Run the following to fork the default React generator component:

$bit fork teambit.react/generator/react-starters generators/my-react-env-generators

Copied

Customize the various templates provided by that generator component. Set your env with the new (forked) generator:

{
// @filename: env.jsonc
// ...
import { TemplateList } from '@teambit/generator';
import { MyReactGenerator } from '@my-org/my-scope.generators.my-react-env-generator';

export class MyReactEnv extends ReactEnv {
  generators() {
    return TemplateList.from([MyReactGenerator.from()]);
  }
}

export default new MyReactEnv();
}
Copied

You can also add templates to the existing list, by adding the forked component to the array of generators:

{
// @filename: env.jsonc
// ...
import { TemplateList } from '@teambit/generator';
import { ReactComponentTemplate } from '@teambit/react.generator.react-starters';
import { MyReactGenerator } from '@my-org/my-scope.generators.my-react-env-generator';

export class MyReactEnv extends ReactEnv {
  generators() {
    return TemplateList.from([
      ReactComponentTemplate.from(),
      MyReactGenerator.from(),
    ]);
  }
}

export default new MyReactEnv();
}
Copied

Make sure there are no naming conflicts between the existing generators/templates and the generators that were added by you.