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

yarn

pnpm

bun

npm 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

If you need to run the build production environment product command

npm

yarn

pnpm

bun

npm build

If you need to preview your build product

npm

yarn

pnpm

bun

npm preview

For more example details: React Example