Improve react+typescript

Author: RoyalIcing

apps/components_guide_web/assets/css/app.css

@@ -11,7 +11,7 @@
 :root {
     @apply bg-gray-900;
 
-    --links-color: currentColor;
+    --link-color: currentColor;
 
     --size-xs: .75rem;
     --size-sm: .875rem;
@@ -41,9 +41,9 @@ article a:hover {
 }
 
 a {
-    color: var(--links-color);
-    padding: var(--links-padding);
-    text-decoration: var(--links-decoration);
+    color: var(--link-color);
+    padding: var(--link-padding);
+    text-decoration: var(--link-decoration);
 }
 a:hover {
     text-decoration: var(--hover\:links-decoration);
@@ -55,6 +55,7 @@ h2, p, li {
 }
 h2 {
   font-size: var(--heading-2-size);
+  padding: var(--heading-2-padding);
 }
 p {
   padding: var(--paragraph-padding);
@@ -80,6 +81,7 @@ input {
   --item-spacing-left: 1rem;
   --item-spacing-right: 1rem;
   --heading-2-size: var(--size-3xl);
+  --heading-2-padding: var(--size-base) 0;
   --paragraph-padding: 0.5rem 0;
   --listitem-padding: 0.5rem 0;
   --code-padding: 0 0.1875em;

apps/components_guide_web/lib/components_guide_web/templates/react_typescript/index.html.eex

@@ -1,14 +1,20 @@
 <div class="text-white" style="<%= header_styles() %>">
-  <section class="pt-8 pb-8">
-    <h1 class="mx-auto max-w-4xl row space-x-4 text-4xl text-center font-bold leading-tight text-shadow">
+  <header class="mx-auto max-w-4xl">
+    <h1 class="pt-8 row space-x-4 text-4xl text-center font-bold leading-tight text-shadow">
       <div class="row">
         <img class="inline-block mr-2" src="<%= "https://cdn.jsdelivr.net/gh/gilbarbara/logos@618de63f309bbf56b67364fd6a441cbbf79403cc/logos/react.svg" %>" alt="React logo" width=48 height=48>
         <span class="mr-2 text-3xl">❤️</span>
         <img class="inline-block mr-2" src="<%= "https://cdn.jsdelivr.net/gh/gilbarbara/logos@02e637e09b55966e802dfe0bc93595594e0214bb/logos/typescript-icon.svg" %>" alt="TypeScript logo" width=48 height=48>
       </div>
       <span><%= "React & TypeScript Guide" %></span>
     </h1>
-  </section>
+    <nav class="pt-6 pb-4">
+      <ul class="list-none row font-bold" style="--link-padding: 0.75em">
+        <li><%= link("Fundamentals", to: '/react+typescript') %>
+        <li><%= link("Testing", to: '/react+typescript/testing') %>
+      </ul>
+    </nav>
+  </header>
 </div>
 
 <div class="bg-white">

apps/components_guide_web/lib/components_guide_web/templates/react_typescript/tips.html.md

@@ -313,4 +313,14 @@ function Card({ title, children }: CardProps): JSX.Element {
 
 For this reason, I would recommend that components are functions that are declared at the top level of a file. A function declared nested inside another will be different each time that outer function is called — so either call these functions yourself or extract them out.
 
-## Once props are passed to a component, they mustn’t be mutated
+## Once elements & props are given to React, they mustn’t be mutated
+
+When you return an element tree from a component, it might be used immediately or it might be scheduled for use later.
+
+If you kept a reference to an element you returned and mutated it later, React might see an inconsistent view, causing the result to be unpredictable or for it to crash.
+
+React relies on immutability. It avoids creating defensive copies of elements and props, as that would just be overhead.
+
+## Test behavior and markup over implementation detail
+
+## Test roles

apps/components_guide_web/lib/components_guide_web/templates/research/index.html.eex

@@ -14,11 +14,11 @@
     </form>
     <dl
       class="text-xl grid gap-2 items-center pt-4 px-6"
-      style="grid-template-columns: auto 1fr; --links-color: #1c64f2; --hover\:links-decoration: underline;"
+      style="grid-template-columns: auto 1fr; --link-color: #1c64f2; --hover\:link-decoration: underline;"
     >
       <dt>HTML & Roles</dt>
       <dd>
-        <ul class="list-none flex flex-wrap italic" style="--links-padding: 0.75em">
+        <ul class="list-none flex flex-wrap italic" style="--link-padding: 0.75em">
           <li><%= link("form", to: "?q=form") %>
           <li><%= link("button", to: "?q=button") %>
           <li><%= link("contentinfo", to: "?q=contentinfo") %>
@@ -28,7 +28,7 @@
       </dd>
       <dt>Third-party</dt>
       <dd>
-        <ul class="list-none flex flex-wrap italic" style="--links-padding: 0.75em">
+        <ul class="list-none flex flex-wrap italic" style="--link-padding: 0.75em">
           <li><%= link("react-dom", to: "?q=react-dom") %>
           <li><%= link("preact", to: "?q=preact") %>
           <li><%= link("vue", to: "?q=vue") %>
@@ -41,7 +41,7 @@
       </dd>
       <dt>Concepts</dt>
       <dd>
-        <ul class="list-none flex flex-wrap italic" style="--links-padding: 0.75em">
+        <ul class="list-none flex flex-wrap italic" style="--link-padding: 0.75em">
           <li><%= link("error", to: "?q=error") %>
         </ul>
       </dd>