Как создать интерфейс React и бэкенд Node/Express и подключить их

kak sozdat interfejs react i bekend nodeexpress i podklyuchit ih?v=1656544933

от Жоао Энрике

dnWc1xneCDRNLaAoKcOZG7YFK0KJwhw2TU87
«два квадратных синих светодиодных фонаря» от израильского палацио на Unsplash

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

Я не буду подробно рассказывать о том, как работать с какой-либо из технологий, которые я упомяну в этом учебнике, но оставлю ссылку, если вы хотите узнать больше.

Вы можете найти весь код в это хранилище Я сделал для учебника.

Цель здесь – дать вам практическое руководство по настройке и подключению фронт-энд клиент и серверный API.

Прежде чем загрязнить руки, убедитесь, что на вашем компьютере запущен Node.js.

Создайте главный каталог проекта

В своем терминале перейдите в каталог, где вы хотите сохранить свой проект. Теперь создайте новый каталог для вашего проекта и перейдите к нему:

mkdir my_awesome_project
cd my_awesome_project

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

Этот процесс действительно прост.

Я буду использовать приложение create-react-app от Facebook, чтобы… вы догадались, легко создать приложение для реакции с именем клиента:

npx create-react-app client
cd client
npm start

Давайте посмотрим, что я сделал:

  1. Использовал npm npx для создания программы реакции и назвал ее клиентом.
  2. cd (изменить каталог) в каталоге клиента.
  3. Запустил программу.

В своем браузере выделите .

Если все в порядке, вы увидите страницу приветствия. Поздравляю! Это значит, что теперь у вас есть базовые знания Отреагировать приложение, работающее на вашей локальной машине. Легко верно?

Чтобы остановить программу реагирования, просто нажмите Ctrl + c в вашем терминале.

Создайте программу Express

Ладно, это будет так же просто, как и предыдущий пример. Не забудьте перейти в верхнюю папку вашего проекта.

Я использую Express Application Generator, чтобы быстро создать скелет программы и назвать его API:

npx express-generator api
cd api
npm install
npm start

Давайте посмотрим, что я сделал:

  1. Использовал npm npx для глобальной инсталляции экспресс-генератора.
  2. Использовал экспресс-генератор для создания экспресс-приложения и назвал его api.
  3. cd в каталоге API.
  4. Установлены все зависимости.
  5. Запустил программу.

В своем браузере выделите .

Если все в порядке, вы увидите страницу экспресс-приветствия. Поздравляю! Это значит, что теперь у вас есть базовые знания Экспресс приложение, работающее на вашей локальной машине. Легко верно?

Чтобы остановить программу реагирования, просто нажмите Ctrl + c в вашем терминале.

Настройка нового маршрута в Express API

Ладно, испачкаем руки. Пора открыть свой любимый редактор кода (Я использую VS Code) и перейдите к папке вашего проекта.

Если вы назвали реагировать на приложение как клиент и экспресс-приложение как APIвы найдете две основные папки: клиента и api.

  1. Внутри API каталог, перейдите к bin/www и измените номер порта в строке 15 из 3000 на 9000. Позже мы будем запускать обе программы одновременно, поэтому это позволит избежать проблем. Результат должен быть примерно таким:
m7e3LsFolz6988HgYjgdDuP3DPY1Ix3F8u5u
my_awesome_project/api/bin/www

2. Включено api/маршрутысоздать testAPI.js файл и вставьте этот код:

var express = require(“express”);
var router = express.Router();

router.get(“/”, function(req, res, next) {
    res.send(“API is working properly”);
});

module.exports = router;

3. На api/app.js файл, вставьте новый маршрут в строку 24:

app.use("/testAPI", testAPIRouter);

4. Ладно, вы приказываете Express использовать этот маршрут, но вам все равно это нужно. Давайте сделаем это в строке 9:

var testAPIRouter = require("./routes/testAPI");

Единственные изменения в строке 9 и строке 25. Это должно закончиться примерно так:

hG-IcH7kyM8nj1VO43Mgo1nZGI0hsVhvAfFi
my_awesome_project/api/app.js

5. Поздравляем! Вы создали новый маршрут.

Если вы запускаете программу API (в своем терминале перейдите в каталог API и «npm start”), и перейдите к в своем браузере, вы увидите сообщение: API работает правильно.

Подключение клиента React к Express API

  1. В вашем редакторе кода поработаем в клиента каталог. ОТКРЫТО app.js файл, расположенный в my_awesome_project/client/app.js.
  2. Здесь я буду использовать Получить API чтобы получить данные с API. Просто вставьте этот код после объявления Class и перед методом render:
constructor(props) {
    super(props);
    this.state = { apiResponse: "" };
}

callAPI() {
    fetch("")
        .then(res => res.text())
        .then(res => this.setState({ apiResponse: res }));
}

componentWillMount() {
    this.callAPI();
}

3. Внутри метода визуализации вы найдете a <тег. Давайте изменим его так, чтобы он отображалсяapiResпонс:

<p className="App-intro">;{this.state.apiResponse}</p>

В конце этого файл должен выглядеть примерно так:

dswag4EEuA3vcVmZ9cs7rxJwOayb-SW6HiI8

Я знаю!!! Это было немного многовато. Копийст – ваш друг, но вы должны понимать, что вы делаете. Давайте посмотрим, что я здесь сделал:

  1. В строчках с 6 по 9 мы вставили конструктор, инициализирующий состояние по умолчанию.
  2. В строках с 11 по 16 мы вставили метод callAPI() который будет получать данные из API и сохранять ответ this.state.apiResponse.
  3. В строках с 18 по 20 мы вставили метод жизненного цикла реакции под названием componentDidMount(), что выполнит callAPI() метод после монтирования компонента
  4. Последним, в строке 29, я использовал <;p> для отображения абзаца на нашей клиентской странице с текстом, который мы получили из API.

Какого черта!! CORS?

О да, детка! Мы почти кончили. Но если мы запустим обе наши программы (клиент и API) и перейдем к нему, вы все равно не найдете ожидаемого результата, отображаемого на странице. Если вы откроете инструменты разработчика Chrome, вы поймете, почему. В консоли вы увидите эту ошибку:

Невозможно загрузить: на запрашиваемом ресурсе нет заголовка «Access-Control-Allow-Origin». Поэтому Origin’ не разрешается получить доступ. Если непрозрачный ответ отвечает вашим потребностям, установите для запроса режим no-cors, чтобы получить ресурс с выключенным CORS.

Это просто решить. Нам просто нужно добавить CORS в наш API, чтобы разрешить запросы из разных источников. Давайте сделаем именно это. Вы должны проверить здесь, чтобы узнать больше о CORS.

  1. В своем терминале перейдите в каталог API и установите файл CORS пакет:
npm install --save cors

2. В редакторе кода перейдите в каталог API и откройте файл my_awesome_project/api/app.js файл.

3. В строке 6 требуют CORS:

var cors = require("cors");

4. Теперь в строке 18 «скажи» экспресс использовать CORS:

app.use(cors());

API app.js файл должен закончиться примерно так:

NouexIhM99Tn-eKYJ0wJjRJUCbIwww8Lyr61
my_awesome_project/api/app.js

Отличная работа. Все готово!!

В порядке! Мы все готовы!

Теперь запустите обе ваши программы (клиент и API) в двух разных терминалах, используя файл npm start команда.

Если вы перейдете к в своем браузере, вы должны найти что-то вроде этого:

Fwq4HE7hMM2Z5Um3U9xuwCVzlZSAeSvr9U1c

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

Далее я поработаю над некоторыми дополнительными пособиями, например, как подключить это к базе данных MongoDB и даже как запустить все это внутри контейнеров Docker.

Как говорит мой хороший друг:

Будьте сильными и кодируйте!!!

…и не забудьте быть прекрасными сегодня 😉

Добавить комментарий

Ваш адрес email не будет опубликован.