Этот пост — урок 1 онлайн-курса React от JS Mega Tools.

В наши дни очень легко создать полноценное веб-приложение, используя только JavaScript, без необходимости изучения какого-либо нового языка. В этом курсе мы создадим приложение для поиска жилья для путешествий со стеком MERN, что означает Mongo (база данных), Express (серверная структура), React (клиентская библиотека, которую вы комбинируете с другие интерфейсные инструменты, такие как Redux и React Router для создания фреймворка на стороне клиента) и Node.js (позволяет выполнять javascript на сервере).

Mongo — это база данных NoSQL, которая использует документы (вроде объектов javascript) для хранения данных. По сути, это дает вам больше свободы в том, как вы структурируете свои данные. Он очень популярен среди разработчиков javascript.

React — популярный современный фреймворк, который позволяет быстро создавать масштабируемые, быстрые и современные веб-приложения с легкостью и минимумом ошибок. Он хорошо работает с Redux и Mobx для управления состоянием, но также может использоваться сам по себе для небольших приложений.

Node.js позволяет запускать javascript на сервере. Он также предоставляет вам инструменты, облегчающие разработку кода на стороне сервера.

Express.js — это фреймворк для Node.js, он построен на основе Node.js API. Короче говоря, он предоставляет вам более простой способ написать приложение, чем чистый Node.js.

Мы рассмотрим каждую часть, но больше сосредоточимся на React (и связанных с ним инструментах).

Давайте создадим корневой каталог для нашего проекта. Давайте назовем это «реакция-путешествие-размещение».

mkdir react-travel-accomodations
cd react-travel-accomodations

В нашем корневом каталоге нужно будет инициализировать наш проект:

npm init
git init

npm init создаст для нас файл package.json. git init заставит git отслеживать проект. После того, как мы запустили эти две команды, нам нужно создать каталог для нашего внешнего кода — код реакции, давайте вызовем каталог react-ui. Мы будем использовать приложение create-реагировать-приложение. Это рекомендуемый создателями React способ создания приложений с помощью React. Что он делает, как вы, наверное, догадались, создает реагирующее приложение :). Если у вас его нет на компьютере, вы можете установить его через npm

npm install -g create-react-app

После его установки выполните следующую команду:

create-react-app react-ui

Это создаст проект реакции с собственным package.json в папке react-ui. create-react-app настраивает сервер разработки веб-пакетов, поэтому вам не нужен отдельный сервер, пока вы разрабатываете свой проект. Но для запросов API и для производства вам понадобится отдельный сервер, который будет находиться в нашей корневой папке.

Структура папки react-ui будет выглядеть следующим образом:

README.md
node_modules
package-lock.json
package.json
public
src

Папка node_modules содержит дополнительные модули, необходимые для работы нашего приложения. package.json требуется для конфигурации проекта, а package-lock.json улучшает установку модулей. общая папка содержит index.html и файлы, необходимые браузеру, такие как favicon.ico и manifest.json. Содержимое общедоступной папки будет скопировано в папку сборки при сборке приложения для производства. И, наконец, у нас есть папка src, в которой будет находиться весь код интерфейса React. Он имеет следующее содержание:

App.css
App.js
App.test.js
index.css
index.js
logo.svg
registerServiceWorker.js

index.js — это входной файл javascript приложения, index.css — это глобальная таблица стилей приложения. App.js — код основного компонента приложения, App.css — его таблица стилей, App.test.js — юнит-тесты. create-react-app не использует систему, подобную css-модулям, поэтому вам нужно либо выполнить извлечение из create-react-app (npm run eject), либо убедиться, что ваш css не имеет конфликтующих правил. Из-за отсутствия модулей css, встроенных в приложение create-react-app, каждый файл css можно считать глобальным и влияющим на все приложение. Файл registerServiceWorker.js предназначен для использования Service Workers для приложения, вам не нужно беспокоиться об этом для этого проекта.

Давайте пока оставим react-ui и вернемся в корневой каталог, чтобы настроить серверную часть для производства. Сначала нам нужно установить Express:

npm install —save express

затем нам нужно создать файл server.js со следующим содержимым:

const express = require('express');
const path = require('path');
const app = express();
const port = process.env.PORT || 5000;
app.use(express.static(path.resolve(__dirname, './react-ui/build')));
app.get('*', function(request, response) {
  response.sendFile(path.resolve(__dirname, './react-ui/build', 'index.html'));
});
app.listen(port, () => console.log('Example app listening on port 5000!'));

Мы импортируем экспресс-модули и модули пути через функцию require. Экспресс-фреймворк представлен экспресс-модулем, а модуль пути — это служебный режим из Node.js. Затем мы инициализируем Express, помещая его в константу приложения.

Давайте выберем порт, на котором будет работать наше приложение. Я выбрал Heroku в качестве хостинга для этого проекта. Это повлияет на следующую строку кода следующим образом. Node предоставляет нам объект process.env. Heroku добавляет к этому объекту свойство PORT. Он будет содержать порт, который Heroku предоставляет для нашего приложения. Если мы запускаем приложение локально, переменная PORT не будет установлена, и мы сможем запустить сервер на любом порту, который захотим, в данном случае 5000. Эта строка кода может быть изменена в соответствии с вашим хостинг-провайдером, а вторая часть || оператор может быть настроен в соответствии с предпочтениями вашего локального порта.

Теперь, когда мы определили порт для нашего приложения, мы собираемся назначить каталог для статических ресурсов (изображения, стили, клиентский javascript и т. д.) нашего приложения. Для этого мы будем использовать функцию express.static. Он принимает аргумент пути, который мы создаем с помощью функции Node path.resolve, которая разрешает путь, из его аргументов. В нашем случае мы используем __dirname, который содержит путь файловой системы к текущему модулю (server.js) и ./react-ui/build, каталог, в который сценарии create-react-app копируют статические файлы во время сборки. Поэтому мы говорим здесь: Всякий раз, когда вы получаете запрос на что-то внутри react-ui/build (например: «http://example.com/react-ui/build/some_image.png’), отправьте его в виде файла . Таким образом, вы можете поместить в эту папку любой файл, который хотите отправить пользователю, и вам не нужно определять для него отдельный маршрут.

Здесь следует отметить одну вещь: мы передаем результаты вызова express.static в app.use, app.use используется для добавления промежуточного программного обеспечения для выражения. В нашем случае промежуточное ПО — это то, что возвращается из вызова express.static. Промежуточное ПО является ключевой концепцией экспресса, это функция, которая получает объект запроса (представляет собой http-запрос пользователя) и объект ответа (представляет собой http-ответ сервера пользователю). Он может сделать что-то полезное с помощью этих объектов и вызвать следующую промежуточную функцию. Таким образом, если вы хотите что-то сделать после того, как сервер получил запрос пользователя, но до того, как он отправил ответ, вы можете использовать функции промежуточного программного обеспечения.

Далее мы собираемся определить маршрут для нашей домашней страницы. Нравится:

app.get(‘*', function(request, response) {
  response.sendFile(path.resolve(__dirname, './react-ui/build', 'index.html'));
});

Здесь мы сообщаем Express, что всякий раз, когда сервер получает HTTP-запрос GET для любой страницы, сервер должен отправить в ответ файл index.html (статические файлы будут отправлены правильно, потому что мы использовали express.static перед определением маршрута). Почему бы нам просто не отправить файл index.html в ответ на корневой путь ('/')? Представьте себе следующий сценарий. Пользователь получил index.html в ответ на корневой путь, затем он или она, выполняя некоторые действия в приложении, переходит к /some_path (навигация была обработана в приложении, и пользователь не вводит его в адресную строку браузера) . Но если он решит перейти по этому пути через адресную строку браузера или обновить страницу, закрыть-снова открыть браузер и т. д., сервер отправит ответ 404. Если мы отправим страницу index.html в ответ на любой запрос, приложение сможет предоставить пользователю правильный контент в соответствии с запрошенным путем (с помощью React Router).

Последняя строка кода настраивает сервер на прослушивание пользовательских запросов на любом порту, выбранном ранее.

Теперь вы можете запустить команду npm start в корне проекта, затем открыть другое окно терминала или вкладку терминала и изменить каталог на react-ui и запустить npm start там.

Ваше приложение должно быть доступно по адресу localhost:5000, потому что вы запустили npm start в корневом каталоге проекта, и этот адрес обслуживается экспресс-сервером. Ваше приложение также доступно по адресу localhost:3000, поскольку вы запустили npm start в каталоге react-ui, этот адрес обслуживается сервером разработки webpack.

На этом этапе вы можете создать первый коммит git в проекте. Обязательно добавьте файл .gitignore в корневой каталог, чтобы не фиксировать лишние файлы. Вы можете посмотреть пример файла .gitignore в исходном коде этого урока на github.

Вот как вы создаете базовое приложение с React в Node. На следующем уроке мы настроим Redux и React Router.

Источник github для этого урока и всего курса находится по следующему адресу: https://github.com/jsmegatools/React-online-course.