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.

default
my-scope/envs
my-react-env
new

Create a React env

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

$bit
Copiedcopy

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

$bit
Copiedcopy

Your env will look similar to the following:

teambit.react/react-env-extension
config
config/eslintrc.js
eslintrc.js
config/jest.config.js
jest.config.js
config/prettier.config.js
prettier.config.js
config/tsconfig.json
tsconfig.json
config/webpack.config.ts
webpack.config.ts
preview
preview/host-dependencies.ts
host-dependencies.ts
preview/mounter.tsx
mounter.tsx
types
types/asset.d.ts
asset.d.ts
types/style.d.ts
style.d.ts
env.jsonc
env.jsonc
index.ts
index.ts
react-env-extension.bit-env.ts
react-env-extension.bit-env.ts

Add your env generators

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"]
  }
}
CopiedCopy

React version

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

React 17

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

$bit
Copiedcopy

Or create in an existing workspace:

$bit
Copiedcopy

Learn more