Приготовьтесь к развертыванию приложения 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 (если вы делаете это впервые, просто следуйте инструкциям на своем терминале, все будет в порядке). После этого мы инициализировали наш пакетный файл и можем добавлять к нему зависимости и скрипты. Итак, давайте добавим некоторые зависимости, которые нам понадобятся. Вот список:
- Бабел-ядро
- Бабель-погрузчик
- Babel-preset-es-2015
- Бабель-предустановка-реакция
- Копировать-webpack-плагин
- Css-загрузчик
- Извлечение-текст-веб-пакет-плагин
- Image-webpack-loader
- Json-загрузчик
- Sass-loader
- Стиль-загрузчик
- Коа
- Коа-конвертировать
- Коа-статика
- Реагировать
- Реакт-дом
- Webpack
- Webpack-dev-сервер
Добавьте их в свои зависимости и установите, запустив:
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, а вот живая версия приведенного выше кода. Наслаждаться! :)