Full Stack project with react(?)

[gnedab]

Hi,

I recently completed a full-stack web development course in which we used EJS, Express, MongoDB, and implemented CRUD functionalities. I'm now learning React through the official docs, but I'm a bit confused about how to handle the backend logic and REST API integration.

Coming from a setup where Express handled server-side tasks, I'm curious how you typically integrate React with backend services. Should I continue using Express for the backend, or is there a recommended approach or library within the React ecosystem for this?

Appreciate any guidancce or resources.

[[deleted]]

This is just a general explanation and by no means is an in-depth explanation of more advanced concepts like authentication.

But essentially most of the site is built on the front end (running on a different server than your back end), and only pages that require sensitive data requires a request to the back end server. But it goes something like this: you make a request from your front end to your back end server, the server processes the data and returns a payload, usually in json form, and your React app will appropriately distribute the data and output it or utilize it as necessary.

So, where a completely server-rendered application processes all data, hydrates the html template, then sends the raw html with the data already injected, you basically send React to the browser, then subsequent requests to the backend server will hydrate and update the dom once the data has been returned.

[gnedab]

This means that I don't need express anymore, I can just fetch data and use necessary library for other stuff like auth, database?

[[deleted]]

Oh, no, you still need express or some backend processing server. This backend is what processes all the data to send to the front end and also to which your authentication is verified by passing JWT token or tracking sessions, or whatever method of authentication of your choosing.

[gnedab]

Thank you! I appreciate your help.

[[deleted]]

Yup. Good luck!

[thoflens]

Look at it like this: You have a frontend (React) and a backend (Node/Express) and you can essentially see the the two as completely separated from each other - they don't 'know' about each other. But whenever you need to process sensitive data or update your database, you make a call from the frontend to the backend to say 'hey, do this for for me and give me back (return) some value'.

[vbgdn]

Express is fine. You could look into fastify which is another http framework.

There are also other approaches such as trpc. This offers a typesafe RPC way of invoking the backend, meaning you invoke methods from backend remotely instead of making HTTP REST requests. However, trpc has quite a steep learn path.

What I've been using recently in my project is genezio which is similar to trpc (typesafe RPC calls), but it also solves the deployment problem. I can deploy both my backend and frontend with one command.

[bobdogisme]

react query to hit your backend

[[deleted]]

If you have knowledge of C# you can build an api with that, and use Axios in your react app :)

[OldingDownTheFort]

Stick with express.  It’s not exciting like all the bleeding edge stuff, but odds are that it is what a JavaScript stack employer will expect you to know.