Using ReactJS and python Flask. General Approach

Question

I am working on project, that I started with Python and Flask, as at the begginning it was quite small - the jinja templates commonly used by Flask was sufficient, but as I wanted more and more - I decided to give a try to ReactJS.

It works great for variety of things, and there is bigger control of whole frontend, and generally I like it, but Let's assume that I want to use react for X component, and in the same X component i'd like to use jinja templates - to populate it with data from Flask backend. This is the first question - 1) How should be this achieved? React is preparing javascript file, so the tempalte can't be rendered. Should I create some endpoint, and GET data needed to populate with jquery request?

The second question is - the routing. I define some endpoints in flask - but in react components I need to 'hardcode' it. Is there some solution to not have it hardcoded in 2 places?

The third question is - how do you work with that? Maybe good point is to combine React for some components, and use tempaltes for other things?

Summarizing question:

1. How to inject flask data into React components.
2. How to face routing.
3. General points of working with React + Flask / Django. Your opinion/thoughts/guides.

I am very interested in your opinions about this two frameworks working together :)

Answer 1

1. You can make two separate apps, one with flask (endpoints serving json data) and one with react (a frontend app, that requests this data). You can use axios in react to make requests to your api. For example you write a class/component for that purpose and use that to request data in a few lines of code in Your other components. If jinja You mentioned is a templating engine I don't think there is an easy way to use that with react.
2. In React You usually develop Single Page Applications, but You can use react-router in order to route your subpages. If I understand correctly this is a situation You are talking about: In react You write a component that is responsible for displaying a list of articles. In that component You 'hardcode' a function using (using axios for example) that download the list in json format. Later You do the same for a component that displays a specific article.
3. I think it's easier to be consistent and develop a SPA application. Especially when You have things like react-router, axios or redux already set up. I'm a beginner ( don't be harsh on me (: ), but I think these frameworks should work with each other just fine. I recommend this udemy course . I learned there a lot about react.