Introducing React Component Development Environment

Support for React was always available for Bit, and we are proud that numerous teams have used the base React Component Development env to streamline the process for building their Bit Components.

Over the years we have gathered feedback from the community to improve any defaults, processes and tooling.

To enhance the Bit developer experience, we undertook a comprehensive review and decided to upgrade the React env, providing it with improved capabilities and a more refined developer experience.

• ESM support by default.
• React 18 support out-of-the-box.
• Upgrade to Jest 29.
• Easy set custom providers for your previews.
• Tooling configuration is straightforward and focused.
• Minimize the use of abstractions wherever possible.
• Improve control and configuration of component templates.

And a lot more...

We trust this will empower many teams to do even greater things by tailoring more parts of their development flow, and have far more control over their tooling.

Below I will try to give you a sneak peek at the React env. For further reference, please visit the React Documentation Portal.

In this post we will create a new Bit Workspace, but you can also do this in an existing one

Run the following command:

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

Copied

The workspace now contains a basic React env that extends the base teambit.react/react-env by Bit.

Your new React env inherits from our base React env, with regular class inheritance. No fancy APIs :)

export class MyReactEnv extends ReactEnv {
}

Copied

For each development operation/tool you can control the specific implementation using a dedicated function. For example:

tester(): EnvHandler<Tester> {
    return JestTester.from(...);
  }
  linter(): EnvHandler<Linter> {
    return ESLintLinter.from(...);
  }

Copied

As you can see, there is a dedicated directory containing all the configuration files used by default. You can directly modify any of the files to affect your components.

my-scope/envs/my-react-env/config
├── eslintrc.js
├── jest.config.ts
├── prettier.config.ts
└── tsconfig.json

Copied

The React Preview API is now much more flexible for your needs. You can create a custom rendering env to wrap any composition you have with any element you need. In a nutshell, you mimic a consumption context.

Adding theme providers, i18n, GraphQL provider or even just UI elements to control your compositions.

This way you set a default simulation env:

preview(): EnvHandler<Preview> {
    return ReactPreview.from({
      mounter: require.resolve('./preview/mounter'),
      hostDependencies,
    });
  }

Copied

The “Preview” function lets you define any mounter you want. Using the base mounter is as simple as it gets, and you can further extend it.

export function MyReactProvider({ children }: { children: React.ReactNode }) {
  return <>{children}</>;
}

Copied

If you are already using a previous React env for Bit, you can create a new env in your project as above, and configure your components to use the newly created env. Once migration is completed and stable, we recommend deprecating your previous custom React env (if you had one).

Please note, when moving from CJS to ESM you may encounter some complexities related to the compilation target changes. Feel free to reach out to the community for any help.