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:
The output lists component generators that are provided by different sources. One of these sources is your env.
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"] } }
Run the following to create a new component using one of the available generators:
The generator should create the following files:
The generator should also set your component with pre-made configuration. Run the following to inspect it:
Notice how your component is already set to use your env:
name
: the generator's namedescription
: the generators descriptionhidden
: display the generator only when runningbit templates --show-all
env
: set the generated components with this env (component id)
Install the component that provides the generators to customize its properties:
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(); }
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:
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(); }
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(); }
Make sure there are no naming conflicts between the existing generators/templates and the generators that were added by you.