вступление

Проработав несколько лет в 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.