Рубрики
Без рубрики

Как создать реактивный интерфейс и узел / экспресс-бэкэнд и подключить их

João Henriquique, как создать реактивный интерфейс и узел / экспресс-бэкэнд и соединить их «два квадратных синих светодиодных света» Израиля Паласио на Unsplashin в этой статье, я буду проходить через процесс создания простого приложения RACT RACT и подключением к простому узлу / экспрессу

Автор оригинала: FreeCodeCamp Community Member.

Джоу Хенрике

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

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

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

Целью здесь – дать вам практическое руководство о том, как настроить и подключить Фронтальный клиент и Back-End API Отказ

Прежде чем мы приступым наши руки, убедитесь, что у вас есть Node.js работает на вашей машине.

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

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

mkdir my_awesome_project
cd my_awesome_project

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

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

Я буду использовать Facebook Create-raction-app Чтобы … Вы уже догадались, легко создать приложение rac joad named клиент :

npx create-react-app client
cd client
npm start

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

  1. Использовал NPM NPX. Чтобы создать приложение React и названное ИТ-клиентом.
  2. CD (изменить каталог) в каталог клиента.
  3. Начал приложение.

В вашем браузере перейдите к http://localhost: 3000/ Отказ

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

Чтобы остановить ваше приложение React, просто нажмите Ctrl + C в вашем терминале.

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

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

Я буду использовать Экспресс-генератор приложений Чтобы быстро создать прикладное скелет и назовите его API:

npx express-generator api
cd api
npm install
npm start

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

  1. Используется NPX NPX для установки Express-Generator во всем мире.
  2. Используется Express-Generator для создания приложения Express и названное IT API.
  3. CD в каталог API.
  4. Установлены все зависимости.
  5. Начал приложение.

В вашем браузере перейдите к http://localhost: 3000/ Отказ

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

Чтобы остановить ваше приложение React, просто нажмите Ctrl + C в вашем терминале.

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

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

Если вы назвали Реагирование приложения как клиент а также то Экспресс приложение как API Вы найдете две основные папки: клиент а также API.

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

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. Это должно в конечном итоге что-то подобное:

5. Поздравляю! Вы создали новый Маршрут Отказ

Если вы начнете свое приложение API (в своем терминале, перейдите к каталогу API и « Начните NPM» ) и перейдите в http://localhost: 9000/testapi В вашем браузере вы увидите сообщение: API работает правильно.

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

  1. В вашем редакторе кода давайте работать в клиент каталог. Открыть app.js Файл расположен в my_awesome_project/client/app.js Отказ
  2. Здесь я буду использовать Fetch API Чтобы получить данные из API. Просто вставьте этот код после декларации класса и перед методом Render:
constructor(props) {
    super(props);
    this.state = { apiResponse: "" };
}

callAPI() {
    fetch("http://localhost:9000/testAPI")
        .then(res => res.text())
        .then(res => this.setState({ apiResponse: res }));
}

componentWillMount() {
    this.callAPI();
}

3. Внутри метода Render вы найдете < ; P> Тег. Давайте изменим это так, чтобы он сделал s adires Понсе:

;{this.state.apiResponse}

В конце этого файла должен выглядеть что-то подобное:

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

  1. На линии от 6 до 9 мы вставили конструктор, который инициализирует состояние по умолчанию.
  2. На линии от 11 до 16, мы вставили метод callapi () которые будут получать данные из API и хранить ответ на this.state.apiresponse.
  3. На линии от 18 до 20 мы вставили метод жизненного цикла реагирования под названием ComponentDIDMount (), это будет выполнять callapi () Метод после компонентных креплений.
  4. Последнее, на линии 29, я использовал < ; P> Метка Чтобы отобразить абзац на нашей клиентской странице с текстом, который мы получили от API.

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

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

Это просто решить. Мы просто должны добавлять CORS на нашу API для разрешения запросов по перекрестным происхождениям. Давайте сделаем только это. Вы должны Проверьте здесь Чтобы узнать больше о Рост .

  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 Файл должен закончиться что-то вроде этого:

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

Ok! Мы все набор!

Теперь начните обе ваши приложения (клиент и API), в двух разных клеммах, используя NPM начать команда.

Если вы перейдите к http://localhost: 3000/ В вашем браузере вы должны найти что-то вроде этого:

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

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

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

… и не забудьте быть удивительным сегодня;)

Оригинал: “https://www.freecodecamp.org/news/create-a-react-frontend-a-node-express-backend-and-connect-them-together-c5798926047c/”

Читайте ещё по теме: