cra-template-istic

This template serves to start a project with crate-react-app, serving as a basis for complex creations using a kit of already configured libs.

How to use

to start using this template pass the --template @senai-istic/cra-template-istic tag when writing the project build command.

npx create-react-app project-app --template @senai-istic/cra-template-istic

or

yarn create react-app project-app --template @senai-istic/cra-template-istic

Main installed libs

As this project was developed based on cra-template-typescript, it already comes with typescript enabled by default.

• Mantine: React UI lib that contains a set of components for building interfaces.
• Axios: HTTP request lib based on promises for browser and node.js.
• React query: React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze.
• React Router Context: It is a library based on react-router-dom, which uses React's Context API for route state management and route access permission customization.
• Husky: Library that uses git-hooks for code management

Folder structure

- .husky
- .vscode
- public
- src
  - components
    - _commons
      - {common_component}/*
    - Layout
    - {custom_component}/*
  - core
    - configs
      - {custom_lib}/*
    - contexts
      - {custom_context}/*
    - domains
      - {custom_domain}
        - {custom_domain}.hooks.ts
        - {custom_domain}.services.ts
        - {custom_domain}.types.ts
    - routes
      - collections
        - default.routes.tsx
        - private.routes.tsx
        - public.routes.tsx
      - index.tsx
      - types.ts
    - types
  - pages

Routes manager

For route management, the react-router-context library was used to facilitate the creation of routes and because it already brings the functionality of access permission to routes, with hooks for viewing the route tree and managing the access role.

The route management file is located in the src/core/routes folder

to learn more about lib, visit the full documentation

Requisition services

Services were created based on classes, to facilitate the use and sharing of methods, using the axios lib to manage request traffic.

Services are located in the src/core/domains/{custom_domain}/{custom_domain}.services.ts folder.

Below is an example of service applied to authentication request

import axiosInstance, { SERVICE_BASE_URL } from '@/core/configs/axios';
import { Repository } from './repository.types';

const URL_CONTROLER = `${SERVICE_BASE_URL}/users`;

export default {
  async list(user: string) {
    const result = await axiosInstance.get<Repository[]>(
      `${URL_CONTROLER}/${user}/repos`
    );

    return result.data;
  },
};

Hooks exemples

import { useQuery } from '@tanstack/react-query';
import repositoryServices from './repository.services';

export function useRepositoryList(user: string) {
  return useQuery(['repositories', user], () => repositoryServices.list(user));
}

How to use hook with services

...

const [user, setUser] = useDebouncedState('SENAI-ISTIC', 1000);

const { data: repos, isLoading } = useRepositoryList(user);

...

know more

For more information on the Create React App, see:

• Getting Started – How to create a new project.
• User Guide – How to develop projects started with Create React App.