ReactSchematics

A collection of Angular Schematics for generating React components and code structures.

Installation

npm install @trailheadtechnology/react-schematics --save-dev

Generators (Schematics)

Schematics automate code generation tasks in your project. They help maintain consistency and reduce boilerplate when creating new code.

Running a Schematic

The general syntax for running a schematic is:

npx schematics <collection>:<schematic> [options]

Or if installed globally:

schematics <collection>:<schematic> [options]

Available Schematics

Initialize Configuration

Initialize react-schematics in your project by creating a configuration file:

npx schematics @trailheadtechnology/react-schematics:init

Options:

• --root-store-path - Path to the root store file where new reducers will be registered
• --stores-path - The default folder path where new stores will be created
• --force - Overwrite existing config file if it exists

This creates a .react-schematics.config.json file in your project root.

Generate a React Component

npx schematics @trailheadtechnology/react-schematics:component --name=my-component --path=src/components

Options:

• --name (required) - Name of the component. You can include the path in the name, e.g. src/components/MyComponent
• --path - Directory to place the component files

Generated files:

• <name>/index.tsx - Component file
• <name>/index.module.scss - SCSS module styles

Generate a React Store (Redux Toolkit)

npx schematics @trailheadtechnology/react-schematics:store --name=user --path=src/stores

Options:

• --name (required) - Name of the store (camelCase recommended, e.g. user, shoppingCart)
• --path - Directory to place the store files (or use storesPath from config)
• --root-store-path - Path to the root store file where the new reducer will be registered (or use rootStorePath from config)

Generated files (in kebab-case folder, e.g. shopping-cart/):

• index.ts - Store barrel export
• slice.ts - Redux Toolkit slice with initial state and reducers
• selectors.ts - Selector functions
• api.ts - API functions

The schematic also:

• Adds an import statement for the reducer to the root store
• Registers the reducer in the configureStore reducer object
• Uses alias paths from tsconfig (e.g., @/stores/user/slice) when available

Generate a Next.js Page

npx schematics @trailheadtechnology/react-schematics:page --name=users --path=app

Options:

• --name (required) - Page route name (e.g., users, users/[id], dashboard/settings)
• --path - Directory to place the page (default: app)

Generated files:

• <name>/page.tsx - Next.js App Router page component

Features:

• Supports dynamic routes: [id], [...slug]
• Supports route groups: (auth)
• Includes 'use client' directive
• Includes export const dynamic = 'force-static' for static builds

Configuration File

You can create a .react-schematics.config.json file in your project root to set default options for the schematics. This allows you to avoid passing the same options every time you run a schematic.

The easiest way to create this file is using the init schematic:

npx schematics @trailheadtechnology/react-schematics:init --root-store-path=src/store/store.ts

Or create it manually. Example .react-schematics.config.json:

{
  "rootStorePath": "src/store/store.ts"
}

Supported configuration options:

| Option | Description | |--------|-------------| | rootStorePath | Default path to the root store file for the store schematic | | storesPath | Default directory for new stores (e.g., src/stores) |

Example .react-schematics.config.json:

{
  "rootStorePath": "src/store/store.ts",
  "storesPath": "src/stores"
}

Command-line options always take precedence over configuration file values.

Dry Run Mode

To preview changes without actually generating files, use the --dry-run flag:

npx schematics @trailheadtechnology/react-schematics:component --name=my-component --dry-run

List Available Schematics

To see all available schematics in this collection:

npx schematics @trailheadtechnology/react-schematics: --list-schematics

Development

Building the Schematics

npm run build

Testing Schematics Locally

npx schematics .:component --name=test-component --dry-run
npx schematics .:reactstore --path=src/store --name=testStore --dry-run

Running Tests

npm test

Useful Links

• Angular Schematics Documentation
• Schematics CLI Reference