React Rest Api Typescript Boilerplate

screenshot of React Rest Api Typescript Boilerplate
react
styled-components

React REST API project structure template using TypeScript, MobX, and Styled-Components

Overview

The react-rest-api-typescript-boilerplate is a project template that aims to provide a well-structured and organized foundation for building React applications with TypeScript. The template includes various folders and components that follow specific guidelines and conventions for their usage. By adhering to this structure, developers can ensure consistency and maintainability throughout their projects.

Features

  • Pages: A folder containing components that form the pages of the application. These components can utilize various other types of components in their implementation.

  • Containers: Container components that can use services and custom hooks. They may also use other types of components in their implementation.

  • Components: This folder is further divided into subfolders:

    • Smart: Contains smart components that can use the repository and custom hooks but cannot use services. They can use other types of components.

    • Ordinary: Stores complex components that cannot use the repository or custom hooks. They can use Simple and UI components.

    • Simple: Stores auxiliary components that should not use any custom hooks or repository. They can use UI components.

    • UI: Contains components that replace native components. They may contain logic using hooks and storage.

  • Core: This folder contains the logical part of the project, including services and configuration files.

  • Config: Contains configuration files, such as server URIs and limits/patterns/routes.

  • Constants: Contains constants, such as messages, units, and mime-types.

  • Hooks: Contains custom hooks.

  • Models: Contains models that come from the API server. Descriptions of attached models should be done in the response type of the corresponding service.

  • Schemes: Contains table schemes or form schemes.

  • Services: Stores services for API server communication.

  • Store: Stores store context and global store schemes (if used with MobX).

  • Theme (for styled-components): Stores the project's theme(s).

  • Types: Stores all domain types.

  • Utils: Stores auxiliary functions.

Summary

The react-rest-api-typescript-boilerplate provides a well-structured and organized foundation for building React applications with TypeScript. It follows a specific folder structure and provides guidelines for the usage of different types of components. By using this boilerplate, developers can ensure consistency and maintainability in their projects.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

styled-components
Styled Components

Styled Components is a popular library for styling React components using CSS syntax. It allows you to write CSS in your JavaScript code, making it easier to create dynamic styles that are specific to each component.

mobx
Mobx

MobX is a simple and scalable state management library for JavaScript applications. It uses reactive programming techniques to automatically update the user interface in response to changes in the application state, making it easy to build complex and dynamic user interfaces with minimal code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.