React - это библиотека JavaScript для разработки пользовательских интерфейсов. Она позволяет создавать эффективные и масштабируемые веб-приложения, основанные на компонентной архитектуре.
Express.js - это минималистичный и гибкий веб-фреймворк для Node.js, который облегчает разработку веб-приложений и API. Он предоставляет простой интерфейс и набор функций, позволяющих быстро создавать серверы и маршрутизировать запросы.
Введение
Это руководство поможет вам разработать простое приложение на React и подключить его к серверу, созданному с использованием Node.js. Мы начнем с создания React приложения с помощью команды create-react-app
, а затем настроим его подключение к серверу Node.js c помощью proxy
.
Необходимые условия
Для успешного выполнения данного гайда будет полезно иметь следующее:
Предварительный опыт работы с Node.js, Express, npm и React.js.
Установленный Node.js.
Текстовый редактор, предпочтительно VS Code.
Веб-браузер, в данном случае Google Chrome.
Настройка структуры папок
![структура приложения структура приложения](https://habrastorage.org/getpro/habr/upload_files/d98/db3/c16/d98db3c1630fbb5f82949e79b75226a2.png)
Первым шагом будет создание корневой папки для нашего приложения с именем 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
внутри корневой директории.
Настройка сервера Express
Следующий шаг состоит в создании сервера Express в файле 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 приложения.
Настройка proxy
На этом шаге Webpack Development Server был автоматически сгенерирован при выполнении команды create-react-app
. Наше React приложение работает на Webpack Development Server на стороне фронденда.
Webpack Development Server (WDS) - это инструмент, который помогает разработчикам вносить изменения во фронтенд веб-приложения и автоматически отображает эти изменения в браузере без необходимости обновления страницы.
Он уникален по сравнению с другими инструментами, которые делают то же самое, поскольку содержимое пакета не записывается на диск в виде файлов, а хранится в памяти. Это преимущество крайне важно при отладке кода и стилей.
Мы можем настроить проксирование запросов API с клиентской стороны на API на серверной стороне. API на серверной стороне (Express сервер) будет работать на порту 5000.
Сначала настройте прокси для перехода в директорию 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": "http://localhost:5000"
}
Измененный файл 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="https://reactjs.org"
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://localhost:5000/express_backend", и будет отображено следующее сообщение:
![успешный запуск бэкенда Express успешный запуск бэкенда Express](https://habrastorage.org/getpro/habr/upload_files/3c0/3c2/315/3c03c23157c45c2e10ce347c1b1efede.png)
Вышеуказанное демонстрирует, что наш сервер Express работает должным образом, и созданный нами маршрут GET функционирует, а также возможно получение этого маршрута с клиентской стороны.
Также обратите внимание, что путь URL совпадает с путем, который мы указали в нашем маршруте GET в файле server.js
.
Затем перейдите в директорию client
в терминале и выполните следующие команды:
$cd client
$npm start
Вышеуказанные команды запустят React сервер разработки, который работает на порту 3000, и автоматически откроется в веб-браузере.
На экране будет отображено следующее сообщение:
![успешный запуск React App успешный запуск React App](https://habrastorage.org/getpro/habr/upload_files/012/922/fa1/012922fa1a888955e12710d87264e6db.png)
Наконец, мы отобразили данные, полученные с маршрута GET в server.js
, в нашем фронтенд React приложении, как было показано выше.
Если сервер Express отключен, сервер React всё равно будет продолжать работать. Однако связь с бэкендом будет потеряна, и ничего не будет отображаться.
Заключение
С помощью сервера Express можно сделать многое, например, осуществлять вызовы к базе данных. Однако в этом руководстве мы сосредоточились на том, как быстро подключить клиентское React приложение к серверу Express на стороне бэкенда.
Кодовые фрагменты и файлы, использованные в этом руководстве, можно найти в репозитории GitHub по этой ссылке.
Удачи в вашем проекте!