create-hery-ts-react-app v1.0.2

create-herys-ts-react-app

This package includes a TypeScript React app creation along with a predefined folder structure. The folder structure is tailored to help organize and streamline development, though not everyone follows the same setup. I use this structure for every project to maintain consistency and improve productivity.

This package is based on the create-react-app (--template typescript) setup. I have modified the default folder structure to better suit my development style and to streamline the development process and immediately download packages I use in all projects. I do not hold any rights nor am I associated with the official create-react-app package.

Packages: These packages are included in creation of the project: axios, react, react-dom, react-scripts, web-vitals, @testing-library/react, cra-template-typescript Usage: Use this command in the project folder terminal: npx create-herys-react-app project-name. Github: https://github.com/Heeryy/herys-ts-react-template

Folder Structure

Here’s a breakdown of each folder in the project and its purpose:

src/components/

Contains reusable components across your app.

• Purpose: Houses all the UI components that can be reused throughout the application.
• Example: Buttons, modals, input fields, headers, footers, etc.

src/features/

This folder holds specific features of the application that might contain multiple components, states, and logic tied to a single feature.

• Purpose: Keeps code organized by separating features into their own modules.
• Example: A "User Profile" feature might have components, hooks, and logic related to managing the user profile.

src/hooks/

Custom React hooks go here.

• Purpose: Any reusable logic that can be abstracted into hooks, such as state management, API calls, etc.
• Example: useFetch.ts for handling API requests.

src/locales/

Contains localization files for managing translations.

• Purpose: Keeps language files organized so the app can support multiple languages.
• Example: JSON files or JavaScript objects containing translated text.

src/providers/

Context providers for managing state globally.

• Purpose: Holds all React Context providers that share state globally across the app, like authentication or theme.
• Example: ThemeProvider.tsx for managing the theme state globally.

src/services/

API and utility services.

• Purpose: Manages API calls, utilities, and other services that interact with external systems or logic in the backend.
• Example: A service for making fetch requests or interacting with a database.

src/styles/

Global and component-level styles.

• Purpose: Contains your global styles (like CSS or styled-components) as well as individual component styles.
• Example: App.css

src/tests/

Unit tests for the application.

• Purpose: All the test files for components, hooks, and services should be here.
• Example: Files testing the logic of your React components or custom hooks.

Note

While this folder structure works well for me and the way I approach React development, not everyone follows this type of organization. Feel free to adapt it to suit your own needs. This package is meant to save you time by starting with an organized structure, but you are free to change it as your project grows.