How to display information in React from the database?

Question

JavaScript

The problem is the following - there is a React application that has some components with a template for data output. I have only one question - how to correctly display data from the database? I understand that React is a Front-End framework and it doesn’t know how to do this, but it’s very, very difficult to approach it. I found a solution - I send an AJAX request to the same Django (this is not important now), I get data from it from the database, I send it to the React-Component state and I get, in principle, the result. I found such a solution without using WebPack and I think that with a certain magic I can connect it by using the http module in Node, but then an even bigger hybrid comes out - React + Node + Any server-side language (some kind of mutant).
What is the best way to output data to my application? Am I doing the right thing by using an AJAX request to retrieve information from the server's database? Who will tell? I found some mess in the form of REST on Django + React, but this is such rubbish that my solution looks nicer) How else to get data in React and do it right? I'm good friends with React and I understand its architecture, but now I'm at the junction of "you need to connect the front-end with the server" and I don't understand where to dig)

Answer 1

You need two data systems.
1. On the server it will be any json api.
The algorithm is as follows: the server receives a request in api, receives and processes data from the database, then returns it in response to the request. Depending on the language, there will be differences in implementation, but there are libraries everywhere.
2. On the client, you need a data store (store) (you can do without it, just throwing query results into components, but in large applications, data management becomes too complicated. There is redux, there is mobx, there are a lot of different solutions.
The algorithm is as follows: a component with The renderer understands that it needs data and goes to the store, where the data, if not, is loaded via ajax.When the data in the store is updated, the component receives a notification and rerenders.