hashio-create-react-app

A custom npx command to create a React project with a predefined folder structure, pre-installed npm packages, and Material-UI with theme support.

Table of Contents

• Features
• Prerequisites
• Installation
• Usage
• Folder Structure
• Customization
• Contributing
• License

Features

• Automatically sets up a React project with Material-UI and icons.
• Creates a custom folder structure inside the src directory.
• Includes a theme file (theme.js) configured with Material-UI's theme provider.
• Adds a sample button component in App.js to demonstrate the theme.

Prerequisites

• Node.js (v14 or later)
• npm

Installation

1. Clone or download this repository.

2. Run the command to create a new project:

   npx hashio-create-react-app <project-name>

Replace <project-name> with the desired project folder name.

Usage

1. Navigate into the new project directory:

   cd <project-name>

2. Start the project:

   npm start

This will launch the project at http://localhost:3000 with a sample Material-UI button.

Folder Structure

The following folders are created inside the src directory:

• components: For all React components.
• hooks: For custom hooks.
• contexts: For React context providers.
• utils: For utility functions.
• styles: For any global or shared styling.

Example Structure

my-app/
├── src/
│   ├── components/
│   ├── contexts/
│   ├── hooks/
│   ├── styles/
│   ├── utils/
│   ├── theme.js
│   ├── App.js
│   └── index.js
└── package.json

Customization

You can further modify the theme by editing the src/theme.js file:

import { createTheme } from "@mui/material/styles";

const theme = createTheme({
  palette: {
    primary: {
      main: "#1976d2",
    },
    secondary: {
      main: "#dc004e",
    },
  },
});

export default theme;

Contributing

1. Fork the repository.
2. Create a feature branch (git checkout -b feature/YourFeature).
3. Commit your changes (git commit -am 'Add YourFeature').
4. Push to the branch (git push origin feature/YourFeature).
5. Open a Pull Request.

License

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