Package Exports

react-crafter
react-crafter/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-crafter) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Crafter

React Crafter is a CLI tool designed to quickly scaffold a modern React application with TypeScript, Ant Design, Sass, Webpack, and essential development tools like Husky and linters pre-configured. This tool simplifies the initial setup, allowing developers to start coding with best practices from the get-go.

Features

React with TypeScript: Automatically sets up a React project using TypeScript.
Ant Design Integration: Includes Ant Design (antd) for UI components, fully integrated with your project.
Sass Support: Configures Sass for better styling with variables, mixins, and more.
Webpack Configuration: Custom Webpack setup for development and production builds.
Husky & Linters: Pre-configured Git hooks with Husky, Commitlint, and Prettier to enforce code quality and style.
Atomic Design Structure: Creates an atomic design folder structure to organize your components.
Redux Setup: Sets up Redux with slices, middleware, and selectors for state management.
Test Suite: Installs Jest and Playwright for comprehensive testing.

Installation

First, install the CLI globally via npm:

npm install -g react-crafter

Or use it directly with npx (no installation required):

npx react-crafter <project-directory>

Usage

To create a new React project, simply run:

npx react-crafter my-new-app

Replace my-new-app with the name of your project.

Example:

npx react-crafter awesome-project

Commands

Here’s a summary of the commands you can use after setting up your project:

Start Development Server:
```
npm start
```
Starts the development server with Webpack. The project is served using Webpack Dev Server with the configuration specified in webpack.config.js.
Build for Production:
```
npm run build
```
Builds the project for production. Webpack compiles the project and outputs the optimized bundle in the /dist directory.
Run Tests:
```
npm test
```
Placeholder for running tests. Currently, it does not run any tests but can be customized to run Jest or other test suites.
Run Tests in Watch Mode:
```
npm run test:dev
```
Runs tests in watch mode using React Scripts. Suitable for a test-driven development approach.
Format Staged Files:
```
npm run pretty-quick
```
Formats all staged files using Prettier. Ensures that code is consistently formatted before committing.
Lint Entire Codebase:
```
npm run lint:prettier
```
Checks the format of the entire codebase using a custom script. It can be used to ensure that all files adhere to Prettier’s formatting rules.
Format Entire Codebase:
```
npm run prettier
```
Formats the entire codebase using Prettier based on the configuration in .prettierrc.
Format & Commit:
```
npm run prettier:commit
```
Applies Prettier formatting to staged files before committing. Ensures that committed code is properly formatted.
Eject Project:
```
npm run eject
```
Ejects the project from Create React App. This command exposes the underlying configuration files for full control but cannot be undone.
Prepare Husky:
```
npm run prepare
```
Installs Husky hooks. This script is automatically run after dependencies are installed, setting up Git hooks for the project.

Customization

React Crafter provides a base setup for React projects, but it is also customizable to fit your specific needs:

Pre-configured files: Files like prettier-commit.js, check-format.js, and others are copied during setup.
Package.json customization: The CLI updates package.json with custom scripts tailored to your project’s needs.
Atomic design structure: The tool creates a folder structure based on atomic design principles to help organize components.

Post-Setup Options

After the project is set up, you’ll be prompted to choose how to open the project:

Terminal
VSCode
Neovim
None

This feature ensures you can start working in your preferred environment immediately after setup.

Contributing

Contributions are welcome! If you have ideas, feature requests, or find bugs, please submit an issue or a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.