keechma

Keechma stack. Mention @U050986L9 or @U2J1PHYNM if you have any questions
Danny Almeida 2020-04-07T03:39:43.002400Z

Hi, where can I find the source for this example app <https://keechma.com/news/hello-world-app-in-keechma-with-routing/> ? Is there a getting started guide on how to create a very basic app using keechma ? The hello-world app example does not say how to put everything together and what codes goes in which file. Any help appreciated.

mihaelkonjevic 2020-04-07T09:01:02.003200Z

@dionysius.almeida RealWorld app is how we would structure a bigger app with routing, dataloading, forms https://github.com/gothinkster/clojurescript-keechma-realworld-example-app

mihaelkonjevic 2020-04-07T09:03:40.004Z

and for the simple routing app, this is the complete source:

(ns <http://examples.hello-world-routing.app|examples.hello-world-routing.app>
  (:require-macros
   [reagent.ratom :refer [reaction]])
  (:require
   [reagent.core :as reagent]
   [keechma.ui-component :as ui]
   [keechma.controller :as controller]
   [keechma.app-state :as app-state]))

(defn hello-world-routing-render [ctx]
  (let [current-name (or (get-in @(ui/current-route ctx) [:data :name]) "")]
    [:div
     [:label {:for "name"} "Enter your name"]
     [:div
      [:input
       {:id "name"
        :on-change (fn [e] (ui/redirect ctx {:name (.-value (.-target e))}))
        :value current-name}]]

     (when (seq current-name)
       [:h1 (str "Hello " current-name)])]))

(def hello-world-routing-component
  (ui/constructor
   {:renderer hello-world-routing-render}))

(def app-definition
  {:components   {:main hello-world-routing-component}
   :html-element (.getElementById js/document "app")})

(def pretty-route-app-definition
  {:components   {:main hello-world-routing-component}
   :html-element (.getElementById js/document "app")
   :routes       ["name/:name"]})

(def pretty-route-with-defaults-app-definition
  {:components   {:main hello-world-routing-component}
   :html-element (.getElementById js/document "app")
   :routes       [["" {:name "Student"}]
                  ["name/:name" {:name "Student"}]]})

Danny Almeida 2020-04-07T10:11:40.007400Z

@mihaelkonjevic Thank you 👍:skin-tone-3: I managed to get the hello world app working after some messing around. I'm new to front-end world, so exploring a few options including keechma and fulcro. Cheers 🙂