Изменить: 10/06/2019 Я нахожусь в процессе создания жизнеспособного контейнера CodeSandbox с последними версиями ReasonReact. Это будет лучший живой документ и инструмент обучения, чем чтение статьи.
Чтобы увидеть код ReasonReact
- Официальная установка - рекомендуется, если у вас есть более 15 минут
- CodeSandBox - быстрый старт, немного устаревший API
- Repl.it - еще одна онлайн-среда
Чтобы увидеть код причины
- Official Reason REPL - выводит Reason, Ocaml и JS одновременно!
- Sketch.sh - блокнот Reason в стиле Jupyter.
Для кого эти советы?
В первую очередь, товарищи-разработчики Javascript, которые ищут причину 🤛 попробовать Reason. Я обнаружил, что падаю во множество маленьких дыр - дыр, о которых я хотел бы, чтобы кто-нибудь предупредил меня раньше. Итак, вот несколько сетей безопасности, составленных специально для вас: Немного о самом языке и своеобразном API ReasonReact. Вот репо.
Весь письменный код, если не указано иное, является автономным.
Версия причины ❗️
Пожалуйста, убедитесь, что мы на одной странице относительно версий.
1. Имя файла определяет имя модуля.
Модуль ниже - это минимальное тело для компонента React.
Вы визуализируете компонент в других файлах как <FirstComponent />, не <RandomComponent />. Здесь мы распределяем содержимое component в выражение make, аналогично тому, как мы пишем React: SomeComponent extends React.Component.
Подробнее о создании Компонентов Reason.
2. Импортируйте файлы, просто используя имя файла с большой буквы.
Здесь мы «импортируем» the
<FirstComponent />, модуль из шага 1.
Импорт файлов не требуется. Причина автоматически достигает заявленных модулей. Тем не менее, все еще существует концепция управления областью модуля с помощью Open. Затем какой-нибудь сборщик позаботится обо всем остальном и создаст за нас React. Хвала сборщикам пакетов!
Подробнее о том, как работают модули.
3. Преобразование между разными типами данных Reason.
Пнемоника для запоминания: «datatype_of_datatype ()»
Для преобразования между разными типами данных вы должны использовать"datatype_of_datatype" методы из глобальной Pervasives библиотеки.
Примечание. Я аннотировал типы, возвращаемые функцией, для ясности, однако Reason может сделать это, избавляя меня от необходимости это делать. Кроме того, для типов с плавающей запятой требуется десятичное число .. В коде см. Переменную integer10Again.
Подробнее о Типах данных Reason.
4. Не забудьте преобразовать базовые типы данных в элементы React.
На самом деле вы не забудете, потому что компилятор будет кричать на вас. Хотя, возможно, вы еще этого не понимаете.
Обратите внимание на использование ReasonReact.string(), ReasonReact.array(), ReasonReact.null в методе render.
Чтобы отобразить строку, используйте ReasonReact.string().
Чтобы отобразить массив, используйтеReasonReact.array(). Но помните. Есть промежуточный шаг, о котором я еще не упомянул: преобразование списков Reason в массивы. См. Различия между Списками и массивами.
Чтобы отобразить null, используйте ReasonReact.null.
⚠️ Предыдущие версии Re.React использовали .stringToElement, .arrayToElement.
Ознакомьтесь с официальной документацией ReasonReact.
5. Передача props и использование `~` и `_` с именами аргументов.
Помеченные параметры и игнорируемые переменные
ParentComponent отображает ChildComponent. Родитель передает строку как опору. Никаких фигурных скобок здесь не требуется! Но что требуется, это ~ в ~randomTextProp. Это синтаксис Reason для помеченных параметров, очень похожий на способность Python передавать именованные аргументы.
Вы можете спросить, почему символы подчеркивания _children и _self. Это просто потому, что я не использую эти переменные! Вы можете отключить компилятор от предупреждений, добавив _ к имени переменной.
6. Научитесь определять варианты и записи.
Структуры данных жизненной силы Разума
В Reason вы определяете варианты с разными конструкторами / тегами. Это тип данных, уникальный для Reason. Здесь я определяю вариант animal, который может быть Cat или Dog. Конструкторы действуют больше как логические примитивы (True и False), чем переменные. Сопоставление с образцом использует это преимущество. Это в следующей подсказке.
Чтобы создать записи (похожие на -ish объекты Javascript), я должен сначала определить запись типа cat с явными полями. Только после этого я могу определять переменные someCat и someDog. Однако, поскольку Horse не является конструктором animal, я получаю ошибку компилятора.
Дополнительная литература по вариантам.
Дополнительная информация о записях.
7. Сопоставление с образцом!
«Все эти упоминания о сопоставлении с образцом! Кто-нибудь, пожалуйста, скажите мне, что это, черт возьми! " - меня не было назад
Здесь я определяю переменную mac, а затем использую оператор switch для возврата некоторых строк на основе конструктора. И это все! Попробуй сам.
Сопоставление с образцом становится одним из ваших основных инструментов для написания логики и потоков данных в Reason. В системе React вы обычно будете использовать сопоставление с образцом для обработки вашей маршрутизации и рендеринга компонентов пользовательского интерфейса. Если вы используете Reason для решения задач кодирования, вы также довольно часто будете сопоставлять образцы с массивами, списками и кортежами.
Для более подробного объяснения сопоставления с образцом.
8. Обработайте состояние в ReasonReact с помощью reducerComponent.
ReducerComponent - знакомое, но уникальное дополнение к инструменту React. Сложно рассказать обо всех нюансах обработки состояния в сниппете, но давайте попробуем!
Это более тяжелый пример. Так что, если вы просто бегаете по экрану, притормозите здесь! ✋
Помимо мнений, стиль управления состоянием Redux встроен прямо в API. Основные игроки: state, action, initialState, reducer, ReasonReact.Update и self.send.
ReasonReact требует объявления всех state типов. Если бы я хотел контролировать состояние ввода, я бы определилtype state = { textState: string, counter: int}.
Далее, также требуется вариант action. Как и в Redux, где у нас есть создатели действий, наши action конструкторы определяют наши возможные действия.
Когда мы хотим обновить состояние, вместо отправки мы self.send конструктор с полезной нагрузкой, то есть Count(5).
Затем метод reducer выполняет сопоставление с образцом для всех возможных тегов action (также называемых конструкторами) и соответственно обновляет состояние с помощью ReasonReact.Update().
initialState не требует пояснений. 😏
Существует целый спектр методов жизненного цикла компонентов, API-интерфейсов редуктора и нюансов, которые мы не рассмотрели, но этого должно быть достаточно, чтобы подогреть ваш аппетит!
9. Функции высшего порядка в Разуме.
Мы рассмотрим только пару основных методов List, чтобы увидеть базовый шаблон. Предположим, что варианты и типы записей предопределены.
Стандартные методы Reason помещают свой первичный ввод (то есть массив / список) в качестве своего последнего аргумента. Эта сигнатура функции работает совместно с поведением компилятора по умолчанию для каррирования всех функций Reason. Мы поговорим об этом позже.
Для получения дополнительной информации о методах stdlib List.
Для получения дополнительной информации об остальной части stdlib.
10. Стиль с использованием импортированной таблицы стилей или встроенной.
Официальная библиотека или методика стилизации еще не стандартизированы.
Небольшой совет. 😄
1) Импортируйте файл CSS или
2) Встроенный CSS в качестве решения «CSS-in-JS».
11. Модуль Bucklescript’s Belt предоставляет нам стандартную библиотеку, более похожую на Javascript.
BuckleScript - это компилятор Reason для JS. Он также содержит некоторые дополнительные API.
Belt был создан для отражения стандартных подписей Javascript. Здесь первичный ввод listOfAnimals помещается в первую позицию. Обратите внимание, что использование Belt отменяет стандартные методы Reason List из-за open.
Подробнее о Поясе.
12. Функции в Reason каррированы автоматически.
Функциональная композиция - это весело, но, честно говоря, я все еще плохо их пишу.
Каррирование означает разбиение аргументов одной функции на серию унарных вызовов функций. Поскольку Reason применяет этот механизм для всех функций во время компиляции, частичное применение функций, т.е. listPlus5, возможно свободно. Опуская второй аргумент в таких методах, как List.map, мы сообщаем Reason, что позже мы передадим в функцию последний аргумент - гибкие и компонуемые функции.
Есть два оператора, которые максимизируют использование каррирования.
13. Операторы pipe | ›и fast pipe -› позволяют объединять функции в цепочки.
Вы либо помещаете свой основной ввод как первый аргумент, либо как последний аргумент.
Оператор трубы | ›
Вместо того, чтобы писать List.map(add5, someList), мы можем написать someList |> List.map(add5). Это очень удобно при написании сложной бизнес-логики. Обратите внимание на второй пример someMappedReasonElements с элементами React. Вместо вложенных вызовов функций мы получаем красиво напечатанную цепочку. Сравните это с советом № 4, где нам пришлось назначать переменные без надобности.
Оператор Fast pipe - ›
Если вы пристрастились к Belt методам, то ->, безусловно, станет вашим лучшим другом. Обычно вы обнаруживаете, что очищаете вложенные функции с помощью ->. Я предпочитаю не использовать open Belt локально, чтобы не заменить Array.of_list на Array пояса.
/* Without the operators */FunctionA(functionB(functionC()))/* With the pipe operators */functionC() -> functionB -> functionA
Подробнее о операторе быстрой трубы.
14. Получение и обработка JSON - ReasonReact встречает мир
Требуется определенная работа, чтобы ввести внешний мир в систему безопасных типов Reason.
NPM установить bs-fetch и @glennsl/bs-json.
Bs-fetch предоставляет оболочку для JS-выборки.
Bs-json предоставляет утилиты для «декодирования» и переноса JSON в систему типов Reason. Изящная часть - это вызовет ошибки, если полученный тип недействителен. 💥
Итак, вот как вы получаете и декодируете JSON в Reason.
Если вы ломаете голову, пытаясь понять синтаксис Reason, не бойтесь! В модуле Decode мы создаем две функции post и posts, которые обертывают наш JSON и добавляют к ним типы через bs-json.
Фрагмент Js.Promise демонстрирует, как получить URL-адрес fakeRealApi и передать ответ JSON в конвейер для обработки. В конце концов, в ReasonReact вы получите self.send полезную нагрузку. Действительно, посмотрите полный код. Разбор кода полезен для мозга. Плохо для глаз.
Вот еще примеры для fetch GET и POST.
15. Роутер идет в комплекте!
Многие внешние библиотеки или принципы React встроены прямо в ReasonReact.
Код для маршрутизации требует гораздо большего, чем позволяет фрагмент. Но давайте разберемся с этим, и тогда вы сможете изучить полный код.
Маршрутизация - это всего лишь вопрос обработки состояния внутри нашего приложения Re.React. В рамках жизненного цикла didMount компонента ReasonReact.Router.watchUrl передает запись URL своей функции обратного вызова. С этим URL-адресом мы можем сопоставить шаблон url.path, чтобы вернуть один Route конструктор. Обратите внимание, что затем мы self.send вычисляем выражение. Вне экрана reducer получает этот новый Route и соответствующим образом обновляет наше внутреннее состояние.
Теперь нужно просто отрисовать наш пользовательский интерфейс на основе этого состояния следующим образом:
Вы можете увидеть в Sketch.sh нетривиальную систему маршрутизации.
16. Чтобы использовать популярные библиотеки npm, найдите привязки Reason.
16/15. Потому что я забочусь.
Надеюсь, в библиотеке, которую вы планируете использовать, уже есть привязки Reason. В противном случае вам придется написать их самостоятельно. Быстрого поиска в Google по запросу bs reason * library name * должно быть достаточно. Вы можете использовать Redex - индекс пакета Reason.
Хочу больше?
Неполный список ресурсов для получения дополнительных сведений.
- Изучение ReasonML и функционального программирования Акселя Раушмайера
- Канал Discord
- Форумы ReasonML
- Документы ReasonML
- Документы ReasonReact, Журнал изменений
- Твиттер
Спасибо за внимание! Надеюсь, это было полезно. Прямо сейчас может быть немного каменисто, но где веселье в плавном парусе? 🚢
Особая благодарность доктору Акселю Раушмайеру за его невероятную книгу Изучение ReasonML. Он практически единолично помог мне разобраться в глубине основополагающих принципов Reason.
Также благодарим инженеров с открытым исходным кодом, которые работают над Reason. Особый привет этим людям, которых я, возможно, никогда не встречу, чтобы они научили меня азам через их письма, подкасты, твиты и код: Ченгу Лу, Джареду Форсайту, Нику Графу и Джордану Уолку.
