<story><title>Things every React.js beginner should know</title><url>https://camjackson.net/post/9-things-every-reactjs-beginner-should-know</url></story><parent_chain><item><author>escherize</author><text>I&amp;#x27;m a huge fan of Clojure&amp;#x27;s Hiccup library.  It allows the user to make html like the following.&lt;p&gt;Here&amp;#x27;s a function that always returns true - but it could do any kind of data access. It is just plain Clojure.&lt;p&gt;&lt;pre&gt;&lt;code&gt;    (defn selected? [] true)
&lt;/code&gt;&lt;/pre&gt;
Here is a datastructure that represents html:&lt;p&gt;&lt;pre&gt;&lt;code&gt;    [:h2 {:class (when (selected?) &amp;quot;selected&amp;quot;)} &amp;quot;Hello&amp;quot;]
&lt;/code&gt;&lt;/pre&gt;
Calling the function hiccup.core&amp;#x2F;html on that datastructure yeilds an html string like this:&lt;p&gt;&lt;pre&gt;&lt;code&gt;    &amp;quot;&amp;lt;h2 class=&amp;#x27;selected&amp;#x27;&amp;gt;Hello&amp;lt;&amp;#x2F;h2&amp;gt;&amp;quot;
&lt;/code&gt;&lt;/pre&gt;
So that&amp;#x27;s great for _strings_ right?  But there is an awesome library for ClojureScript called Reagent. And it uses those simple datastructures to generate react components!!  I put some more examples at: &lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;hiccup.space&quot; rel=&quot;nofollow&quot;&gt;http:&amp;#x2F;&amp;#x2F;hiccup.space&lt;/a&gt;</text></item><item><author>aikah</author><text>&amp;gt; ... that then expand to be turing-complete and basically offer everything their primary language offered in the beginning.&lt;p&gt;then they wrote template languages on top of the template language to separate layout and logic again ( PHP vs Twig&amp;#x2F;Smarty )&lt;p&gt;so maybe we need to step back a little and figure out how to write a language that wouldn&amp;#x27;t need a different syntax for logic and layout. This family of languages exists already, but since current developers grew up with C like languages, it is not that popular.&lt;p&gt;IMHO the best compromise is direct support for XML syntax inside languages (which Javascript had at some point with E4X) because I don&amp;#x27;t think anyone will be able to make developers use LISP like languages on a wide scale. JSX, with some modifications and standardisation could also be a solution.</text></item><item><author>matt4077</author><text>This is a debate that has been going on since I started in the late 90ies.&lt;p&gt;You need some sort of logic in your views, no matter what system you use, i. e. loops or formatting dates.&lt;p&gt;Because people are raised on the &amp;quot;don&amp;#x27;t mix logic &amp;amp; layout&amp;quot; maxim, they feel dirty when they write sich logic in their usual language.&lt;p&gt;.. so they invent template languages...&lt;p&gt;... that then expand to be turing-complete and basically offer everything their primary language offered in the beginning.&lt;p&gt;So you end up with a new language to learn, which is usually clunky and ugly just for the bragging rights of &amp;quot;not mixing logic &amp;amp; views&amp;quot;. Which is completely stupid. Views can (and almost always need) to contain some logic and the best language for that is the one you&amp;#x27;re using everywhere else.</text></item><item><author>pkrumins</author><text>I&amp;#x27;m not a React or Angular expert, but do you really put HTML inside of your JS code? It just bothers me too much. We spent years in early web days learning that code and templates should be separate, yet here we are putting HTML inside of code, which goes against years of practice. Can anyone share their professional thoughts about this?</text></item></parent_chain><comment><author>munro</author><text>I love Clojure, but I&amp;#x27;m tired of embedded DSLs, they&amp;#x27;re a dime a dozen.  You can argue the benefits of Hiccup&amp;#x27;s syntax &amp;amp; s-expr all day, but it&amp;#x27;s still a different, and unpopular syntax for describing HTML.&lt;p&gt;The ability to copy snippets of HTML from web, or old code when refactoring, or from Clojure&amp;#x2F;Hiccup to another language &amp;amp; framework, or changes from developer tool, or familiarity for new engineers, or not having to care about what flavor of HTML is hip today is a huge productivity boost for me.&lt;p&gt;I would love to see push for template strings [1] in Clojure, it should be trivial with macros.  It would only take some time for IDEs to catch up.  They&amp;#x27;re good.  So good they&amp;#x27;ve even influenced Python 3 to add them.&lt;p&gt;&lt;pre&gt;&lt;code&gt;    (defui my-component [x]
      &amp;quot;&amp;lt;h2 class=(when (selected? x) [&amp;quot;selected&amp;quot;])&amp;gt;Hello&amp;lt;&amp;#x2F;h2&amp;gt;&amp;quot;)
&lt;/code&gt;&lt;/pre&gt;
[1] &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;developer.mozilla.org&amp;#x2F;en-US&amp;#x2F;docs&amp;#x2F;Web&amp;#x2F;JavaScript&amp;#x2F;Reference&amp;#x2F;template_strings&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;developer.mozilla.org&amp;#x2F;en-US&amp;#x2F;docs&amp;#x2F;Web&amp;#x2F;JavaScript&amp;#x2F;Refe...&lt;/a&gt;</text></comment>
<story><title>Things every React.js beginner should know</title><url>https://camjackson.net/post/9-things-every-reactjs-beginner-should-know</url></story><parent_chain><item><author>escherize</author><text>I&amp;#x27;m a huge fan of Clojure&amp;#x27;s Hiccup library.  It allows the user to make html like the following.&lt;p&gt;Here&amp;#x27;s a function that always returns true - but it could do any kind of data access. It is just plain Clojure.&lt;p&gt;&lt;pre&gt;&lt;code&gt;    (defn selected? [] true)
&lt;/code&gt;&lt;/pre&gt;
Here is a datastructure that represents html:&lt;p&gt;&lt;pre&gt;&lt;code&gt;    [:h2 {:class (when (selected?) &amp;quot;selected&amp;quot;)} &amp;quot;Hello&amp;quot;]
&lt;/code&gt;&lt;/pre&gt;
Calling the function hiccup.core&amp;#x2F;html on that datastructure yeilds an html string like this:&lt;p&gt;&lt;pre&gt;&lt;code&gt;    &amp;quot;&amp;lt;h2 class=&amp;#x27;selected&amp;#x27;&amp;gt;Hello&amp;lt;&amp;#x2F;h2&amp;gt;&amp;quot;
&lt;/code&gt;&lt;/pre&gt;
So that&amp;#x27;s great for _strings_ right?  But there is an awesome library for ClojureScript called Reagent. And it uses those simple datastructures to generate react components!!  I put some more examples at: &lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;hiccup.space&quot; rel=&quot;nofollow&quot;&gt;http:&amp;#x2F;&amp;#x2F;hiccup.space&lt;/a&gt;</text></item><item><author>aikah</author><text>&amp;gt; ... that then expand to be turing-complete and basically offer everything their primary language offered in the beginning.&lt;p&gt;then they wrote template languages on top of the template language to separate layout and logic again ( PHP vs Twig&amp;#x2F;Smarty )&lt;p&gt;so maybe we need to step back a little and figure out how to write a language that wouldn&amp;#x27;t need a different syntax for logic and layout. This family of languages exists already, but since current developers grew up with C like languages, it is not that popular.&lt;p&gt;IMHO the best compromise is direct support for XML syntax inside languages (which Javascript had at some point with E4X) because I don&amp;#x27;t think anyone will be able to make developers use LISP like languages on a wide scale. JSX, with some modifications and standardisation could also be a solution.</text></item><item><author>matt4077</author><text>This is a debate that has been going on since I started in the late 90ies.&lt;p&gt;You need some sort of logic in your views, no matter what system you use, i. e. loops or formatting dates.&lt;p&gt;Because people are raised on the &amp;quot;don&amp;#x27;t mix logic &amp;amp; layout&amp;quot; maxim, they feel dirty when they write sich logic in their usual language.&lt;p&gt;.. so they invent template languages...&lt;p&gt;... that then expand to be turing-complete and basically offer everything their primary language offered in the beginning.&lt;p&gt;So you end up with a new language to learn, which is usually clunky and ugly just for the bragging rights of &amp;quot;not mixing logic &amp;amp; views&amp;quot;. Which is completely stupid. Views can (and almost always need) to contain some logic and the best language for that is the one you&amp;#x27;re using everywhere else.</text></item><item><author>pkrumins</author><text>I&amp;#x27;m not a React or Angular expert, but do you really put HTML inside of your JS code? It just bothers me too much. We spent years in early web days learning that code and templates should be separate, yet here we are putting HTML inside of code, which goes against years of practice. Can anyone share their professional thoughts about this?</text></item></parent_chain><comment><author>chimeracoder</author><text>&amp;gt;  I&amp;#x27;m a huge fan of Clojure&amp;#x27;s Hiccup library. It allows the user to make html like the following.&lt;p&gt;It helps that Clojure&amp;#x27;s syntax is based on s-expressions, and s-expressions are already isomorphic to HTML&amp;#x2F;XML.&lt;p&gt;So in a way, you&amp;#x27;re still mixing your templates and your code, but you happen to be using the same syntax for both. Which is arguably an improvement.</text></comment>