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:

1. 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.

2. Build for Production:

   npm run build

   Builds the project for production. Webpack compiles the project and outputs the optimized bundle in the /dist directory.

3. 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.

4. Run Tests in Watch Mode:

   npm run test:dev

   Runs tests in watch mode using React Scripts. Suitable for a test-driven development approach.

5. Format Staged Files:

   npm run pretty-quick

   Formats all staged files using Prettier. Ensures that code is consistently formatted before committing.

6. 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.

7. Format Entire Codebase:

   npm run prettier

   Formats the entire codebase using Prettier based on the configuration in .prettierrc.

8. Format & Commit:

   npm run prettier:commit

   Applies Prettier formatting to staged files before committing. Ensures that committed code is properly formatted.

9. 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.

10. 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

We welcome contributions to React Crafter! If you have ideas, find bugs, or want to improve the project, please feel free to contribute. Here's how you can get involved:

1. Fork the Repository

Start by forking the repository to your own GitHub account:

1. Navigate to the React Crafter GitHub repository.
2. Click the "Fork" button in the top right corner.

2. Clone Your Fork

Clone your forked repository to your local machine:

git clone https://github.com/your-username/react-crafter.git
cd react-crafter

3. Create a New Branch

Create a new branch for your feature or bug fix:

git checkout -b feature/your-feature-name

4. Make Changes

Make your changes or improvements in your new branch. Follow the existing code style and conventions.

5. Test Your Changes

Before submitting your changes, make sure everything works as expected:

npm run test

6. Commit and Push

Commit your changes with a descriptive commit message:

git add .
git commit -m "Add new feature: your-feature-name"
git push origin feature/your-feature-name

7. Create a Pull Request

Go to the original repository and click on the "Pull Requests" tab. Click "New Pull Request" and select your branch. Provide a description of your changes and submit the pull request.

8. Review Process

Your pull request will be reviewed by the maintainers. You may be asked to make additional changes or clarifications before your code is merged.

9. Celebrate 🎉

Once your pull request is merged, you’ve officially contributed to React Crafter! Thank you for your contribution.

Code of Conduct

Please note that we have a Code of Conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to [email protected].

License

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