React — это библиотека JavaScript для разработки пользовательских интерфейсов. Он позволяет создавать эффективные и масштабируемые веб-приложения на основе компонентной архитектуры.

Express.js — это минималистичный и гибкий веб-фреймворк для Node.js, упрощающий разработку веб-приложений и API. Он предоставляет простой интерфейс и набор функций для быстрого создания серверов и маршрутизации запросов.

Введение

Это руководство поможет вам разработать простое приложение React и подключить его к серверу, созданному с использованием Node.js. Мы начнем с создания приложения React с помощью команды create-react-appзатем настройте его подключение к серверу Node.js с помощью proxy.

Необходимые условия

Для выполнения этого руководства будет полезно иметь следующие элементы:

  • Предыдущий опыт работы с Node.js, Express, npm и React.js.

  • Node.js установлен.

  • Текстовый редактор, желательно VS Code.

  • Веб-браузер, в данном случае Google Chrome.

Настройка структуры папок

структурные приложения

Первый шаг — создать корневую папку для нашего приложения с именем express-react-app, который будет содержать все файлы приложения. Затем мы создадим папку clientкоторый будет содержать все файлы приложения React.

Файл node_modules будет содержать все пакеты npm для файла server.js. Файл node_modules будет автоматически создан при установке пакетов NPM.

Далее нам нужно создать файл server.js. В этом файле будет размещен сервер Express, который будет выступать в качестве нашего бэкэнда. В файл package.json будет автоматически сгенерирован при запуске команды в терминале npm init -y.

Создайте React-приложение

В терминале перейдите в корневой каталог с помощью команды cd и выполните следующие команды:

$cd express-react-app
$npx create-react-app client

Приведенные выше команды создадут приложение React с именем client внутри корневого каталога.

ЧИТАТЬ   Путь от варяг к персам

Экспресс-настройка сервера

Следующим шагом будет создание экспресс-сервера в файле server.js.

Из терминала перейдите в корневой каталог и выполните следующую команду:

$npm init -y

Команда автоматически сгенерирует файл package.json. Затем нам нужно будет запустить следующую команду для установки Express, и она будет сохранена как зависимость в файле. package.json.

$npm install express --save

Теперь отредактируйте файл server.js следующее :

const express = require('express'); //Строка 1
const app = express(); //Строка 2
const port = process.env.PORT || 5000; //Строка 3

// Сообщение о том, что сервер запущен и прослушивает указанный порт 
app.listen(port, () => console.log(`Listening on port ${port}`)); //Строка 6

// Создание GET маршрута
app.get('/express_backend', (req, res) => { //Строка 9
  res.send({ express: 'YOUR EXPRESS BACKEND IS CONNECTED TO REACT' }); //Строка 10
}); //Строка 11

Строки 1 и 2 — включают модуль Express и позволяют использовать его внутри файла server.js.

Строка 3 — Установите порт, на котором будет работать сервер Express.

Строка 6 — в консоли появится сообщение о том, что сервер работает нормально.

Строки 9 и 11 настраивают маршрут GET, который мы получим позже из нашего клиентского приложения React.

настройка прокси

На этом этапе сервер разработки веб-пакета был автоматически сгенерирован при выполнении команды create-react-app. Наше приложение React работает на основе внешнего интерфейса Webpack Development Server.

Webpack Development Server (WDS) — это инструмент, который помогает разработчикам вносить изменения во внешний интерфейс веб-приложения и автоматически отображает эти изменения в браузере без необходимости обновления страницы.

Он отличается от других инструментов, которые делают то же самое, потому что содержимое пакета не записывается на диск в виде файлов, а сохраняется в памяти. Это преимущество чрезвычайно важно при отладке кода и стилей.

Мы можем настроить запросы прокси-API со стороны клиента на API-интерфейс на стороне сервера. Серверный API (Express-сервер) будет работать на порту 5000.

ЧИТАТЬ   Выступление губернатора и беспорядки в Сочи. Как концерты довели певицу МакSим до серьезной алкогольной зависимости и что стало последней каплей

Сначала настройте прокси для доступа к каталогу client и найти файл package.json. Добавьте в него следующую строку.

“proxy”: “http://localhost:5000”

Измененный файл package.json будет выглядеть так:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "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"
    ]
  },
  "proxy": "
}

Измененный файл package.json позволит Webpack проксировать запросы API на внутренний сервер Express, работающий на порту 5000.

Вызов внутреннего сервера Express из React

Сначала зайдите в папку client/src и изменить файл App.jsчтобы это выглядело так:

import React, { useEffect, useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  
  const [state, setState] = useState(null);

  const callBackendAPI = async () => {
    const response = await fetch('/express_backend');
    const body = await response.json();

    if (response.status !== 200) {
      throw Error(body.message)
    }
    return body;
  };
  
  // получение GET маршрута с сервера Express, который соответствует GET из server.js 
  useEffect(() => {
    callBackendAPI()
    .then(res => setState(res.express))
    .catch(err => console.log(err));
  }, [])

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>

      {/* вывод данных, полученных с сервера Express */}
      <div>
          {state}
      </div>
    </div>
  );
}

export default App;

Внутри крючка useEffect() функция называется callBackendAPI(). Эта функция будет извлекать данные из ранее созданного маршрута на сервере Express. При получении ответа на запрос fetchзначение res.express находится в состоянии state используя функцию setState(). Тогда значение state отображается внутри элемента <div> для отображения на странице.

ЧИТАТЬ   В вашем родном городе самая худшая рождественская елка в Великобритании? Стокпорт лидирует в последнем обвинении в самой трагической праздничной елке после того, как британские города жалуются на использованные украшения

Запуск приложений

Для запуска приложения перейдите в корневой каталог express-react-app и выполните следующую команду:

$cd express-react-app
$node server.js

После запуска файла server.js следующим шагом будет доступ к веб-браузеру по адресу «http://локальный: 5000/express_backend» и появится следующее сообщение:

успешный запуск экспресс-бэкенда

успешный запуск экспресс-бэкенда

Вышеприведенное демонстрирует, что наш сервер Express работает правильно и созданный нами маршрут GET работает, а также возможно получить этот маршрут со стороны клиента.

Также обратите внимание, что путь URL совпадает с путем, который мы указали в нашем маршруте GET в файле. server.js.

Затем перейдите в каталог client в терминале и выполните следующие команды:

$cd client
$npm start

Приведенные выше команды запустят сервер разработки React, который работает на порту 3000 и автоматически откроется в веб-браузере.

На экране появится следующее сообщение:

успешный запуск реагирующего приложения

успешный запуск реагирующего приложения

Наконец, мы отобразили данные, полученные от маршрута GET, в server.jsв нашем внешнем приложении React, как показано выше.

Если сервер Express не работает, сервер React продолжит работу. Однако соединение с серверной частью будет потеряно, и ничего не будет отображаться.

Заключение

Вы можете многое сделать с сервером Express, например, делать вызовы базы данных. Однако в этом руководстве мы сосредоточились на том, как быстро подключить клиентское приложение React к серверу Express на внутренней стороне.

Фрагменты кода и файлы, используемые в этом руководстве, можно найти в репозитории. GitHub по этой ссылке.

Удачи с вашим проектом!

Source

От admin