Использование Elm в React

Эта статья содержит пошаговые инструкции по созданию приложения React (с create-react-app) и добавления в него компонента Elm (с react-elm-components), включая необходимый Webpack конфигурация. Если вы застряли, вы можете взглянуть на репо, которое я создал для проверки этого поста.

Есть много статей о том, почему нужно вводить Elm в проект React, и некоторые о различных технических аспектах, но ни одна из них не описывает базовые пошаговые инструкции. Эта статья призвана восполнить этот пробел и предоставить вам платформу для опробования более сложных вещей. Он использует популярные react-elm-components, но также стоит обратить внимание на elm-react-component, который более самоуверен и проще для обычных настроек.

Установить преквесты

Вам нужно будет установить следующие

Диспетчер пакетов узлов (npm)
Создать приложение React (npm install -g create-react-app в окне консоли)
Вяз

Создать приложение React

Откройте окно консоли, создайте каталог для приложения, перейдите к нему и создайте приложение для реагирования.

create-react-app .

Затем убедитесь, что он работает.

npm start

Это должно открыть браузер, показывающий вам приложение create-response-app по умолчанию.

См. Коммит run create-response-app в сопутствующем репозитории ».

Установите react-elm-components

React-elm-components - это компонент React, который добавляет некоторое удобство взаимодействию React / Elm. Это позволяет точно контролировать

Откройте другое окно консоли в том же каталоге.

npm install react-elm-components

Убедитесь, что сайт по-прежнему работает. Возможно, вам придется закрыть веб-сервер разработки, который вы запустили с npm start, а затем запустить его снова.

См. Коммит « установить react-elm-components в сопутствующем репозитории».

Импортировать react-elm-components

Добавьте import Elm from 'react-elm-components' в App.js.

См. Коммит « import react-elm-components в сопутствующем репозитории».

Добавить компонент Elm

Создайте src / elm / Buttons.elm, скопировав файл из сопутствующего репозитория. Этот файл является классическим примером Buttons из Документации Elm Arhitecture.

Добавить import Elm from 'react-elm-components' в App.js

Добавить import { Buttons } from './elm/Buttons' в App.js

На этом этапе приложение перестает работать. Это связано с тем, что Webpack не настроен для компиляции Elm, поэтому давайте исправим это.

См. Коммит « Добавить классический пример Elm Buttons и сослаться на него в сопутствующем репозитории».

Установите Elm в проект

elm-package - это менеджер пакетов Elm, который будет включен при установке Elm.

elm-package install

Добавить /elm-stuff в .gitignore

См. Коммит Install Elm Language в сопутствующем репозитории ».

Установить elm-webpack-loader

Webpack может использовать elm-webpack-loader для компиляции кода Elm в javascript.

npm install elm-webpack-loader --save-dev

См. Коммит Установить elm-webpack-loader в сопутствующем репозитории ».

Отредактируйте конфигурацию Webpack

Приложение Create-react-app не поддерживает Elm, поэтому нам нужно изменить конфигурацию Webpack. На этом этапе технически правильным является eject из приложения create-react-app. Однако, чтобы упростить понимание этого поста, мы собираемся аккуратно отредактировать конфигурацию внутри приложения create-react-app. Эти изменения будут потеряны при следующем обновлении приложения create-react-app.

Внесите следующие изменения в node_modules \ response-scripts \ config \ webpack.config.dev.js

Сообщите webpack разрешить файлы .elm

extensions: ['.js', '.json', '.jsx', '.elm'], // add .elm to the list of extensions to resolve

Попросите загрузчик файлов игнорировать файлы .elm

{
	exclude: [
	  /\.html$/,
	  /\.(js|jsx)$/,
	  /\.css$/,
	  /\.json$/,
	  /\.bmp$/,
	  /\.gif$/,
	  /\.jpe?g$/,
	  /\.png$/,
	  /\.elm$/, // Ask the file loader to ignore .elm files
	],
	loader: require.resolve('file-loader'),
	options: {
	  name: 'static/media/[name].[hash:8].[ext]',
	},
},

Зарегистрируйте elm-webpack-loader для обработки файлов .elm

// loader for elm files
{
	test: /\.elm$/,
	exclude: [/elm-stuff/, /node_modules/],
	loader: require.resolve('elm-webpack-loader')
},

Мы также хотим зафиксировать изменения в этом файле, который Git в настоящее время игнорирует, поэтому добавьте его в .gitignore.

*
!*/
!/node_modules/react-scripts/config/webpack.config.dev.js

Веб-сайт должен загрузиться, но отобразить предупреждения о том, что Elm и Buttons определены, но не используются. Это правда, так что давайте воспользуемся ими.

См. Коммит « Непослушное редактирование конфигурации webpack в репозитории компаньонов».

Компонент Display Elm Buttons

Добавьте <Elm src={Buttons} /> в App.js непосредственно перед финальным </div>.

Теперь приложение должно обновиться, чтобы отобразить компонент Buttons Elm.

См. Коммит Компонент Display Elm Buttons в сопутствующем репозитории ».

Заключение

Заставить Elm работать в React очень легко, если вы знаете, как это сделать.

Теперь, когда у вас работает базовое приложение, вы сможете следить за некоторыми из этих отличных статей, чтобы продолжить взаимодействие React / Elm.

Использование Elm в React - с нуля