How to link a React app to the back-end?

Question

Node.js

All my life I have been developing the front-end and now I decided to take on the server part. But I can’t get an idea of ​​​​the mechanism of how the bundle with React works. That is, let's say I have a running application - a list of tasks. I'm storing the added tasks in Redux and now I need to save them to the database. That is, now you need to save in two places, and when loading the page, additionally get it in Redux from the database? And it’s not clear in what order to develop, can you work with the server from webpack in parallel, or first wrote the front, made blanks for requests to the server, then assembled the bundle and uploaded it to the server and work with the server part there?

Answer 1

Communication with the backend via REST API. Send a request, get a response. Everything is simple.
In general, the list of tasks can be saved in localstorage .
But if you decide to save to the database, then the tasks should be saved like this:
1. The user filled out the form and clicked "Add"
2. POST request to the server
3. If successful, the response and saving the data in the redux store
4. the list is updated and the task is displayed in the interface
If there are no endpoints on the server, you can write stubs on the front, for example, injection of fake data via connect .
Or you can immediately write endpoints on the server. If you work alone, you can use both options. I usually write endpoints right away.
You don’t need to build the bundle in development mode, the webpack dev server rebuilds it on the fly with every change. I advise you to set up hot reload . Also in modern applications, server side rendering
is often implemented . There are a lot of subtleties here and it is better to read the relevant articles about this.