diff --git a/app/cookbook/migrate-from-react.md b/app/cookbook/migrate-from-react.md
new file mode 100644
index 0000000..47ab9ca
--- /dev/null
+++ b/app/cookbook/migrate-from-react.md
@@ -0,0 +1,84 @@
+---
+title: A React Developers Guide to Writing Enhance Components
+---
+
+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.
+
+## String Interpolation
+
+<code-compare>
+
+<doc-code filename="JavaScript">
+
+```javascript
+const element = `<h1>${title}</h1>`;
+```
+
+</doc-code>
+
+
+<doc-code filename="React">
+
+```javascript
+const element = <h1>{title}</h1>;
+```
+
+</doc-code>
+
+</code-compare>
+
+## Attribute Quoting
+
+<code-compare>
+
+<doc-code filename="JavaScript">
+
+```javascript
+const image = `<img src="${href}" alt="${altText}" />`;
+```
+
+</doc-code>
+
+
+<doc-code filename="React">
+
+```javascript
+const image = <img src={href} alt={altText} />
+```
+
+</doc-code>
+
+</code-compare>
+
+## Rendering Markup from Arrays
+
+<code-compare>
+
+<doc-code filename="JavaScript">
+
+```javascript
+const todoList = `<ul>
+  ${todos.map((todo) => (
+    `<li key="${todo.id}">${todo.text}</li>`
+  ))}
+</ul>`
+```
+
+</doc-code>
+
+
+<doc-code filename="React">
+
+```javascript
+const todoList = <ul>
+  {todos.map((todo) => (
+    <li key={todo.id}>{todo.text}</li>
+  ))}
+</ul>
+```
+
+</doc-code>
+
+</code-compare>
+
+For a more verbose description the different between Enhance and React components [read this post](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
new file mode 100644
index 0000000..5c7cbb5
--- /dev/null
+++ b/app/elements/code-compare.mjs
@@ -0,0 +1,14 @@
+export default function CodeCompare ({ html }) {
+  return html`
+      <style>
+        :host {
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          grid-template-rows: 1fr;
+          gap: var(--space-0);
+          width: 100%;
+        }
+      </style>
+      <slot></slot>
+    `
+}
diff --git a/app/elements/cookbook/recipes.mjs b/app/elements/cookbook/recipes.mjs
index c7c828a..e22184c 100644
--- a/app/elements/cookbook/recipes.mjs
+++ b/app/elements/cookbook/recipes.mjs
@@ -37,6 +37,12 @@ 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">
+        <p slot="description">
+        Learn how to migrate your React app to an Enhance app.
+        </p>
+      </cookbook-recipe-card>
+
     </cookbook-recipe-box>
   `
 }