reagent

A minimalistic ClojureScript interface to React.js http://reagent-project.github.io/
ruben.hamers 2020-05-28T04:09:10.027200Z

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.

unbalanced 2020-05-28T19:17:53.032800Z

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

unbalanced 2020-05-28T19:19:31.033Z

specifically his understanding re-frame course

unbalanced 2020-05-28T19:20:17.033200Z

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

ruben.hamers 2020-06-13T06:09:19.157600Z

Thx for pointing me to re-frame. Spend the past couple of days studying the project, watching some content on youtube and reading the docs. It is very well documented and seems really easy. especially with their client side template which is exactly what I need. thx guys!

ruben.hamers 2020-06-13T06:09:42.157800Z

kudos ;0

ruben.hamers 2020-05-28T04:19:18.027300Z

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

2020-05-28T04:30:42.028200Z

The docs from reframe are great as well.

juhoteperi 2020-05-28T05:15:46.028400Z

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

Ruben.Hamers 2020-05-28T06:43:42.028600Z

thx

2020-05-28T09:04:01.028800Z

framer motion is easy to use and very powerful

2020-05-28T09:06:05.029400Z

(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)

2020-05-28T09:06:46.029600Z

(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"]])

2020-05-28T09:07:01.029800Z

You could do some amazing animations with it

Spaceman 2020-05-28T14:22:41.030300Z

@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
-----------------------------------------------------------------------

2020-05-28T14:23:36.031200Z

Yes you can remove (<class ...)

2020-05-28T14:24:18.031600Z

It is roosta/herb

Spaceman 2020-05-28T14:32:11.031800Z

I have the following now:

[:&gt; motion/animate-presence
     [:&gt; 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"]]
And that gives in the console: react-dom.development.js:24037 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of vendo.cart.cart`.` at createFiberFromTypeAndProps (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:504:389>) at createFiberFromElement (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:505:255>) at eval (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:197:268>) at reconcileChildren (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:244:90>) at finishClassComponent (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:269:433>) at updateClassComponent (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:267:61>) at beginWork$1 (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:312:88>) at HTMLUnknownElement.callCallback (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:527:204>) at Object.invokeGuardedCallbackImpl (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:529:430>) at invokeGuardedCallback (<http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:5:463>)

Spaceman 2020-05-28T14:34:14.032Z

why would that be?

Spaceman 2020-05-28T14:45:30.032200Z

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

Spaceman 2020-05-28T15:01:26.032400Z

@ouvasam?

unbalanced 2020-05-28T19:17:53.032800Z

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

unbalanced 2020-05-28T19:19:31.033Z

specifically his understanding re-frame course

unbalanced 2020-05-28T19:20:17.033200Z

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