Clojurians Log v2

Hey guys, Could anyone point me in the direction of a nice reagent, front end only tutorial? Ive done some clojure development so I'm familar with the language, yet I don;t know REACT or cljs very well (meaning the tutorial does not have to include explanation of clojure syntax, functions, stm etc.) I have build a reitit api but I want to add a reagent front end to it as a separate project. Thx! PS: I'm sorry, this question gets asked many times I gues.

This 1 seems nice, yet is a general explanation of reagent: https://purelyfunctional.tv/guide/reagent/

The docs from reframe are great as well.

Reagent readme points to few others also (Learn Reagent and Lambda Island).

thx

framer motion is easy to use and very powerful

(ns app.motion
    (:require
     [framer-motion :refer (motion MagicMotion  AnimateSharedLayout AnimatePresence useSpring useMotionValue useTransform useViewportScroll) :as motion]
     [cljs-bean.core :refer [bean ->clj ->js]]))

  (def div
    (.-div motion))

  (def span
    (.-span motion))

  (def li
    (.-li motion))

  (def img
    (.-img motion))

  (def button
    (.-button motion))

  (def input
    (.-input motion))

  (def textarea
    (.-textarea motion))

  (def label
    (.-label motion))

  (def transform #(motion/transform (->js %1) (->js %2) (->js %3)))
  (def animate-presence AnimatePresence)

(defn my-component
  []
  [:> motion/animate-presence
   [:> motion/div
     {:key :my-component
       :class [:my-component (<class styles/my-component)]
       :variants {:initial {:opacity 0}
                  :animate {:opacity 1}
                  :exit {:opacity 0}}
       :initial :initial
       :animate :animate
       :exit :exit}
    "My component"]])

You could do some amazing animations with it

@ouvasam that gives me

--------------------------------------------------------------------------------
  12 |     [:> motion/animate-presence
  13 |      [:> motion/div
  14 |       {:key :my-component
  15 |        :class [:my-component (<class styles/my-component)]
-------------------------------------^------------------------------------------
 Use of undeclared Var vendo.cart/<class
--------------------------------------------------------------------------------
  16 |        :variants {:initial {:opacity 0}
  17 |                   :animate {:opacity 1}
  18 |                   :exit {:opacity 0}}
  19 |        :initial :initial
-----------------------------------------------------------------------

Yes you can remove (<class ...)

It is roosta/herb

I have the following now:

[:> motion/animate-presence
     [:> motion/div
      {:key :my-component
       :class [:my-component]
       :variants {:initial {:opacity 0}
                  :animate {:opacity 1}
                  :exit {:opacity 0}}
       :initial :initial
       :animate :animate
       :exit :exit}
      "My component"]]

why would that be?

would you please share a self-contained, working example?

@ouvasam?

I would strongly recommend investing in http://purelyfunctional.tv. I'll also point out that right now and for not much longer Eric is letting people buy all access passes but soon you'll have to buy his courses individually

specifically his understanding re-frame course

I would also argue that re-frame is an excellent approach for developing front end code. At some point you will no longer need it, and you will know when you reach that point