1

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 :)

Improve this question

1 Answer 1

Reset to default
4
  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.
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks for sharing Adrian - I am also begginer level - and I am trying to get more overwiev on that. I think that having the clear view on how these two should work, is >50% of success - the rest is the implementation :P Your comment is making my mind up, but i want more views on this :D
That makes sense, glad I could help (:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.