I'm working on a project where we are using vanilla javascript, Html and css for frontend while designing the backend in the FastAPI. The way backend connects with the frontend is using Templates, by adding the file name for a particular page and also sending the data as jinja template back to the client side. We have five pages and all are declared in the backend as get requests and we are using a specific html file for loading a particular page. So, there are mainly five html files for five pages Now, I was deciding to switch to reactjs as the frontend, however, react being the single page application and also just having the Routes for multiple pages, I'm wondering how to I connect it to the backend and also send data back to the client, the way I was doing it before. I tried to look for answers, couldn't find one as of now... And also I'm kind of new to Reactjs
React, Python, and FastAPI are all great technologies that I too use. But they work more effectively when used for their intended purposes. A hammer is a great tool if you need to pound in some nails, but it's a lousy tool for other purposes such as trying to use it as an eating utensil. So you'd be well advised, if you are going to use React and FastAPI, to use them as they were intended.
Jinja templates are used for server side rendering. But React is (in essence) also a server side rendering system. Both of them will not play nicely together, at least not without more work and complexity.
Instead you'd be better off committing to either the Jinja templating or React. If you choose Jinja, you figure out what the page will be (render) before sending it off to the client. If you choose React, you write the user-visible application, send that off to the client, and then the application on the client's browser fetches data through (usually JSON) APIs from the FastAPI back end.