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.
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
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!
kudos ;0
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"]]
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>)
why would that be?
would you please share a self-contained, working example?
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