Set up your React environment

The Bit development environment provides your components with the dev tooling and configuration required to run, build and test your components.

You can create a custom React env that extends Bit's base React env, to better control your configuration and tools.

my-scope/envs

my-react-env

new

react/

react-env

new

In an existing workspace use the following command to create a custom React env:

$bit create react-env envs/my-react-env --aspect bitdev.react/react-env

Copied

Alternatively, if you do not have a workspace yet, create a workspace containing a custom env with the following command:

$bit new react my-workspace --env bitdev.react/react-env --default-scope my-org.my-scope

Copied

Your env will look similar to the following:

teambit.react/react-env-extension

config

eslintrc.js

jest.config.js

prettier.config.js

tsconfig.json

webpack.config.ts

preview

host-dependencies.ts

mounter.tsx

types

asset.d.ts

style.d.ts

env.jsonc

index.ts

react-env-extension.bit-env.ts

The new custom env contains templates for new components. Add them to your workspace by adding this snippet to workspace.jsonc.

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

The Bit React env uses React 18. To update the React version, change the peers entry in your env.jsonc.

To use React 17, it's recommended to start with Bit React 17 environment.
It comes with a workspace starter:

$bit new react my-workspace --env teambit.react/v17/react-env --default-scope my-org.my-scope

Copied

Or create in an existing workspace:

$bit create react-env envs/my-react-env --aspect teambit.react/v17/react-env

Copied

• Create components
• Setting and viewing envs on components
• Configure your env generator templates
• Updating envs