连接前端和后端 MERN 堆栈

Question

How does the react client connect to the server via express? Many tutorials talk about Superagent and axios which is adding to my confusion. Are there any resources on server side routing in the context of react? thank you

Answer 1

In MERN stack, you do not necessarily have to think of the entire stack as a single entity. Mongo, ReactJS and NodeJS server can all work independently. And let us for easiness of understanding sake say all of them are on separate servers. That is we can have Mongo on one server, ReactJS on another server and NodeJS with express on a third server, then also it will be a MERN stack app.

How a MERN app work is as follows

For example, let us have an app that displays the details of all the students in a class. First, in the React app let us say you select a class, and then the React front-end will send a query to the nodejs server. The query will contain the particular class name. Now nodejs will send a query to the mongo db asking for the details of the students of that class which it will send back to the node server. The node server will then send the details to the front end and it will update it.

If you ask for connection as such, there can be no connection at all except for querying for data. Instead of using the reactjs front end you can use some other frontend and it will give you the same details. React, Mongo and Node, all are capable of working on their own in their respective fields.

Axios is a promise based HTTP client for the browser and node.js.

Answer 2

They are completely independent. Whether using axios, the native Javascript fetch, jQuery AJAX, etc...each of them runs in the browser and makes a GET/POST request to nodejs. You will have defined corresponding GET/POST routes within nodejs to respond to these requests and return JSON response data for them to consume.

I would start by forgetting about react altogether. Instead build an express API with various GET/POST routes that return JSON responses. Test with a simple client like postman . Once you have a handle on that, then start with a front-end Javascript framework to consume these services.

Answer 3

Here is a cut of my express+react api:

var express = require('express');
var router = express.Router();

router.get('/', function (req, res) {
    res.render('index', {myjson: "myValue"});
})

module.exports = router;

Basically I am sending the json string to index.jsx, where the frontend is rendered.

Also I've set in express as:

app.set('views', __dirname + '/views');
app.set('view engine', 'jsx');
app.engine('jsx', reactViews.createEngine());

So the express server knows where React is.

Checkout the npm package Express-react-engine .

Answer 4

All the elements of the stack can be used independently, React , Node.Js, and MongoDB. They can be installed in different servers and the communication is by using Fetch, Axios or any other tool.