Соединение фронтенда и бэкенда стека MERN

Они полностью независимы. Независимо от того, используете ли вы axios, собственный выбор Javascript, jQuery AJAX и т. д., Каждый из них запускается в браузере и делает запрос GET / POST к nodejs. Вы должны определить соответствующие маршруты GET / POST в nodejs, чтобы отвечать на эти запросы и возвращать данные ответа JSON для их использования.

Я бы начал с того, что вообще забыл о реакции. Вместо этого создайте экспресс-API с различными маршрутами GET / POST, которые возвращают ответы JSON. Протестируйте с помощью простого клиента, такого как почтальон. Как только вы разберетесь с этим, начните с внешней среды Javascript для использования этих сервисов.

В стеке MERN вам не обязательно рассматривать весь стек как единое целое. Серверы Mongo, ReactJS и NodeJS могут работать независимо. И давайте для простоты понимания скажем, что все они находятся на разных серверах. То есть у нас может быть Mongo на одном сервере, ReactJS на другом сервере и NodeJS с express на третьем сервере, тогда это также будет приложение стека MERN.

Как работает приложение MERN, выглядит следующим образом

Например, у нас есть приложение, которое отображает подробную информацию обо всех учениках в классе. Сначала в приложении React допустим, что вы выбираете класс, а затем интерфейс React отправляет запрос на сервер nodejs. Запрос будет содержать конкретное имя класса. Теперь nodejs отправит запрос в базу данных mongo, запрашивая сведения об учениках этого класса, которые он отправит обратно на сервер node. Затем узел-сервер отправит сведения во внешний интерфейс и обновит их.

Если вы запрашиваете соединение как таковое, соединение может отсутствовать вообще, кроме запроса данных. Вместо использования интерфейса responsejs вы можете использовать другой интерфейс, и он предоставит вам те же сведения. React, Mongo и Node - все они могут работать самостоятельно в своих областях.

Axios - это HTTP-клиент на основе обещаний для браузера и node.js.

Вот фрагмент моего API-интерфейса express + react:

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

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

module.exports = router;

В основном я отправляю строку json в index.jsx, где отображается интерфейс.

Также я установил экспресс как:

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

Итак, экспресс-сервер знает, где находится React.

Ознакомьтесь с пакетом npm Движок экспресс-реакции.

Все элементы стека могут использоваться независимо: React, Node.Js и MongoDB. Они могут быть установлены на разных серверах, а связь осуществляется с помощью Fetch, Axios или любого другого инструмента.