Автор оригинала: FreeCodeCamp Community Member.
React Freeend, подключенные к Backend узла, представляет собой комбинацию по утесу для любого приложения, которое вы хотите построить.
Это руководство предназначено для того, чтобы помочь вам максимально эффективно создавать полнотечные проекты.
Давайте посмотрим, как настроить весь проект, используя React и Node с нуля и развернуть его в Интернет.
Инструменты, которые вам понадобятся
- Убедитесь, что узел и NPM установлены на вашем компьютере. Вы можете скачать как на nodejs.org (NPM включен в установку вашего узла)
- Используйте редактор кода по вашему выбору. Я использую и лично рекомендую использовать VSCode. Вы можете скачать VSCode на Code.visualstudio.com Отказ
- Убедитесь, что у вас установлен Git на вашем компьютере. Это необходимо для развертывания нашего приложения с Heroku. Вы можете получить это в git-scm.com.
- Счет в heroku.com Отказ Мы будем использовать Heroku, чтобы публиковать наше приложение в Интернут полностью бесплатно.
Шаг 1: Создайте свой узел (Express) Backend
Сначала создайте папку для вашего проекта, называется React-Node-App
(Например).
Затем перетащите эту папку в свой редактор кода.
Чтобы создать проект нашего узла, запустите следующую команду в своем терминале:
npm init -y
Это создаст файл package.json, который позволит нам отслеживать все наши сценарии приложений и управлять любыми зависимостями нашими потребностями приложения узла.
Наш серверный код будет жить в папке то же имя: Сервер
Отказ Давайте создадим эту папку.
В нем мы разместим один файл, из которого мы запустим наш сервер: index.js
Отказ
Мы будем использовать 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}`); });
Затем в нашем терминале мы будем установить экспресс в качестве зависимости, чтобы использовать его:
npm i express
После этого мы создадим сценарий в Package.json, который начнет наш веб-сервер, когда мы запустим его с NPM начать
:
// server/package.json ... "scripts": { "start": "node server/index.js" }, ...
Наконец, мы можем запустить наше приложение, используя этот скрипт, запустив начну NPM в нашем терминале, и мы должны увидеть, что он работает на порту 3001:
npm start > node server/index.js Server listening on 3001
Шаг 2: Создайте конечную точку API
Мы хотим использовать наш узел и Express Server в качестве API, чтобы он мог дать наше данные ACT-приложения, изменить эти данные или сделать какую-либо другую работу только сервер.
В нашем случае мы просто отправим наше приложение Action сообщение, которое говорит «Привет с сервера!» в объекте json.
Код ниже создает конечную точку для маршрута /API
Отказ
Если наше приложение React React делает запрос на этот маршрут, мы ответим (используя Res
, который означает ответ) с нашими данными JSON:
// server/index.js ... app.get("/api", (req, res) => { res.json({ message: "Hello from server!" }); }); app.listen(PORT, () => { console.log(`Server listening on ${PORT}`); });
Примечание. Обязательно разместите это выше app.listen.listen. функция.
Поскольку мы внесли изменения в наш код узла, нам нужно перезапустить наш сервер.
Для этого завершить сценарий запуска в терминале, нажав команду/Ctrl + C. Затем перезапустите его, запустив NPM начать
очередной раз.
И проверить это, мы можем просто посетить http://localhost: 3001/API
В нашем браузере и посмотрите наше сообщение:
Шаг 3: Создайте свой React Fressend
После создания нашей бэкенда давайте перейдем к интерфейсу.
Откройте вкладку «Другой терминал» и используйте приложение Create-React-App для создания нового проекта RACT с именем клиент
:
npx create-react-app client
После этого у нас будет приложение React со всеми его зависимостями.
Единственное изменение, которое мы должны сделать, это добавить свойство под названием прокси
к нашему package.json файл.
Это позволит нам сделать запросы на наш сервер узла без необходимости обеспечения происхождения, он работает (http://localhost: 3001) каждый раз, когда мы сделаем сетевой запрос к нему:
// client/package.json ... "proxy": "http://localhost:3001", ...
Затем мы можем запустить наше приложение React, запустив его сценарий запуска, который такой же, как наш сервер узла. Сначала убедитесь, что CD
в недавно созданную клиентскую папку.
После этого начнется на localhost: 3000
:
cd client npm start Compiled successfully! You can now view client in the browser. Local: http://localhost:3000
Шаг 4: Сделайте HTTP-запросы от реагирования на узел
Теперь, когда у нас есть рабочее приложение React React, мы хотим использовать его, чтобы взаимодействовать с нашим API.
Давайте посмотрим, как получить данные из /API
Конечная точка, которую мы создали ранее.
Для этого мы можем отправиться в App.js
Компонент в нашем SRC
Папка и сделать HTTP-запрос с использованием USEFFECT.
Мы сделаем простой запрос на получение, используя API Fetch на нашу Backend, а затем наши данные возвращаются как JSON.
Как только у нас есть данные, возвращенные нам данные, мы получим свойство сообщений (чтобы захватить наше приветствие, которое мы отправили с сервера), а затем поместите его в государственную переменную под названием данные
Отказ
Это позволит нам отображать это сообщение на нашей странице, если у нас есть. Мы используем условную в нашем JSX, чтобы сказать, что если наши данные еще нет, покажите текст «Загрузка …».
// 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 (); } export default App;{!data ? "Loading..." : data}
Шаг 5: Разверните свое приложение в Интернет с помощью Heroku
Наконец, давайте разверним наше приложение в Интернет.
Во-первых, в нашей клиентской папке убедитесь, что удалите Git Repo, который автоматически инициализируется приложением Create-React-App.
Это важно для развертывания нашего приложения, потому что мы собираемся настроить Git Reppo в корневой папке нашего проекта ( React-Node-App
), а не в клиент
:
cd client rm -rf .git
Когда мы развертываем, и наш узел, и Fressend Reactend будут поданы в том же домене (i.e. mycoolapp.herokuapp.com).
Мы видим, как наши запросы обрабатываются нашим узел API, поэтому нам нужно написать какой-нибудь код, который будет отображать наше приложение React, когда он запрашивается нашим пользователем (например, когда мы идем на домашнюю страницу нашего приложения).
Мы можем сделать это обратно в Сервер/index.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')); });
Этот код сначала разрешит узел для доступа к нашему встроенному проекту реагирования, используя Express.Static
Функция для статических файлов.
И если запрос на получение приходит в то, что не обрабатывается нашими /API
Маршрут, наш сервер ответит на наше приложение React.
Этот код позволяет развернуть наше приложение React и Node для развертывания в том же домене.
Тогда мы можем сказать нашему приложению узла, как это сделать, добавив построить
Сценарий к нашему серверу Package.json Файл, который создает наше приложение React для производства:
// server/package.json ... "scripts": { "start": "node server/index.js", "build": "cd client && npm install && npm run build" }, ...
Я также рекомендовал предоставить поле под названием «Двигатели», где вы хотите определить версию узла, которую вы используете для создания вашего проекта. Это будет использоваться для развертывания.
Вы можете получить вашу версию узла, запустив Узел -в
И вы можете поставить результат в «Двигатели» (I.E. 14.15.4):
// server/package.json "engines": { "node": "your-node-version" }
После этого мы готовы развернуть использование Heroku, поэтому убедитесь, что у вас есть учетная запись в Heroku.com Отказ
Как только вы войти в систему и смотрите на вашу приборную панель, вы выберете новое> Создайте новое приложение и укажите уникальное имя приложения.
После этого вы захотите установить Heroku CLI на своем компьютере, чтобы вы могли развернуть ваше приложение всякий раз, когда вы внесите какие-либо изменения, используя GIT. Мы можем установить CLI, запустив:
sudo npm i -g heroku
Как только это установлено, вы войдете в Heroku через CLI, используя Heroku Login
команда:
heroku login Press any key to login to Heroku
После того, как вы вошли в систему, просто нужно следовать инструкциям по развертыванию для нашего созданного приложения в вкладке «Развернуть».
Следующие четыре команды инициализируют новый GIT REPO для нашего проекта, добавьте наши файлы к нему, зафиксируйте их и добавьте Git Remote для Heroku.
git init heroku git:remote -a insert-your-app-name-here git add . git commit -am "Deploy app to Heroku"
Тогда самый последний шаг – публиковать наше приложение, нажав дистанционное удаление Heroku Git, мы просто добавили:
git push heroku master
Поздравляю! Наш Add React и Node and Node Live! 🎉.
Когда вы хотите внести изменения в свое приложение, идущие вперед (и разверните их), вам просто нужно использовать Git, чтобы добавить свои файлы, совершить их, а затем подтолкнуть к нашему удалению Heroku:
git add . git commit -m "my commit message" git push heroku master
Хотите построить реальные приложения, такие как YouTube, Instagram и Twitter с React? Вот как.
В конце каждого месяца я буду выпустить эксклюзивный курс, показывающий вам, как создать полный клон приложения с реагированием от начала до конца.
Хотите быть уведомленным, когда следующий курс падает? Присоединяйтесь к списку ожидания здесь Отказ