Пошаговое руководство по настройке проекта React с помощью Node.js.
Всем привет, сегодня мы узнаем, как сделать очень простую настройку для нашего приложения React + Node.js.
Это будет пошаговое руководство по настройке вашего проекта React с помощью Node.js.
- Сначала создайте папку, скажем, назовем ее ReactNodeJS.
- Затем
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 простых шагов, теперь давайте начнем с нашей внешней части приложения.
- Создайте внешнее приложение, используя
npx create-react-app client
, здесь client — это имя вашего приложения. - Теперь добавьте прокси-сервер в 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 .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.