Here is where one of the places where the magic happens, src will contain all the source code of the React Project's components. Here we're going to talk about the API which contains interceptors, the components folder which contains most of functional components, the frameworks, React Hooks, routes, and others.
Put here your axios apis, here we have some interceptors that you may use to modify outgoing requests with headers and authentication and also to receive and process responses coming from the backend.
Put here icons, images, resources, etc.
Here we have 3 folders, the auth folder for authentication screens and login pages, layouts for our different views in the application and the UI folder which is where we have views and functional components for those views.
This folder section goes along with the Dynamic Frameworks from the backend. The files here are the ones in charge of interpreting and displaying the responses coming from those Dynamic Frameworks, hence this is the place to look for if you want to modify appearances of the results in the UI.
Note |
---|
This only applies if you're using the frameworks provided by us, you can also build your own UI from scratch in the components section and get rid of the frameworks code for your project using the plain responses from the API. |
React Hooks are simple JavaScript functions that we can use to isolate the reusable part from a functional component. React has plenty of hooks you can use. This section is for custom hooks that can be programmed by any user to make modular and reusable code.
Here we have the routes to the different views of the application, you can create your own routes here or modify the ones we provide. Routes are made with React Router.
This is the other important place to look at and it's really important that you understand React Redux with Typescript before even looking at this. Redux is a paradigm that can be applied to several frameworks. The Store is a mechanism that allows you to control all the states of the application in a single place with a single data flow. To build this Store we used Redux Toolkit which gives us packages and methods that make the creation of Slices a lot easier. Make sure to study both Redux and Redux Toolkit before exploring this code.