вступление
Проработав несколько лет в JavaScript и React, в этом году я начал изучать вселенную ClojureScript и Reagent. Я хотел бы поделиться с вами несколькими паттернами, написанными на Реагенте и ClojureScript, которые я обычно использую в мире Реакта и нахожу полезными и в Реагенте. Я надеюсь, что эти примеры помогут вам растопить лед между вселенными JavaScript и ClojureScript.
В этой статье я хотел бы начать с простого, но, вероятно, наиболее часто используемого.
Сопоставить массив с элементами React
Учтите, что у нас есть таблица, которую мы хотим отобразить на основе конфигурации. Заголовки этой таблицы могут быть представлены в виде массива меток, которые мы хотели бы отобразить как th
элементов.
Реагировать на версию JavaScript
В React решение довольно простое. Мы используем метод JavaScript Array map
и возвращаем элемент JSX th
с уникальным key
и содержимым.
Версия реагента
В ClojureScript теги JSX представлены как ключевые слова (в нашем случае :tr
и :th
). Эти ключевые слова понятны для Реагента так же, как JSX понимается для Реакта.
Реагировать на версию Lodash
Еще одно отличие, которое вы можете увидеть в версии Реагент (несмотря на совершенно другой синтаксис Clojure 😃), — это немного другой способ отображения массива с помощью Clojure map
function.
Однако, когда мы перепишем наш пример React JavaScript, используя lodash (или любую другую подобную служебную библиотеку JavaScript) и немного поиграем с форматированием, мы увидим больше общего между двумя языками.
Резюме
На этом простом примере я хотел показать вам, что у JavaScript/React и ClojureScript/Reagent больше общего, чем вы можете подумать на первый взгляд. Как показывает пример с lodash иногда ключом к пониманию является просто другой способ решения той же проблемы, чем вы привыкли 😉
Конечно, в более сложных примерах будет больше различий, но, по крайней мере, вам будет легко начать играть с ClojureScript, если у вас есть опыт работы с JavaScript.
Весь код примеров из этой статьи можно найти в моем репозитории code-examples.