В этой статье мы создадим веб-сайт React, предоставляемый сетевым приложением Node.js, созданным с помощью Express. Я объясню каждый шаг настройки, чтобы помочь вам ознакомиться со всеми технологиями, которые мы будем использовать.

Требования

Чтобы следовать этому руководству, вам понадобятся:

  • NodeJS, наша среда выполнения JavaScript
  • Yarn, наш менеджер зависимостей

Репозитории

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

Узел

Создайте папку «src», в которой есть папки «клиент» и «сервер».

В папке сервера создайте файл JavaScript «index.js», например:

В терминале введите:

Node src/server/index.js

Если ваша установка выполнена правильно, появится запрос «Hello world».

Пряжа и горячая перезагрузка

Запуск репозитория

Пряжа

Yarn — менеджер зависимостей. Мы должны его инициализировать. Для этого мы должны выполнить:

Yarn init -y

Мы используем --yes/-y, чтобы пропустить вопросы Yarn и создать файл package.json на основе значений по умолчанию.

package.json будет содержать много важных данных (имя пакета, лицензия, зависимости, скрипты и т. д.). Не стесняйтесь настраивать его, но будьте осторожны, если хотите изменить зависимости.

Горячая перезагрузка

Мы добавим наши первые зависимости в package.json:

Yarn add -D nodemon

Мы используем --dev/-D для добавления зависимостей в категорию devDependencies. Это означает, что зависимости будут использоваться для рабочего процесса разработки, а не для запуска нашего кода.

Nodemon — это пакет, который будет вести себя точно так же, как Node, и включать процесс горячей перезагрузки. Это означает, что каждый раз, когда мы пишем в файл, прослушиваемый Nodemon (файлы .js, .mjs, .coffee, .litcoffee и .json по умолчанию), он автоматически перезагружает наш скрипт. Это убережет нас от траты времени на остановку и перезапуск наших скриптов.

Итак, мы добавим наш первый скрипт "dev": "nodemon src/server/index.js" в package.json, например:

Теперь мы можем запустить:

Yarn dev

В терминале будет напечатано «Hello world», но если вы пойдете, измените это сообщение в src/server/index.js и сохраните файл. Вы увидите новое сообщение без перезапуска скрипта.

выражать

Запуск репозитория

Экспресс — это веб-фреймворк, который предоставит нам множество инструментов для управления серверной частью. Прежде всего, давайте возьмем экспресс:

Yarn add express

После этого мы изменим наш файл src/server/index.js, чтобы добавить Express.

Что же делает этот файл? Во-первых, мы требуем Express и создаем константу App, эта переменная будет нашим приложением. Во-вторых, мы вызываем метод use. Use позволяет нам установить промежуточное ПО. Для этого метод будет принимать два аргумента: path (который определяет, когда будет вызван callback) и callback. Здесь path — это наш корневой путь, что означает, что каждый запрос будет пойман, а наш callback — это простой ответ «Hello world». Use отправить две переменные в обратный вызов, который является запросом и ответом.

Маршруты настроены, запускаем сервер. Для этого вызовем метод listen. Эта функция проста: вы даете ему port (здесь 3000), и Express будет прослушивать каждый запрос на этом порту.

Давай попробуем ! Просто запустите свой скрипт!

Yarn dev

Теперь на вашем localhost вы увидите Hello word!

Реагировать

Запуск репозитория

Это суровая часть. Нам нужно настроить несколько инструментов для использования React. Поначалу может показаться довольно сложным разобраться во всех конфигурационных файлах, но не сдавайтесь, это проще, чем кажется.

Вебпак

Webpack — сборщик модулей. Он позаботится о том, чтобы у нас были все необходимые зависимости.

Давайте возьмем зависимости Webpack:

yarn add webpack webpack-dev-middleware
yarn add -D webpack-cli html-webpack-plugin

Создайте папку webpack/ в корне и добавьте в нее файл с именем webpack.config.js .

Итак, не бойтесь. Вы легко поймете. Мы прочитаем конфигурацию с module.exports (l8) до конца.

  • Первый вариант — mode , mode может быть ни один, производство или разработка, Webpack использует это, чтобы знать, как он должен себя вести.
  • Второй вариант — entry, туда мы помещаем наш внешний индексный файл, который будет src/client/index.js.
  • Третий вариант — output , он сообщает Webpack, что делать с скомпилированным файлом.
  • resolve — это простой список расширений импорта по умолчанию, поэтому нам не придется писать одно и то же расширение снова и снова.
  • module определить, как мы используем модули. Например, мы приводим здесь правило, которое гласит: «Я беру все, что заканчивается на .js или .jsx, кроме папки node_modules, и загружаю это с помощью babel-loader (о загрузчике мы поговорим чуть позже)
  • plugins — это простой массив, в который мы должны поместить плагины, которые хотим использовать. Здесь мы используем html-webpack-plugin, взяв шаблон src/client/index.html для создания общедоступного index.html с автоматически добавленной ссылкой на файл, скомпилированный Webpack.

Давайте добавим наш шаблон src/client/index.html .

Вавилон

Babel — это компилятор JavaScript, который позволяет нам писать современный JavaScript, не беспокоясь. Он позаботится о том, чтобы переписать наш JavaScript следующего поколения в JavaScript, совместимый с браузером.

Babel потребуется несколько пакетов:

yarn add -D @babel/core @babel/node @babel/preset-env @babel/preset-react babel-loader

Мы уже сказали Webpack, что он должен использовать babel-loader для управления файлами JavaScript. Итак, Babel попытается преобразовать этот код JavaScript, но перед этим он будет искать файл конфигурации ( .babelrc и/или babel.config.js ) в корневой папке. Мы добавим файл .babelrc, например:

Предустановка babel — это набор плагинов, которые облегчат нам жизнь. Мы используем @babel/preset-env, чтобы позволить нам использовать последнюю версию JavaScript, и @babel/preset-react, чтобы сделать React совместимым с транспилятором Babel.

Реагировать

React — это библиотека JavaScript для создания пользовательских интерфейсов. Это будет очень, очень полезно для нас, потому что позволит нам разработать весь наш интерфейс с многоразовыми и легко обслуживаемыми компонентами.

Давайте добавим реагирующие пакеты!

yarn add react react-dom

Наша точка входа в реакцию будет src/client/index.js.

Опишем этот файл. В каждом файле мы должны импортировать React, даже если мы не используем его напрямую. В этом файле мы импортируем React-dom, который предоставит основной метод рендеринга. Он принимает приложение в качестве первого аргумента (здесь наше приложение — это простая функция, которая возвращает html «Hello world») и HTML-селектор ванильного javascript, чтобы знать, где отображать приложение.

Вывод первой части

Таким образом, мы увидели базовую архитектуру приложения Express & React. Я не ожидал, что напишу историю в несколько частей, но нам еще есть что сказать (стилизация, связь между бэкендом и фронтендом, тестирование и мокирование, оптимизация и т.д…). Итак, я собираюсь написать еще одну часть этого урока!

До скорой встречи во второй части!