Создание приложения с помощью React.js во внешнем интерфейсе и Node.js в серверной части

Комбинированная форма React.js front-end и Node backend может привести к великим вещам в мире разработки и программирования. Платформа обеспечивает надежную комбинацию для разработки приложения.

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

Инструменты, которые вам понадобятся в процессе

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

Вам нужно начать с того, чтобы убедиться, что Node и NPM установлены в вашей компьютерной системе. Вы можете загрузить обе платформы через Интернет и найти для них решение.
Когда у вас есть инструменты в вашей системе, вы можете выбрать редактор кода по вашему выбору. Редактор VSCode в настоящее время является лучшим на рынке и предпочитается большинством разработчиков и программистов.
Вы должны убедиться, что Git установлен в вашей системе. Наличие Git необходимо, можно развернуть с помощью Heroku. Вы можете скачать Git через Интернет.

Шаги по созданию приложения с помощью React.js и Node.js

Создание серверной части

Вам нужно начать с создания папки для вашего проекта. Как только эта папка будет готова, вы можете перетащить ее в редактор кода. При этом будет создан файл package.json, который позволит вам отслеживать все зависимости.

Вы будете использовать Express для создания веб-сервера, который будет запускать порт для 3001. Heroku определит значение кода при развертывании приложения. Будет запущен приведенный ниже код:

// server/index.js

const express = require("express");

const PORT = process.env.PORT || 3001;

const app = express();

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

Наконец, мы можем привести приложение в движение, упомянув следующее в порту 3001:

npm start

> node server/index.js

Server listening on 3001

Создание конечной точки API

Следующим шагом в этом процессе является создание конечной точки API. Эта конечная точка API поможет предоставлять данные приложения React.js, вносить изменения в данные и давать команды, которые может давать только сервер.

Мы инициируем эту операцию, отправив нашему приложению React.js сообщение, в котором говорится: «Привет с сервера. Код, упомянутый ниже, создаст правильную конечную точку для этого маршрута:

// server/index.js
...

app.get("/api", (req, res) => {
  res.json({ message: "Hello from server!" });
});

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

Сервер будет перезапущен, так как в код Node были внесены изменения. Вы можете протестировать код, запустив API локального узла в браузере.

Создание React.js Frontend

Третьим шагом в этом процессе является создание внешнего интерфейса для вашего приложения. Вы должны начать с открытия другой лаборатории терминала, чтобы создать новый проект React.js.

За этим последует использование приложения React.js со всеми зависимостями. Затем мы запустим приложение React.js, запустив сценарий запуска. Сценарий будет таким же, как и для Node Server.

Затем мы введем наш код на локальном хосте: 300:

cd client
npm start

Составлено успешно!

Теперь вы можете просматривать клиент в браузере.

Local:            http://localhost:3000

Выполнение HTTP-запросов

Четвертым шагом в этом процессе является создание HTTP-запросов для взаимодействия с API. Это можно инициировать, выполнив простой запрос GET через Fetch API. Запрос будет сделан в бэкенд, и данные могут быть возвращены в формате JSON.

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

// client/src/App.js

import React from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch("/api")
      .then((res) => res.json())
      .then((data) => setData(data.message));
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{!data ? "Loading..." : data}</p>
      </header>
    </div>
  );
}

export default App;

Инициация веб-развертывания

Пришло время развернуть приложение в Интернете. Первый шаг, который вы должны выполнить, — это удалить репозиторий Git, который находится в коде create-react-app. Это важный шаг, так как вам нужно развернуть репозиторий Git в корне проекта, а не в «клиенте».

cd client
rm -rf .git

После того, как мы развернем наш код, бот React.js фронтенд и бэкенд-коды Node будут обслуживаться в одном домене herokuapp. Мы увидим, как коды и запросы обрабатываются Node API. Нам нужен код, который поможет показать наше приложение React.js пользователям, когда им нужно его увидеть.

Это делается путем добавления приведенного ниже кода:

// server/index.js
const path = require('path');
const express = require('express');
...
// Have Node serve the files for our built React app
app.use(express.static(path.resolve(__dirname, '../client/build')));

// Handle GET requests to /api route
app.get("/api", (req, res) => {
  res.json({ message: "Hello from server!" });
});

// All other GET requests not handled before will return our React app
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '../client/build', 'index.html'));
});

Приведенный выше код позволяет развертывать как внешний интерфейс React.js, так и серверную часть Node.js в одном домене. Приведенный ниже код добавит новый репозиторий Git для проекта:

git init
heroku git:remote -a insert-your-app-name-here
git add .
git commit -am "Deploy app to Heroku"

Теперь ваше приложение готово и может использоваться с интерфейсом и серверной частью разработки React.js и Node.js.

Помощник в программировании