Пошаговое руководство по настройке проекта React с помощью Node.js.

Всем привет, сегодня мы узнаем, как сделать очень простую настройку для нашего приложения React + Node.js.

Это будет пошаговое руководство по настройке вашего проекта React с помощью Node.js.

  1. Сначала создайте папку, скажем, назовем ее ReactNodeJS.
  2. Затем cd в эту папку.

3. Теперь запустите npm init -y , это создаст для нас новый проект с конфигурацией по умолчанию, здесь -yозначает да для всех настроек или конфигураций по умолчанию.

4. Затем в командной строке запустите npm i express , это установит экспресс-библиотеку, экспресс — это серверная платформа веб-приложений для создания RESTful API с Node.js.

5. В package.json добавьте это в блок сценария

"start": "node server/index.js"

6. Теперь создайте еще одну папку в ReactNodeJSfolder и назовите ее как сервер.

7. Откройте свой проект в коде Visual Studio или любой из ваших любимых IDE, создайте файл index.js в папке server и добавьте в этот файл приведенный ниже код.

// 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 start на терминале и проверьте свой терминал, вы должны увидеть эту строку: - «Сервер прослушивает порт 3001».

8. Создайте конечную точку в файле index.js вашего серверного проекта.

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

9. Перезагрузите сервер узла

10. Теперь снова запустите npm start и в браузере перейдите на http://localhost:3001/api, вы должны увидеть такой вывод:

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

  1. Создайте внешнее приложение, используя npx create-react-app client , здесь client — это имя вашего приложения.
  2. Теперь добавьте прокси-сервер в package.json проекта внешнего интерфейса, прокси-сервер в основном используется в среде разработки для облегчения связи между сервером и пользовательским интерфейсом. Нам нужно, чтобы внутренний сервер и пользовательский интерфейс работали на разных портах.
"proxy": "http://localhost:3001",

3. Теперь мы можем вызвать наш API внутри нашего проекта реакции следующим образом:

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

Теперь оставьте ваш серверный проект запущенным, откройте другой терминал и cd в папку client, запустите npm start и перейдите на http://localhost:3000/ в браузере. .

Вы должны увидеть результат.

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

Ссылка на репозиторий GitHub: — https://github.com/Kamal-Walia/ReactNode/blob/main/README.md

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.