ClojureBA · nberger · Jun 2, 2018 · Jun 2, 2018 · facundoolano · Jun 2, 2018
diff --git a/demo/reagentdemo/common.cljs b/demo/reagentdemo/common.cljs
@@ -2,8 +2,9 @@
   (:require [reagent.core :as r]
             [reagent.debug :refer-macros [dbg println]]))
 
-(defn demo-component [{:keys [expected comp src complete no-heading]}]
-  (r/with-let [showing (r/atom false)]
+(defn demo-component [{:keys [expected comp src hint complete no-heading]}]
+  (r/with-let [showing-solution (r/atom false)
+               showing-hint (r/atom false)]
     [:div
      (when expected
        [:div.demo-example.clearfix
@@ -18,16 +19,26 @@
              [:h3.demo-heading "Actual output "])
            (if-not complete
              [:div.simple-demo [comp]]
-             [comp])])])
+             [comp])])
+        (when hint
+          [:div
+           [:a.demo-example-hide {:on-click (fn [e]
+                                              (.preventDefault e)
+                                              (swap! showing-hint not)
+                                              nil)}
+            (if @showing-hint "hide" "show")]
+           [:h3.demo-heading "Hint"]
+           (when @showing-hint
+             hint)])])
 
      (if src
        [:div.demo-source.clearfix
         [:a.demo-example-hide {:on-click (fn [e]
                                            (.preventDefault e)
-                                           (swap! showing not)
+                                           (swap! showing-solution not)
                                            nil)}
-         (if @showing "hide" "show")]
+         (if @showing-solution "hide" "show")]
         (when-not no-heading
           [:h3.demo-heading "Solution"])
-        (when @showing src)]
+        (when @showing-solution src)]
        [:div.clearfix])]))
diff --git a/demo/reagentdemo/intro.cljs b/demo/reagentdemo/intro.cljs
@@ -132,9 +132,16 @@
      and to be fast enough by default that you rarely have to care
      about performance."]
 
-     [:p "A very basic Reagent component may look something like this: "]
+     [:p "Vamos a empezar con un ejemplo de componente Reagent básico:"]
      [demo-component {:expected simple-component
                       :comp     solutions/simple-component
+                      :hint     [:div
+                                 [:p "Components in reagent use "
+                                  [:a {:href "https://github.com/weavejester/hiccup"}
+                                   "hiccup syntax"]
+                                  ". Here's an example: "]
+                                 [:code (s/syntaxed "[:p \"I like it \" [:span {:style {:color :green}} \"green\"]]")]
+                                 [:p "Now try to write your solution on solutions/simple-component (in the file src/reagentdemo/solutions.cljs), in such a way that it looks like the example above."]]
                       :src      (s/src-of [:simple-component])}]
 
      [:p "You can build new components using other components as

diff --git a/demo/reagentdemo/solutions.cljs b/demo/reagentdemo/solutions.cljs
@@ -4,7 +4,7 @@
    [reagent.core :as r]))
 
 (defn simple-component []
-  [:div "Hello!"])
+  [:div "Fix me in reagentdemo.solutions/simple-component"])
 
 (defn simple-parent []
   [:div "Fix me in reagentdemo.solutions/simple-parent"])