Как связать NodeJS с ReactJS?

Опубликовано: 26 Июля, 2021

ReactJS - это библиотека JavaScript с открытым исходным кодом, которая используется для создания пользовательских интерфейсов специально для одностраничных приложений. Он широко используется для создания SPA (одностраничных приложений) и имеет большое сообщество разработчиков.

NodeJS в основном используется для неблокирующих серверов, управляемых событиями, из-за своей однопоточной природы. Он используется для традиционных веб-сайтов и серверных служб API, но был разработан с учетом архитектур, основанных на push-уведомлениях в реальном времени.

В этой статье мы узнаем, как подключить NodeJS в качестве бэкэнда с ReactJS в качестве внешнего интерфейса.

Предпосылки:

Базовые знания React и Node.
Установлен Node.js (версия 12+).
Установлен npm (версия 6+).

Структура проекта: это структура, когда все модули и необходимые файлы готовы.

Настройка бэкэнда: сначала мы будем работать над нашей бэкэнд-частью (NodeJS). В рабочей папке создайте файл с именем app.js для NodeJS и файл package.json для запуска всех необходимых нам модулей.

Установка модуля:

Установка ExpressJS - это фреймворк nodeJS:

 npm установить экспресс

Установка nodemon:

 npm установить nodemon

Конфигурация файла пакета .json: добавьте сценарий запуска и сценарий разработки, которые важны для запуска и динамического выполнения кода после изменений, внесенных в ваше приложение Node.js, соответственно, в файл package.json, как показано ниже.

HTML

 {
 "name": "demoapp",
 "version": "1.0.0",
 "description": "",
 "main": "app.js",
 "scripts": {
   "test": "echo "Error: no test specified" && exit 1",
   "start": "node app.js",
   "dev": "nodemon app.js"
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
   "express": "^4.17.1"
 }
 }

Имя файла - app.js: вот простой код JavaScript, который должен быть написан в app.js, предназначенном для NodeJS.

Javascript

 const express = require( "express" );
 const app = express();
 
app.get( "/" , (req, res) => {
  res.send( "Hello World!" );
 });
 
const PORT = process.env.PORT || 8080;
 
app.listen(PORT, console.log(`Server started on port ${PORT}`));

Запустите приложение, используя следующую команду:

npm запустить dev

Выход:

Это будет консольный вывод.

Теперь перейдите по адресу http: // localhost: 8080 / в своем браузере, вы увидите следующий результат.

Имя файла-app.js: Теперь для подключения части React нам нужно внести некоторые изменения в app.js NodeJS. Мы завершили бэкэнд-часть.

Javascript

 const express = require( "express" );
 const app = express();
 
app.post( "/post" , (req, res) => {
  console.log( "Connected to React" );
  res.redirect( "/" );
 });
 
const PORT = process.env.PORT || 8080;
 
app.listen(PORT, console.log(`Server started on port ${PORT}`));

Настройка внешнего интерфейса: во- первых, мы должны создать приложение React и запустить ваше приложение, написав следующую команду.

 Демо-версия приложения npx create-response-app
CD демо
npm start

Вывод: Теперь перейдите по адресу http: // localhost: 3000 / в своем браузере, вы увидите следующий вывод.

Подключение: мы завершили и фронтенд, и бэкэнд, теперь нам нужно соединить и то, и другое. Теперь для подключения Reactjs к Nodejs мы добавили эту строку в package.json папки приложения react:

 "прокси": "http: // localhost: 8080

Имя файла- package.json: файл package.json находится в папке приложения React. Это сообщает React, что запросы API прокси на сервер Node.js, созданный с помощью Express в нашем проекте.

HTML

 {
 "name": "demo",
 "version": "0.1.0",
 "private": true,
 "proxy": " http://localhost:8080 ",
 "dependencies": {
   "@testing-library/jest-dom": "^5.11.4",
   "@testing-library/react": "^11.1.0",
   "@testing-library/user-event": "^12.1.10",
   "react": "^17.0.1",
   "react-dom": "^17.0.1",
   "react-scripts": "4.0.2",
   "web-vitals": "^1.0.1"
 },
 "scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"
 },
 "eslintConfig": {
   "extends": [
     "react-app",
     "react-app/jest"
   ]
 },
 "browserslist": {
   "production": [
     ">0.2%",
     "not dead",
     "not op_mini all"
   ],
   "development": [
     "last 1 chrome version",
     "last 1 firefox version",
     "last 1 safari version"
   ]
 }
 }

Имя файла - App.js: внесены некоторые изменения в app.js React, чтобы показать, что они связаны.

Javascript

 import logo from "./logo.svg" ;
 import "./App.css" ;
 
function App() {
  return (
    <div className= "App" >
      <header className= "App-header" >
        <img src={logo} className= "App-logo"
             alt= "logo" />
         
<p>A simple React app.....</p>
 
        <a
          className= "App-link"
          href= " https://reactjs.org "
          target= "_blank"
          rel= "noopener noreferrer"
        >
          Learn React
        </a>
        <form action= "../../post" method= "post"
              className= "form" >
          <button type= "submit" >Connected?</button>
        </form>
      </header>
    </div>
  );
 }
 
export App; default 

Теперь запустите процесс Nodejs npm run dev в одном терминале, а в другом терминале запустите Reactjs, используя npm start одновременно .

Вывод: мы видим ответный вывод, мы видим кнопку «Подключиться», мы должны по ней щелкнуть. Теперь, когда мы видим консоль на стороне сервера, мы видим, что ReactJS связан с NodeJS.

Node.js Technical Scripter

Как связать NodeJS с ReactJS?

HTML

Javascript

Javascript

HTML

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ