Presetter-preset-react NPM

🏄🏻 A collection of opinionated configurations for a React project in typescript for presetter

• Quick Start • Project Structure • Customization • Scripts •

Features

presetter-preset-react is an extension of presetter-preset-web with additional tools to help you to develop a React project with ease via presetter.

✨ TSX support
🧪 @testing-library/react
📝 Recommended rules from eslint-plugin-react

Quick Start

FULL DOCUMENTATION IS AVAILABLE HERE

1. Bootstrap your project with presetter-preset-react

On your project root, create a presetter.config.ts file with the following content:

// presetter.config.ts

import { preset } from 'presetter';
import esm from 'presetter-preset-esm';
import react from 'presetter-preset-react';

export default preset('project name', {
  // NOTE
  // you don't need to extends presetter-preset-web presets here since they are already included in the react preset
  // however, you may need an additional preset like presetter-preset-esm for ESM support and other basic toolings
  extends: [esm, react],
  override: {
    // override the configuration here
  },
});

Then, install your project as usual with npm install or any package manager you prefer.

2. Develop and run life cycle scripts provided by the preset

At this point, all development packages specified in the preset are installed, and now you can try to run some example life cycle scripts (e.g. run prepare).

Demo

Project Structure

After installation, your project file structure should resemble the following, or include more configuration files if you also installed other presets.

Implement your business logic under source and prepare tests under spec. The .d.ts files are handy type definitions for you to import .css or image files in typescript.

NOTE You will notice there's no additional configuration file on your root folder like other presets such as presetter-preset-esm. It's because presetter-preset-react extends presetter-preset-web which is a bundle only preset, meaning it only helps you to install the development packages specified in this preset only.

TIPS You can always change the source directory to other (e.g. src) by setting the source variable in presetter.config.ts. See the customization section below for more details.

(root)
 ├─ .git
 ├─ presetter.config.ts
 ├─ node_modules
 ├─ source
 │   ├─ <folders>
 │   ├─ index.ts
 │   ├─ (auxiliary).ts
 ├─ spec
 │   ├─ *.spec.ts
 ├─ types
 │   ├─ image.d.ts
 │   ├─ style.d.ts
 │   ├─ (type).d.ts
 ├─ eslint.config.ts
 ├─ package.json
 └─ tsconfig.json

Customization

By default, this preset exports a handy configuration set for a React project written in typescript.

You can further customize (either extending or replacing) the configuration by specifying the changes in the config file presetter.config.ts.

Script Template Summary

run build: Transpile source code from typescript and replace any mapped paths
run clean: Clean up any previously transpiled code
run develop -- <file path>: Create a service that run the specified file whenever the source has changed
run test: Run all tests
run watch: Rerun all tests whenever the source has change
run coverage: Run all test with coverage report
run release: Bump the version and automatically generate a change log
run release -- --prerelease <tag>: Release with a prerelease tag