1. Настройка окружения и архитектура приложения на Node.js и React
Настройка окружения и архитектура приложения на Node.js и React
Добро пожаловать в курс по Fullstack-разработке. В этой статье мы заложим фундамент вашего будущего приложения. Мы не просто установим программы, но и разберем, как именно взаимодействуют две ключевые технологии: Node.js на сервере и React на клиенте.
Архитектура Fullstack-приложения
Прежде чем писать код, важно понять, как устроена система. Fullstack-приложение на стеке MERN (MongoDB, Express, React, Node.js) или PERN (PostgreSQL) работает по клиент-серверной модели.
!Взаимодействие компонентов в Fullstack-архитектуре
Почему Node.js и React?
Главное преимущество этой связки — единый язык программирования. И фронтенд, и бэкенд пишутся на JavaScript. Это позволяет:
* Переиспользовать код (например, функции валидации данных). * Использовать общий менеджер пакетов (npm). * Легче переключаться между задачами сервера и клиента.
Установка и проверка Node.js
Основой всего окружения является Node.js. Это среда выполнения, которая позволяет запускать JavaScript вне браузера. Вместе с ней устанавливается npm (Node Package Manager) — инструмент для управления библиотеками.
Шаг 1: Установка
Перейдите на официальный сайт nodejs.org и скачайте версию LTS (Long Term Support). Это наиболее стабильная версия, рекомендуемая для большинства проектов.
Шаг 2: Проверка версий
После установки откройте терминал (Command Prompt, PowerShell или Terminal на macOS) и введите следующие команды:
Вы должны увидеть номера версий, например v20.11.0 и 10.2.4. Если вы видите ошибки, попробуйте перезагрузить компьютер или переустановить Node.js.
Структура проекта
Для учебного проекта мы будем использовать простую и понятную структуру, разделяющую код клиента и сервера. Создайте главную папку для вашего проекта, например my-fullstack-app.
Внутри неё мы создадим две подпапки:
* client — здесь будет жить React.
* server — здесь будет жить Node.js API.
Такой подход называется монорепозиторием (в упрощенном виде), так как весь код хранится в одном месте.
Настройка серверной части (Node.js + Express)
Начнем с бэкенда, так как он будет поставлять данные.
-y автоматически ответит «да» на все вопросы конфигурации:package.json — паспорт вашего проекта, где хранятся список зависимостей и скрипты запуска.Создание базового сервера
Создайте в папке server файл index.js и добавьте следующий код:
``javascript
const express = require('express');
const app = express();
const PORT = 5000;
// Базовый маршрут (endpoint) app.get('/api/hello', (req, res) => { res.json({ message: 'Привет от сервера Node.js!' }); });
app.listen(PORT, () => { console.log(Сервер запущен на порту T_{total}SVL50 \times 8 \times 1024 = 40960010 \times 10^6L$) играет огромную роль. Именно поэтому в архитектуре Node.js мы стараемся минимизировать количество запросов и объем передаваемых данных.
Итоги
Мы успешно подготовили рабочее место для Fullstack-разработки. Вот ключевые моменты:
* Архитектура: React отвечает за интерфейс, Node.js — за логику и данные.
* Окружение: Node.js и npm необходимы для запуска и управления зависимостями.
* Структура: Разделение на client и server упрощает поддержку кода.
* Связь: Для взаимодействия между портами (5173 и 5000) необходима настройка CORS на сервере.
* Инструменты: Vite — современный стандарт для сборки React-приложений.