Приготовьтесь к развертыванию приложения React.js

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

Что мы собираемся сделать, так это сначала запустить сервер Koa, который будет обслуживать статический файл js. Этот файл будет объединен с помощью webpack, который также поможет нам добавить такие вещи, как React.js, Scss, Аккуратный, Изображения и т. д. Как только мы убедимся, что все работает нормально, мы перенесем наше приложение на рок. на сервере heroku.

И вот настал момент, которого мы все ждали. Откройте терминал / командную строку и создайте файл package.json для своего приложения:

npm init

И вы обычно получаете что-то вроде

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields and exactly what they do.
Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (some_name)

Итак, теперь введите любую информацию, которую вы хотите, в package.json (если вы делаете это впервые, просто следуйте инструкциям на своем терминале, все будет в порядке). После этого мы инициализировали наш пакетный файл и можем добавлять к нему зависимости и скрипты. Итак, давайте добавим некоторые зависимости, которые нам понадобятся. Вот список:

Добавьте их в свои зависимости и установите, запустив:

npm install

Хорошо, теперь у нас есть кое-что для начала. Наши зависимости настроены, теперь давайте настроим наш пакет (webpack.config.js):

Как видите, мы установили наш входной файл main.js. После этого мы добавляем несколько загрузчиков для json, react, images и scss. Наконец, мы используем ExtractTextPlugin для компиляции файлов scss, которые включены в js, в файл main.css и CopyWebpackPlugin в перенесите наш индексный файл в наш каталог сборки.

Теперь, когда у нас есть проект, мы можем приступить к написанию кода. Итак, нам понадобятся файлы index.html и main.js, которые будут содержать наш код реакции.

Начнем с index.html, и он должен выглядеть примерно так:

И давайте создадим компонент React, который будет отображать простой «привет, мир» в элементе DOM с идентификатором «root»:

Бонус: Как вы заметили, в нашем коде есть дополнительное если. Эта вещь в основном проверяет, загружено ли все, что включено в наш файл index.html, а затем запускает функцию запуска. Действительно полезно для предотвращения многих видов состояний гонки (пример: ваша сеть медленная, поэтому ваш файл пакета загружается быстрее, чем некоторые внешние библиотеки)

Хорошо, теперь наше приложение готово к запуску, мы можем добавить эти сценарии в наш package.json и запустить dev, чтобы попробовать:

“scripts”: {
 “test”: “test”,
 “dev”: “webpack-dev-server — progress — colors — watch”,
 “build”: “webpack — progress — watch”
},

Он уже запущен, так что давайте попробуем развернуть его вживую. Нам понадобится базовый файл server, который будет обслуживать наш файл пакета во время работы на heroku:

И последнее, но не менее важное: мы должны добавить сценарий start, чтобы ваш package.json в конце выглядел примерно так:

Вот и все! Ты готов! Теперь вы можете развернуть свое приложение. :)

Здесь я хотел бы сообщить вам, что в нашем примере мы не используем Procfile. Это работает, потому что heroku создает тип веб-процесса по умолчанию для загрузки сервера приложений с помощью команды npm start. Вы можете создать свой собственный Procfile, перейдя по ссылке выше.

Я постараюсь продолжить писать, чтобы объяснять вещи, которые меня беспокоили, или я не мог найти где-то ясного и простого решения. За эту статью я хотел бы поблагодарить моего друга Джонатана Панагиотидиса, который очень помог мне своим вкладом.

Вот репозиторий github, а вот живая версия приведенного выше кода. Наслаждаться! :)