Update React recipe

enhance-dev · Jun 5, 2024 · aea14d3 · aea14d3
1 parent 02203cf
commit aea14d3
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/app/cookbook/migrate-from-react.md → app/cookbook/translate-react.md b/app/cookbook/migrate-from-react.md → app/cookbook/translate-react.md
@@ -1,8 +1,8 @@
 ---
-title: A React Developers Guide to Writing Enhance Components
+title: Translate React syntax to Enhance elements
 ---
 
-Frequently, we are asked by React developers why patterns they have learned while writing components using JSX do not translate to writing web components. In this doc, we'll describe some common gotchas that developers coming from React or other JavaScript frameworks may run into when writing plain vanilla web components.
+We’re often asked by React developers why patterns they’ve learned while writing JSX don’t translate to writing web components. In this doc, we’ll describe some common gotchas that developers coming from React or other JavaScript frameworks may run into when writing plain vanilla web components.
 
 ## String Interpolation
 
@@ -81,4 +81,4 @@ const todoList = <ul>
 
 </code-compare>
 
-For a more verbose description on the differences between Enhance and React components [read this post](https://begin.com/blog/posts/2024-03-08-a-react-developers-guide-to-writing-enhance-components).
+For a more in depth look at the differences between Enhance and React components, [read this post on the Begin blog](https://begin.com/blog/posts/2024-03-08-a-react-developers-guide-to-writing-enhance-components).
diff --git a/app/elements/code-compare.mjs b/app/elements/code-compare.mjs
@@ -3,11 +3,17 @@ export default function CodeCompare ({ html }) {
       <style>
         :host {
           display: grid;
-          grid-template-columns: repeat(2, 1fr);
+          grid-template-columns: 1fr;
           grid-template-rows: 1fr;
           gap: var(--space-0);
           width: 100%;
         }
+
+        @media (width >= 56em) {
+          :host {
+            grid-template-columns: repeat(2, 1fr);
+          }
+        }
       </style>
       <slot></slot>
     `

diff --git a/app/elements/cookbook/recipes.mjs b/app/elements/cookbook/recipes.mjs
@@ -37,9 +37,9 @@ export default function CookbookRecipes ({ html }) {
         </p>
       </cookbook-recipe-card>
 
-      <cookbook-recipe-card name="A React Developers Guide to Writing Enhance Components" href="/cookbook/migrate-from-react">
+      <cookbook-recipe-card name="Translate React syntax to Enhance elements" href="/cookbook/translate-react">
         <p slot="description">
-        Learn how to migrate your React app to an Enhance app.
+        Watch out for common gotchas when coming from React and JSX.
         </p>
       </cookbook-recipe-card>