React

Create a React project based on Farm.

Farm provides two approaches to support creating React projects:

Use the create-farm scaffold to create a scaffold project
You can manually create a React project following the current documentation

Creating a React Project

npm create farm@latest

yarn create farm@latest

pnpm create farm@latest

bun create farm@latest

Select React template in Select Framework

Farm requires the registration of the @farmfe/plugin-react plugin to support React projects.

farm.config.ts

import { defineConfig } from '@farmfe/core';

export default defineConfig({
  plugins: ['@farmfe/plugin-react'],
});

The @farmfe/plugin-react plugin is written in Rust, so you do not need to explicitly import it; you can register it by passing a string package name.

Integrating emotion

You can support emotion by registering the @swc/plugin-emotion plugin.

farm.config.ts

import { defineConfig } from '@farmfe/core';

export default defineConfig({
  compilation: {
    script: {
      plugins: [
        {
          name: '@swc/plugin-emotion',
          options: {},
          filters: {
            moduleTypes: ['tsx'],
          },
        },
      ],
    },
  },
  plugins: [['@farmfe/plugin-react', { "importSource": "@emotion/react" }]],
});

src/index.tsx

import { css } from '@emotion/react';

const color = 'white';

export function Main() {
  return (
    <div
      onClick={() => setCount((c) => c + 1)}
      css={css`
        padding: 32px;
        background-color: hotpink;
        font-size: 24px;
        border-radius: 4px;
        &:hover {
          color: ${color};
        }
      `}
    >
      {a}: {count}
    </div>
  );
}

Integrating svgr

SVGR is a tool for transforming svgs into React components. Farm offers a Js plugin to support SVGR.

farm.config.ts

import { defineConfig } from '@farmfe/core';
import farmJsPluginSvgr from '@farmfe/js-plugin-svgr';

export default defineConfig(async (env) => {
  return {
    plugins: [
      [
        '@farmfe/plugin-react',
        {
          refresh: process.env.NODE_ENV === 'development',
          development: process.env.NODE_ENV === 'development'
        }
      ],
      farmJsPluginSvgr()
    ]
  };
});

If you want to start DevServer

npm yarn pnpm bun

npm dev

yarn dev

pnpm dev

bun dev

If you need to run the build production environment product command

npm yarn pnpm bun

npm build

yarn build

pnpm build

bun build

If you need to preview your build product

npm yarn pnpm bun

npm preview

yarn preview

pnpm preview

bun preview

For more example details: React Example