diff --git a/pages/docs/react/latest/arrays-and-keys.mdx b/pages/docs/react/latest/arrays-and-keys.mdx
index f7b46621e..869804f28 100644
--- a/pages/docs/react/latest/arrays-and-keys.mdx
+++ b/pages/docs/react/latest/arrays-and-keys.mdx
@@ -16,7 +16,9 @@ Whenever we are transforming data into an array of elements and put it in our Re
 
 Arrays require a special function `React.array` to convert an `array<Jsx.element>` to render as `Jsx.element`.
 
-```res
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res example
 type todo = {id: string, text: string}
 
 @react.component
@@ -31,21 +33,68 @@ let make = () => {
 }
 ```
 
+```js
+function Playground(props) {
+  var todos = [
+    {
+      id: "todo1",
+      text: "Todo 1"
+    },
+    {
+      id: "todo2",
+      text: "Todo 2"
+    }
+  ];
+  var items = todos.map(function (todo) {
+        return JsxRuntime.jsx("li", {
+                    children: todo.text
+                  }, todo.id);
+      });
+  return JsxRuntime.jsx("ul", {
+              children: items
+            });
+}
+```
+
+</CodeTab>
+
 ## Keys
 
 Keys help React identify which elements have been changed, added, or removed throughout each render. Keys should be given to elements inside the array to give the elements a stable identity:
 
-```res
-let numbers = [1, 2, 3, 4, 5];
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res example
+let numbers = [1, 2, 3, 4, 5]
 
 let items = Array.map(numbers, (number) => {
   <li key={Int.toString(number)}> {React.int(number)} </li>
 })
 ```
 
+```js
+var numbers = [
+  1,
+  2,
+  3,
+  4,
+  5
+];
+
+var items = numbers.map(function (number) {
+      return JsxRuntime.jsx("li", {
+                  children: number
+                }, number.toString());
+    });
+```
+
+</CodeTab>
+
 The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys:
 
-```res
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res prelude
 type todo = {id: string, text: string}
 
 let todos = [
@@ -58,22 +107,58 @@ let items = Array.map(todos, todo => {
 })
 ```
 
+```js
+var todos = [
+  {
+    id: "todo1",
+    text: "Todo 1"
+  },
+  {
+    id: "todo2",
+    text: "Todo 2"
+  }
+];
+
+var items = todos.map(function (todo) {
+      return JsxRuntime.jsx("li", {
+                  children: todo.text
+                }, todo.id);
+    });
+```
+
+</CodeTab>
+
 If you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort:
 
-```res {1..3}
-let items = Array.mapWithIndex(todos, (i, todo) => {
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res example {1..3}
+let items = Array.mapWithIndex(todos, (todo, i) => {
   // Only do this if items have no stable id
   <li key={Int.toString(i)}>
-    {todo.text}
+    {React.string(todo.text)}
   </li>
-});
+})
 ```
 
+```js
+var items = todos.map(function (todo, i) {
+      return JsxRuntime.jsx("li", {
+                  children: todo.text
+                }, i.toString());
+    });
+```
+
+</CodeTab>
+
+
 ### Keys Must Only Be Unique Among Siblings
 
 Keys used within arrays should be unique among their siblings. However they don’t need to be globally unique. We can use the same keys when we produce two different arrays:
 
-```res {6,10,17,18,25,27}
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res example {6,10,17,18,25,27}
 type post = {id: string, title: string, content: string}
 
 module Blog = {
@@ -81,23 +166,19 @@ module Blog = {
   let make = (~posts: array<post>) => {
     let sidebar =
       <ul>
-        {
-          Array.map(posts, (post) => {
-            <li key={post.id}>
-              {React.string(post.title)}
-            </li>
-          })->React.array
-        }
+        {Array.map(posts, post => {
+          <li key={post.id}> {React.string(post.title)} </li>
+        })->React.array}
       </ul>
 
-    let content = Array.map(posts, (post) => {
-        <div key={post.id}>
-          <h3>{React.string(post.title)}</h3>
-          <p>{React.string(post.content)}</p>
-        </div>
-    });
-      
-      <div>
+    let content = Array.map(posts, post => {
+      <div key={post.id}>
+        <h3> {React.string(post.title)} </h3>
+        <p> {React.string(post.content)} </p>
+      </div>
+    })
+
+    <div>
       {sidebar}
       <hr />
       {React.array(content)}
@@ -106,19 +187,84 @@ module Blog = {
 }
 
 let posts = [
-  {id: "1", title: "Hello World", content: "Welcome to learning ReScript & React!"},
-  {id: "2", title: "Installation", content: "You can install reason-react from npm."}
+  {
+    id: "1",
+    title: "Hello World",
+    content: "Welcome to learning ReScript & React!",
+  },
+  {
+    id: "2",
+    title: "Installation",
+    content: "You can install reason-react from npm.",
+  },
 ]
 
-let blog = <Blog posts/>
+let blog = <Blog posts />
+```
+
+```js
+function Playground$Blog(props) {
+  var posts = props.posts;
+  var sidebar = JsxRuntime.jsx("ul", {
+        children: posts.map(function (post) {
+              return JsxRuntime.jsx("li", {
+                          children: post.title
+                        }, post.id);
+            })
+      });
+  var content = posts.map(function (post) {
+        return JsxRuntime.jsxs("div", {
+                    children: [
+                      JsxRuntime.jsx("h3", {
+                            children: post.title
+                          }),
+                      JsxRuntime.jsx("p", {
+                            children: post.content
+                          })
+                    ]
+                  }, post.id);
+      });
+  return JsxRuntime.jsxs("div", {
+              children: [
+                sidebar,
+                JsxRuntime.jsx("hr", {}),
+                content
+              ]
+            });
+}
+
+var Blog = {
+  make: Playground$Blog
+};
+
+var posts = [
+  {
+    id: "1",
+    title: "Hello World",
+    content: "Welcome to learning ReScript & React!"
+  },
+  {
+    id: "2",
+    title: "Installation",
+    content: "You can install reason-react from npm."
+  }
+];
+
+var blog = JsxRuntime.jsx(Playground$Blog, {
+      posts: posts
+    });
 ```
 
+</CodeTab>
+
 
 ## Rendering `list` Values
 
 In case you ever want to render a `list` of items, you can do something like this:
 
-```res
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res example
 type todo = {id: string, text: string}
 
 @react.component
@@ -140,6 +286,33 @@ let make = () => {
 
 ```
 
+```js
+function Playground(props) {
+  var items = Core__List.toArray({
+          hd: {
+            id: "todo1",
+            text: "Todo 1"
+          },
+          tl: {
+            hd: {
+              id: "todo2",
+              text: "Todo 2"
+            },
+            tl: /* [] */0
+          }
+        }).map(function (todo) {
+        return JsxRuntime.jsx("li", {
+                    children: todo.text
+                  }, todo.id);
+      });
+  return JsxRuntime.jsx("div", {
+              children: items
+            });
+}
+```
+
+</CodeTab>
+
 We use `List.toArray` to convert our list to an array before creating our `array<React.element>`. Please note that using `list` has performance impact due to extra conversion costs.
 
 99% of the time you'll want to use arrays (seamless interop, faster JS code), but in some cases it might make sense to use a `list` to leverage advanced pattern matching features etc.
diff --git a/pages/docs/react/latest/beyond-jsx.mdx b/pages/docs/react/latest/beyond-jsx.mdx
index add3c766b..01816cb0d 100644
--- a/pages/docs/react/latest/beyond-jsx.mdx
+++ b/pages/docs/react/latest/beyond-jsx.mdx
@@ -22,7 +22,7 @@ A plain React component is defined as a `('props) => React.element` function. Yo
 
 Here are some examples on how to define your own component types (often useful when interoping with existing JS code, or passing around components):
 
-```res
+```res example
 // Plain function type
 type friend = {name: string, online: bool}
 type friendComp = friend => React.element
@@ -38,9 +38,24 @@ The types above are pretty low level (basically the JS representation of a React
 
 A ReScript React component needs to be a (sub-)module with a `make` function and `props` type to be usable in JSX. To make things easier, we provide a `@react.component` decorator to create those functions for you:
 
-<CodeTab labels={["Decorated", "Expanded"]}>
+<div className="hidden">
 
-```res
+```res prelude
+module Friend = {
+  @react.component
+  let make = (~name: string, ~age: int) => {React.string(name ++ ", " ++ age->Int.toString)}
+}
+module Container = {
+  @react.component
+  let make = (~width: int, ~children) => {<> {React.string(width->Int.toString)} children </>}
+}
+```
+
+</div>
+
+<CodeTab labels={["Decorated", "Expanded", "JS Output"]}>
+
+```res example
 module Friend = {
   @react.component
   let make = (~name: string, ~children) => {
@@ -51,7 +66,7 @@ module Friend = {
   }
 }
 ```
-```res
+```res example
 module Friend = {
   type props<'name, 'children> = {
     name: 'name,
@@ -63,6 +78,20 @@ module Friend = {
   }
 }
 ```
+```js
+function Playground$Friend(props) {
+  return JsxRuntime.jsxs("div", {
+              children: [
+                props.name,
+                props.children
+              ]
+            });
+}
+
+var Friend = {
+  make: Playground$Friend
+};
+```
 
 </CodeTab>
 
@@ -98,10 +127,9 @@ type props<'className, 'children, 'ref> = {
 }
 
 let make = (
-  {?className, children, _}: props<'className, 'children, ReactRef.currentDomRef>,
-  ref: Nullable.t<ReactRef.currentDomRef>,
-) =>
-  make(~className, ~children, ~ref, ())
+  {?className, children, _}: props<'className, 'children, ReactDOM.Ref.currentDomRef>,
+  ref: Nullable.t<ReactDOM.Ref.currentDomRef>,
+) => make(~className, ~children, ~ref, ())
 ```
 
 </CodeTab>
@@ -116,10 +144,10 @@ Whenever we are using JSX with a custom component ("capitalized JSX"), we are ac
 
 <CodeTab labels={["JSX", "Without JSX", "JS Output"]}>
 
-```res
-<Friend name="Fred" age=20 />
+```res example
+let _ = <Friend name="Fred" age=20 />
 ```
-```res
+```res example
 // classic
 React.createElement(Friend.make, {name: "Fred", age:20})
 
@@ -127,7 +155,7 @@ React.createElement(Friend.make, {name: "Fred", age:20})
 React.jsx(Friend.make, {name: "Fred", age: 20})
 ```
 ```js
-React.createElement(Playground$Friend, { name: "Fred", age: 20 });
+JsxRuntime.jsx(Playground$Friend, { name: "Fred", age: 20 });
 ```
 
 </CodeTab>
@@ -136,14 +164,14 @@ As you can see, it uses `Friend.make` to call the `React.createElement` API. In
 
 <CodeTab labels={["JSX", "Without JSX", "JS Output"]}>
 
-```res
+```res example
 <Container width=200>
   {React.string("Hello")}
   {React.string("World")}
 </Container>
 ```
 
-```res
+```res example
 // classic
 React.createElementVariadic(
   Container.make,
@@ -159,7 +187,7 @@ React.jsxs(
 ```
 
 ```js
-React.createElement(Container, { width: 200, children: null }, "Hello", "World");
+JsxRuntime.jsx(Container, { width: 200, children: null }, "Hello", "World");
 ```
 
 </CodeTab>
@@ -173,11 +201,11 @@ Note that the `children: React.null` field has no relevance since React will onl
 
 <CodeTab labels={["JSX", "Without JSX", "JS Output"]}>
 
-```res
+```res example
 <div title="test"/>
 ```
 
-```res
+```res example
 // classic
 ReactDOM.createDOMElementVariadic("div", ~props={title: "test"}, [])
 
@@ -186,22 +214,22 @@ ReactDOM.jsx("div", {title: "test"})
 ```
 
 ```js
-React.createElement("div", { title: "test" });
+JsxRuntime.jsx("div", { title: "test" });
 ```
 
 </CodeTab>
 
 The same goes for uncapitalized JSX with children:
 
-<CodeTab labels={["JSX", "Without JSX", "JS Output"]}>
+<CodeTab labels={["JSX", "Without JSX", "JSX Output", "Without JSX Output"]}>
 
-```res
+```res example
 <div title="test">
   <span/>
 </div>
 ```
 
-```res
+```res example
 // classic
 ReactDOM.createDOMElementVariadic(
   "div",
@@ -214,7 +242,16 @@ ReactDOM.jsx("div", {title: "test", children: ?ReactDOM.someElement(ReactDOM.jsx
 ```
 
 ```js
-React.createElement("div", { title: "test" }, React.createElement("span", undefined));
+JsxRuntime.jsx("div", {
+      children: JsxRuntime.jsx("span", {}),
+      title: "test"
+    });
+```
+
+```js
+React.createElement("div", {
+      title: "test"
+    }, React.createElement("span", undefined));
 ```
 
 </CodeTab>
diff --git a/pages/docs/react/latest/components-and-props.mdx b/pages/docs/react/latest/components-and-props.mdx
index 7d21b1d68..58ddd7750 100644
--- a/pages/docs/react/latest/components-and-props.mdx
+++ b/pages/docs/react/latest/components-and-props.mdx
@@ -26,7 +26,7 @@ Let's start with a first example to see how a ReScript React component looks lik
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 // src/Greeting.res
 @react.component
 let make = () => {
@@ -59,7 +59,7 @@ In ReactJS, props are usually described as a single `props` record. In ReScript,
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 // src/Article.res
 @react.component
 let make = (~title: string, ~visitorCount: int, ~children: React.element) => {
@@ -90,7 +90,7 @@ We can leverage the full power of labeled arguments to define optional props as
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 // Greeting.res
 @react.component
 let make = (~name: option<string>=?) => {
@@ -116,9 +116,20 @@ function Greeting(props) {
 
 In JSX, you can apply optional props with some special syntax:
 
+<div className="hidden">
+
+```res prelude
+module Greeting = {
+  @react.component
+  let make = (~name: option<string>=?) => {React.string(name->Option.getOr(""))}
+}
+```
+
+</div>
+
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 let name = Some("Andrea")
 
 <Greeting ?name />
@@ -162,7 +173,7 @@ as a `React.element`:
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 module MyList = {
   @react.component
   let make = (~children: React.element) => {
@@ -219,7 +230,7 @@ module StringChildren = {
 
 **Component with an optional `React.element` as children:**
 
-```res
+```res example
 module OptionalChildren = {
   @react.component
   let make = (~children: option<React.element>=?) => {
@@ -268,7 +279,7 @@ The ReScript type system is really good at inferring the prop types just by look
 For simple cases, well-scoped usage, or experimentation, it's still fine to omit type annotations:
 
 
-```res
+```res example
 // Button.res
 
 @react.component
@@ -290,7 +301,7 @@ Every ReScript component can be used in JSX. For example, if we want to use our
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 // src/App.res
 
 @react.component
@@ -324,7 +335,7 @@ For example:
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 module Link = {
   type props = {href: string, children: React.element};
   
@@ -365,7 +376,7 @@ More details on the `@react.component` decorator and its generated interface can
 
 We can also represent React components as submodules, which makes it very convenient to build more complex UI without the need to create multiple files for each composite component (that's probably only used by the parent component anyways): 
 
-```res
+```res example
 // src/Button.res
 module Label = {
   @react.component
@@ -412,7 +423,7 @@ module Nested = {
   // will be named `File$Nested` in dev tools
   @react.component
   let make = ...
-};
+}
 ```
 
 If you need a dynamic name for higher-order components or you would like to set your own name you can use `React.setDisplayName(make, "NameThatShouldBeInDevTools")`.
diff --git a/pages/docs/react/latest/context.mdx b/pages/docs/react/latest/context.mdx
index 66eef63a4..6b3874670 100644
--- a/pages/docs/react/latest/context.mdx
+++ b/pages/docs/react/latest/context.mdx
@@ -25,9 +25,9 @@ Context is designed to share data that can be considered “global” for a tree
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 // src/App.res
-type theme = Light | Dark;
+type theme = Light | Dark
 
 module Button = {
   @react.component
@@ -35,7 +35,7 @@ module Button = {
     let className = switch theme {
       | Light => "theme-light"
       | Dark => "theme-black"
-    };
+    }
     <button className> {React.string("Click me")} </button>
   }
 }
@@ -97,7 +97,7 @@ Using context, we can avoid passing props through intermediate elements:
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 // src/App.res
 
 module ThemeContext = {
diff --git a/pages/docs/react/latest/elements-and-jsx.mdx b/pages/docs/react/latest/elements-and-jsx.mdx
index aca2954ff..4ac84a02e 100644
--- a/pages/docs/react/latest/elements-and-jsx.mdx
+++ b/pages/docs/react/latest/elements-and-jsx.mdx
@@ -18,7 +18,7 @@ Elements are the smallest building blocks of React apps. This page will explain
 
 Let's start out by creating our first React element.
 
-```res
+```res example
 let element = <h1> {React.string("Hello World")} </h1>
 ```
 
@@ -26,7 +26,7 @@ The binding `element` and the expression `{React.string("Hello World")}` are bot
 
 Let's say you want to create a function that handles another React element, such as `children`, you can annotate it as `React.element`:
 
-```res
+```res example
 let wrapChildren = (children: React.element) => {
   <div>
     <h1> {React.string("Overview")} </h1>
@@ -45,9 +45,9 @@ Fortunately our React bindings bring all necessary functionality to represent al
 
 You can compose elements into more complex structures by using JSX:
 
-```res
+```res example
 let greeting = React.string("Hello ")
-let name = React.string("Stranger");
+let name = React.string("Stranger")
 
 
 // element is also of type React.element
@@ -64,7 +64,7 @@ Sometimes, when doing a lot of interop with existing ReactJS codebases, you'll f
 
 Apart from using JSX to create our React elements or React components, the `React` module offers various functions to create elements from primitive data types:
 
-```res
+```res example
 React.string("Hello") // new element representing "Hello"
 
 React.int(1) // new element representing "1"
@@ -74,7 +74,7 @@ React.float(1.0) // new element representing "1.0"
 
 It also offers `React.array` to represent multiple elements as one single element (useful for rendering a list of data, or passing children):
 
-```res
+```res example
 let element = React.array([
   React.string("element 1"),
   React.string("element 2"),
@@ -91,7 +91,7 @@ ReScript doesn't allow `element || null` constraints due to it's strongly typed
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 let name = Some("Andrea")
 
 let element = switch name {
@@ -121,7 +121,7 @@ React.createElement("div", undefined, element);
 
 Sometimes it's necessary to pass around component functions to have more control over `React.element` creation. Use the `React.createElement` function to instantiate your elements:
 
-```res
+```res example
 type props = {name: string}
 
 let render = (myComp: props => React.element) => {
@@ -131,7 +131,7 @@ let render = (myComp: props => React.element) => {
 
 This feature is often used when interacting with existing JS / ReactJS code. In pure ReScript React applications, you would rather pass a function that does the rendering for you (also called a "render prop"):
 
-```res
+```res example
 let render = (renderMyComp: (~name: string) => React.element) => {
   <div> {renderMyComp(~name="Franz")} </div>
 }
@@ -143,7 +143,7 @@ There is also a `React.createElementVariadic` function, which takes an array of
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 type props = {title: string, children: React.element}
 
 let render = (article: props => React.element) => {
@@ -183,7 +183,7 @@ This function is mostly used by our JSX transformations, so usually you want to
 
 To create DOM elements (`<div>`, `<span>`, etc.), use `ReactDOM.createDOMElementVariadic`:
 
-```res
+```res example
 ReactDOM.createDOMElementVariadic("div", ~props={className: "card"}, [])
 ```
 
@@ -197,11 +197,11 @@ Sometimes it's required to clone an existing element to set, overwrite or add pr
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 let original = <div className="hello"/>
 
 // Will return a new React.element with className set to "world"
-React.cloneElement(original, {"className": "world", "data-name": "some name"});
+React.cloneElement(original, {"className": "world", "data-name": "some name"})
 ```
 ```js
 var original = React.createElement("div", {
diff --git a/pages/docs/react/latest/events.mdx b/pages/docs/react/latest/events.mdx
index 5000cd988..de9fc930a 100644
--- a/pages/docs/react/latest/events.mdx
+++ b/pages/docs/react/latest/events.mdx
@@ -14,7 +14,7 @@ Depending on the event handler, the callback function will have a different type
 Due to the dynamic nature of JavaScript, we cannot anticipate the target type on the event.
 So, we need a leap of faith to grab the input value as string.
 
-```res
+```res example
 module App = {
   @react.component
   let make = () => {
diff --git a/pages/docs/react/latest/extensions-of-props.mdx b/pages/docs/react/latest/extensions-of-props.mdx
index 0419fe3f0..adda00760 100644
--- a/pages/docs/react/latest/extensions-of-props.mdx
+++ b/pages/docs/react/latest/extensions-of-props.mdx
@@ -12,16 +12,27 @@ canonical: "/docs/react/latest/spread-props"
 
 JSX props spread is supported now, but in a stricter way than in JS.
 
+<div className="hidden">
+
+```res prelude
+module Comp = {
+  type props = {a?: string, b?: string}
+  external make: React.component<props> = "default"
+}
+```
+
+</div>
+
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
+let props = {Comp.b: "b"}
 <Comp {...props} a="a" />
 ```
 ```js
-React.createElement(Comp, {
-  a: "a",
-  b: "b"
-});
+var props = {b: "b"};
+var newrecord = Caml_obj.obj_dup(props);
+return JsxRuntime.jsx(default, (newrecord.a = "a", newrecord));
 ```
 
 </CodeTab>
@@ -52,17 +63,17 @@ You can control the definition of the `props` type by passing as argument to `@r
 
 <CodeTab labels={["Decorated", "Expanded"]}>
 
-```res
-type sharedprops<'x, 'y> = {x: 'x, y: 'y, z:string}
+```res example
+type sharedProps<'x, 'y> = {x: 'x, y: 'y, z:string}
 
 module C1 = {
   @react.component(:sharedProps<'a, 'b>)
-  let make = (~x, ~y) => React.string(x ++ y ++ z)
+  let make = (~x, ~y, ~z) => React.string(x ++ y ++ z)
 }
 
 module C2 = {
   @react.component(:sharedProps<string, 'b>)
-  let make = (~x, ~y) => React.string(x ++ y ++ z)
+  let make = (~x, ~y, ~z) => React.string(x ++ y ++ z)
 }
 
 module C3 = {
@@ -72,17 +83,17 @@ module C3 = {
 }
 ```
 
-```res
-type sharedprops<'x, 'y> = {x: 'x, y: 'y, z: string}
+```res example
+type sharedProps<'x, 'y> = {x: 'x, y: 'y, z: string}
 
 module C1 = {
   type props<'a, 'b> = sharedProps<'a, 'b>
-  let make = ({x, y, _}: props<_>) => React.string(x ++ y ++ z)
+  let make = ({x, y, z}: props<_>) => React.string(x ++ y ++ z)
 }
 
 module C2 = {
   type props<'b> = sharedProps<string, 'b>
-  let make = ({x, y, _}: props<_>) => React.string(x ++ y ++ z)
+  let make = ({x, y, z}: props<_>) => React.string(x ++ y ++ z)
 }
 
 module C3 = {
diff --git a/pages/docs/react/latest/forwarding-refs.mdx b/pages/docs/react/latest/forwarding-refs.mdx
index 76431c114..617198278 100644
--- a/pages/docs/react/latest/forwarding-refs.mdx
+++ b/pages/docs/react/latest/forwarding-refs.mdx
@@ -16,7 +16,7 @@ Ref forwarding is a technique for automatically passing a [React.ref](./refs-and
 
 Consider a FancyButton component that renders the native button DOM element:
 
-```res
+```res example
 // FancyButton.res
 
 @react.component
@@ -43,7 +43,7 @@ A `React.ref` can be passed down like any other prop. The component will take ca
 
 In the example below, `FancyInput` defines a prop `inputRef` that will be forwarded to its `input` element:
 
-```res
+```res example
 // App.res
 
 module FancyInput = {
@@ -84,7 +84,7 @@ This is how the previous example would look like with the `React.forwardRef` app
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 // App.res
 
 module FancyInput = {
diff --git a/pages/docs/react/latest/hooks-context.mdx b/pages/docs/react/latest/hooks-context.mdx
index 8af68ddfe..df3cdd133 100644
--- a/pages/docs/react/latest/hooks-context.mdx
+++ b/pages/docs/react/latest/hooks-context.mdx
@@ -30,7 +30,7 @@ Accepts a `React.Context.t` (the value returned from `React.createContext`) and
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 // App.res
 module ThemeContext = {
   let context = React.createContext("light")
diff --git a/pages/docs/react/latest/hooks-custom.mdx b/pages/docs/react/latest/hooks-custom.mdx
index 42a1eac02..1176591b0 100644
--- a/pages/docs/react/latest/hooks-custom.mdx
+++ b/pages/docs/react/latest/hooks-custom.mdx
@@ -20,17 +20,17 @@ Let's go back to a previous example from our [React.useEffect section](./hooks-e
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res {16-31}
+```res example {16-31}
 // FriendStatus.res
 
 module ChatAPI = {
   // Imaginary globally available ChatAPI for demo purposes
-  type status = { isOnline: bool };
-  @val external subscribeToFriendStatus: (string, status => unit) => unit = "subscribeToFriendStatus";
-  @val external unsubscribeFromFriendStatus: (string, status => unit) => unit = "unsubscribeFromFriendStatus";
+  type status = { isOnline: bool }
+  @val external subscribeToFriendStatus: (string, status => unit) => unit = "subscribeToFriendStatus"
+  @val external unsubscribeFromFriendStatus: (string, status => unit) => unit = "unsubscribeFromFriendStatus"
 }
 
-type state = Offline | Loading | Online;
+type state = Offline | Loading | Online
 
 @react.component
 let make = (~friendId: string) => {
@@ -43,15 +43,15 @@ let make = (~friendId: string) => {
       })
     }
 
-    ChatAPI.subscribeToFriendStatus(friendId, handleStatusChange);
-    setState(_ => Loading);
+    ChatAPI.subscribeToFriendStatus(friendId, handleStatusChange)
+    setState(_ => Loading)
 
     let cleanup = () => {
       ChatAPI.unsubscribeFromFriendStatus(friendId, handleStatusChange)
     }
 
     Some(cleanup)
-  })
+  }, [friendId])
 
   let text = switch(state) {
     | Offline => friendId ++ " is offline"
@@ -117,14 +117,14 @@ Now let’s say that our chat application also has a contact list, and we want t
 
 ```res {15-30}
 // FriendListItem.res
-type state = Offline | Loading | Online;
+type state = Offline | Loading | Online
 
 // module ChatAPI = {...}
 
 type friend = {
   id: string,
   name: string
-};
+}
 
 @react.component
 let make = (~friend: friend) => {
@@ -137,8 +137,8 @@ let make = (~friend: friend) => {
       })
     }
 
-    ChatAPI.subscribeToFriendStatus(friend.id, handleStatusChange);
-    setState(_ => Loading);
+    ChatAPI.subscribeToFriendStatus(friend.id, handleStatusChange)
+    setState(_ => Loading)
 
     let cleanup = () => {
       ChatAPI.unsubscribeFromFriendStatus(friend.id, handleStatusChange)
@@ -292,7 +292,7 @@ The purpose of our `useFriendStatus` Hook is to subscribe us to a friend’s sta
 
 ```res
 let useFriendStatus = (friendId: string): status {
-  let (state, setState) = React.useState(_ => Offline);
+  let (state, setState) = React.useState(_ => Offline)
 
   // ...
 
@@ -315,11 +315,11 @@ Now that we’ve extracted this logic to a useFriendStatus hook, we can just use
 
 ```res {6}
 // FriendStatus.res
-type friend = { id: string };
+type friend = { id: string }
 
 @react.component
 let make = (~friend: friend) => {
-  let onlineState = FriendStatusHook.useFriendStatus(friend.id);
+  let onlineState = FriendStatusHook.useFriendStatus(friend.id)
 
   let status = switch(onlineState) {
     | FriendStatusHook.Online => "Online"
@@ -327,7 +327,7 @@ let make = (~friend: friend) => {
     | Offline => "Offline"
   }
 
-  React.string(status);
+  React.string(status)
 }
 ```
 ```js
@@ -363,7 +363,7 @@ function FriendStatus(Props) {
 // FriendListItem.res
 @react.component
 let make = (~friend: friend) => {
-  let onlineState = FriendStatusHook.useFriendStatus(friend.id);
+  let onlineState = FriendStatusHook.useFriendStatus(friend.id)
 
   let color = switch(onlineState) {
     | Offline => "red"
diff --git a/pages/docs/react/latest/hooks-effect.mdx b/pages/docs/react/latest/hooks-effect.mdx
index 0899df691..404c26cae 100644
--- a/pages/docs/react/latest/hooks-effect.mdx
+++ b/pages/docs/react/latest/hooks-effect.mdx
@@ -23,39 +23,38 @@ There are two common kinds of side effects in React components: those that don
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 // Runs after every completed render
-React.useEffect(() => {
+React.useEffectOnEveryRender(() => {
   // Run effects
   None // or Some(() => {})
 })
 
 
 // Runs only once right after mounting the component
-React.useEffect0(() => {
+React.useEffect(() => {
   // Run effects
   None // or Some(() => {})
-})
+}, [])
+
+// Dummy props
+let prop1 = 1 and prop2 = 2 and prop3 = 3
 
 // Runs everytime `prop1` has changed
-React.useEffect1(() => {
+React.useEffect(() => {
   // Run effects based on prop1
   None
 }, [prop1])
 
 // Runs everytime `prop1` or `prop2` has changed
-React.useEffect2(() => {
+React.useEffect(() => {
   // Run effects based on prop1 / prop2
   None
 }, (prop1, prop2))
 
-React.useEffect3(() => {
+React.useEffect(() => {
   None
-}, (prop1, prop2, prop3));
-
-// useEffect4...7 with according dependency
-// tuple just like useEffect3
-
+}, (prop1, prop2, prop3))
 ```
 
 ```js
@@ -70,11 +69,11 @@ React.useEffect((function () { }), [ prop1, prop2, prop3 ]);
 
 `React.useEffect` receives a function that contains imperative, possibly effectful code, and returns a value `option<unit => unit>` as a potential cleanup function.
 
-A `useEffect` call may receive an additional array of dependencies (see `React.useEffect1` / `React.useEffect2...7`). The effect function will run whenever one of the provided dependencies has changed. More details on why this is useful [down below](#effect-dependencies).
+A `useEffect` call may receive an additional array of dependencies. The effect function will run whenever one of the provided dependencies has changed. More details on why this is useful [down below](#effect-dependencies).
 
-**Note:** You probably wonder why `React.useEffect1` receives an `array`, and `useEffect2` etc require a `tuple` (e.g. `(prop1, prop2)`) for the dependency list. That's because a tuple can receive multiple values of different types, whereas an `array` only accepts values of identical types. It's possible to replicate `useEffect2` by doing `React.useEffect1(fn, [1, 2])`, on other hand the type checker wouldn't allow `React.useEffect1(fn, [1, "two"])`.
+**Note:** You probably wonder why the `React.useEffect` with only one dependency receives an `array`, while `useEffect`'s with multiple dependencies require a `tuple` (e.g. `(prop1, prop2)`) for the dependency list. That's because a tuple can receive multiple values of different types, whereas an `array` only accepts values of identical types. It's possible to replicate a `useEffect` with multiple dependencies by doing `React.useEffect(fn, [1, 2])`, on other hand the type checker wouldn't allow `React.useEffect(fn, [1, "two"])`.
 
-`React.useEffect` will run its function after every completed render, while `React.useEffect0` will only run the effect on the first render (when the component has mounted).
+`React.useEffectOnEveryRender` will run its function after every completed render, while `React.useEffect` will only run the effect on the first render (when the component has mounted).
 
 
 ## Examples
@@ -85,29 +84,32 @@ Sometimes, we want to run some additional code after React has updated the DOM.
 
 As an example, let's write a counter component that updates `document.title` on every render:
 
-<CodeTab labels={["ReScript", "JS Output"]}>
-
-```res
+```res prelude
 // Counter.res
 module Document = {
-  type t;
-  @val external document: t = "document";
+  type t
+  @val external document: t = "document"
   @set external setTitle: (t, string) => unit = "title"
 }
+```
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res example
 
 @react.component
 let make = () => {
-  let (count, setCount) = React.useState(_ => 0);
+  let (count, setCount) = React.useState(_ => 0)
 
-  React.useEffect(() => {
-    open Document
+  React.useEffectOnEveryRender(() => {
+    open! Document
     document->setTitle(`You clicked ${Belt.Int.toString(count)} times!`)
     None
-  }, );
+  })
 
   let onClick = (_evt) => {
     setCount(prev => prev + 1)
-  };
+  }
 
   let msg = "You clicked" ++ Belt.Int.toString(count) ++  "times"
 
@@ -147,11 +149,11 @@ function Counter(Props) {
 In case we want to make the effects dependent on `count`, we can just use following `useEffect` call instead:
 
 ```res
- React.useEffect1(() => {
-    open Document
+ React.useEffect(() => {
+    open! Document
     document->setTitle(`You clicked ${Belt.Int.toString(count)} times!`)
     None
-  }, [count]);
+  }, [count])
 ```
 
 Now instead of running an effect on every render, it will only run when `count` has a different value than in the render before.
@@ -162,33 +164,34 @@ Earlier, we looked at how to express side effects that don’t require any clean
 
 Let's look at an example that gracefully subscribes, and later on unsubscribes from some subscription API:
 
-<CodeTab labels={["ReScript", "JS Output"]}>
-
-```res
-// FriendStatus.res
-
+```res prelude
 module ChatAPI = {
   // Imaginary globally available ChatAPI for demo purposes
-  type status = { isOnline: bool };
-  @val external subscribeToFriendStatus: (string, status => unit) => unit = "subscribeToFriendStatus";
-  @val external unsubscribeFromFriendStatus: (string, status => unit) => unit = "unsubscribeFromFriendStatus";
+  type status = { isOnline: bool }
+  @val external subscribeToFriendStatus: (string, status => unit) => unit = "subscribeToFriendStatus"
+  @val external unsubscribeFromFriendStatus: (string, status => unit) => unit = "unsubscribeFromFriendStatus"
 }
 
-type state = Offline | Loading | Online;
+type state = Offline | Loading | Online
+```
+
+<CodeTab labels={["ReScript", "JS Output"]}>
 
+```res example
+// FriendStatus.res
 @react.component
 let make = (~friendId: string) => {
   let (state, setState) = React.useState(_ => Offline)
 
-  React.useEffect(() => {
+  React.useEffectOnEveryRender(() => {
     let handleStatusChange = (status) => {
       setState(_ => {
         status.ChatAPI.isOnline ? Online : Offline
       })
     }
 
-    ChatAPI.subscribeToFriendStatus(friendId, handleStatusChange);
-    setState(_ => Loading);
+    ChatAPI.subscribeToFriendStatus(friendId, handleStatusChange)
+    setState(_ => Loading)
 
     let cleanup = () => {
       ChatAPI.unsubscribeFromFriendStatus(friendId, handleStatusChange)
@@ -260,41 +263,45 @@ In some cases, cleaning up or applying the effect after every render might creat
 
 ```res
 // from a previous example above
-React.useEffect1(() => {
-  open Document
+React.useEffect(() => {
+  open! Document
   document->setTitle(`You clicked ${Belt.Int.toString(count)} times!`)
-  None;
-}, [count]);
+  None
+}, [count])
 ```
-Here, we pass `[count]` to `useEffect1` as a dependency. What does this mean? If the `count` is 5, and then our component re-renders with count still equal to 5, React will compare `[5]` from the previous render and `[5]` from the next render. Because all items within the array are the same (5 === 5), React would skip the effect. That’s our optimization.
+Here, we pass `[count]` to `useEffect` as a dependency. What does this mean? If the `count` is 5, and then our component re-renders with count still equal to 5, React will compare `[5]` from the previous render and `[5]` from the next render. Because all items within the array are the same (5 === 5), React would skip the effect. That’s our optimization.
 
 When we render with count updated to 6, React will compare the items in the `[5]` array from the previous render to items in the `[6]` array from the next render. This time, React will re-apply the effect because `5 !== 6`. If there are multiple items in the array, React will re-run the effect even if just one of them is different.
 
 This also works for effects that have a cleanup phase:
 
-```res
-// from a previous example above
-React.useEffect1(() => {
-  let handleStatusChange = (status) => {
-    setState(_ => {
-      status.ChatAPI.isOnline ? Online : Offline
-    })
-  }
+```res example
+@react.component
+let make = (~friendId: string) => {
+  let (state, setState) = React.useState(_ => Offline)
+  // from a previous example above
+  React.useEffect(() => {
+    let handleStatusChange = (status) => {
+      setState(_ => {
+        status.ChatAPI.isOnline ? Online : Offline
+      })
+    }
 
-  ChatAPI.subscribeToFriendStatus(friendId, handleStatusChange);
-  setState(_ => Loading);
+    ChatAPI.subscribeToFriendStatus(friendId, handleStatusChange)
+    setState(_ => Loading)
 
-  let cleanup = () => {
-    ChatAPI.unsubscribeFromFriendStatus(friendId, handleStatusChange)
-  }
+    let cleanup = () => {
+      ChatAPI.unsubscribeFromFriendStatus(friendId, handleStatusChange)
+    }
 
-  Some(cleanup)
-}, [friendId]) // Only re-subscribe if friendId changes
+    Some(cleanup)
+  }, [friendId]) // Only re-subscribe if friendId changes
+}
 ```
 
 **Important:** If you use this optimization, make sure the array includes all values from the component scope (such as props and state) that change over time and that are used by the effect. Otherwise, your code will reference stale values from previous renders
 
-If you want to run an effect and clean it up only once (on mount and unmount), use `React.useEffect0`.
+If you want to run an effect and clean it up only once (on mount and unmount), use `React.useEffect` with an empty dependency array `[]`.
 
 If you are interested in more performance optmization related topics, have a look at the ReactJS [Performance Optimization Docs](https://reactjs.org/docs/hooks-faq.html#performance-optimizations) for more detailed infos.
 
diff --git a/pages/docs/react/latest/hooks-overview.mdx b/pages/docs/react/latest/hooks-overview.mdx
index 1b05ca23a..1e4fc52be 100644
--- a/pages/docs/react/latest/hooks-overview.mdx
+++ b/pages/docs/react/latest/hooks-overview.mdx
@@ -26,15 +26,15 @@ Just for a quick look, here is an example of a `Counter` component that allows a
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 // Counter.res
 @react.component
 let make = () => {
-  let (count, setCount) = React.useState(_ => 0);
+  let (count, setCount) = React.useState(_ => 0)
 
   let onClick = (_evt) => {
     setCount(prev => prev + 1)
-  };
+  }
 
   let msg = "You clicked" ++ Belt.Int.toString(count) ++  "times"
 
diff --git a/pages/docs/react/latest/hooks-reducer.mdx b/pages/docs/react/latest/hooks-reducer.mdx
index 8b36747ca..2584e6351 100644
--- a/pages/docs/react/latest/hooks-reducer.mdx
+++ b/pages/docs/react/latest/hooks-reducer.mdx
@@ -38,7 +38,7 @@ An alternative to [useState](./hooks-state). Accepts a reducer of type `(state,
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 // Counter.res
 
 type action = Inc | Dec
@@ -103,7 +103,7 @@ You can leverage the full power of variants to express actions with data payload
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 // TodoApp.res
 
 type todo = {
@@ -278,7 +278,7 @@ It lets you extract the logic for calculating the initial state outside the redu
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 // Counter.res
 
 type action = Inc | Dec | Reset(int)
diff --git a/pages/docs/react/latest/hooks-ref.mdx b/pages/docs/react/latest/hooks-ref.mdx
index 053d632df..b6afb2dd5 100644
--- a/pages/docs/react/latest/hooks-ref.mdx
+++ b/pages/docs/react/latest/hooks-ref.mdx
@@ -17,7 +17,7 @@ The `useRef` hooks creates and manages mutable containers inside your React comp
 <CodeTab labels={["ReScript", "JS Output"]}>
 
 ```res
-let refContainer = React.useRef(initialValue);
+let refContainer = React.useRef(initialValue)
 ```
 
 ```js
@@ -49,7 +49,7 @@ More infos on direct DOM manipulation can be found in the [Refs and the DOM](./r
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 // TextInputWithFocusButton.res
 
 @send external focus: Dom.element => unit = "focus"
@@ -94,7 +94,7 @@ Reusing the example from our [Refs and the DOM](./refs-and-the-dom#callback-refs
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 // CustomTextInput.res
 
 @send external focus: Dom.element => unit = "focus"
diff --git a/pages/docs/react/latest/hooks-state.mdx b/pages/docs/react/latest/hooks-state.mdx
index a3a9793c9..7099fe408 100644
--- a/pages/docs/react/latest/hooks-state.mdx
+++ b/pages/docs/react/latest/hooks-state.mdx
@@ -41,7 +41,7 @@ The `setState` function can be passed down to other components as well, which is
 
 ### Using State for a Text Input
 
-```res
+```res example
 @react.component
 let make = () => {
   let (text, setText) = React.useState(_ => "");
@@ -65,7 +65,7 @@ In this example, we are creating a `ThemeContainer` component that manages a `da
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 // ThemeContainer.res
 module ControlPanel = {
   @react.component
@@ -131,32 +131,4 @@ function ThemeContainer(Props) {
 
 </CodeTab>
 
-Note that whenever `setDarkmode` is returning a new value (e.g. switching from `true` -> `false`), it will cause a re-render for `ThemeContainer`'s `className` and the toggle text of its nested `ControlPanel`.
-
-
-## Uncurried Version
-
-For cleaner JS output, you can use `React.Uncurried.useState` instead:
-
-<CodeTab labels={["ReScript", "JS Output"]}>
-
-```res
-let (state, setState) = React.Uncurried.useState(_ => 0)
-
-setState(. prev => prev + 1)
-```
-
-```js
-var match = React.useState(function () {
-      return 0;
-  });
-
-var setState = match[1];
-
-setState(function (prev) {
-      return prev + 1 | 0;
-    });
-```
-
-</CodeTab>
-
+Note that whenever `setDarkmode` is returning a new value (e.g. switching from `true` -> `false`), it will cause a re-render for `ThemeContainer`'s `className` and the toggle text of its nested `ControlPanel`.
\ No newline at end of file
diff --git a/pages/docs/react/latest/import-export-reactjs.mdx b/pages/docs/react/latest/import-export-reactjs.mdx
index dc4717af7..52d47464c 100644
--- a/pages/docs/react/latest/import-export-reactjs.mdx
+++ b/pages/docs/react/latest/import-export-reactjs.mdx
@@ -16,7 +16,7 @@ To reuse a React component in ReScript, create a new module, specify the compone
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 module Confetti = {
   @module("react-confetti") @react.component
   external make: (~width: int, ~height: int) => React.element = "default"
@@ -54,7 +54,7 @@ Use "default" to indicate the default export, or specify a named export if neede
 
 <CodeTab labels={["ReScript"]}>
 
-```res
+```res example
 // Equivalent of import { Foo } from "bar"
 module Foo = {
   @module("bar") @react.component
@@ -72,7 +72,7 @@ You can define a separate type for your component's props within the module.
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 module Confetti = {
   type confettiProps = {
     width: int,
@@ -111,7 +111,7 @@ To define optional props, use the `?` symbol.
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 module Confetti = {
   type confettiProps = {
     width: int,
@@ -152,7 +152,7 @@ To accept existing DOM props for a component, extend the `JsxDOM.domProps` type.
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 module Foo = {
   type fooProps = {
     ...JsxDOM.domProps,
diff --git a/pages/docs/react/latest/lazy-components.mdx b/pages/docs/react/latest/lazy-components.mdx
index 87c6a1c00..519464dfb 100644
--- a/pages/docs/react/latest/lazy-components.mdx
+++ b/pages/docs/react/latest/lazy-components.mdx
@@ -20,7 +20,7 @@ ReScript comes with APIs for doing dynamic imports both for single values and fo
 
 Let's look at a small example. First we'll define a simple component:
 
-```rescript
+```res example
 // Title.res
 @react.component
 let make = (~text) => {
diff --git a/pages/docs/react/latest/memo.mdx b/pages/docs/react/latest/memo.mdx
index 34b05a8c4..4e6d6c119 100644
--- a/pages/docs/react/latest/memo.mdx
+++ b/pages/docs/react/latest/memo.mdx
@@ -15,7 +15,7 @@ This memoized version of your component will usually not be re-rendered when its
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 @react.component
 let make = React.memo((~a: int, ~b: string) => {
   <div>
@@ -54,7 +54,7 @@ To work around this, you can redefine the make binding:
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 @react.component
 let make = (~disabled, ~onClick) => {
   <button
@@ -96,7 +96,7 @@ Another approach is to use a custom prop type and remove the `@react.component`
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 type props = {
   disabled: bool,
   onClick: JsxEvent.Mouse.t => unit,
diff --git a/pages/docs/react/latest/migrate-react.mdx b/pages/docs/react/latest/migrate-react.mdx
index bab12646c..9d8be5009 100644
--- a/pages/docs/react/latest/migrate-react.mdx
+++ b/pages/docs/react/latest/migrate-react.mdx
@@ -93,7 +93,7 @@ module M = {
 
 To this:
 
-```res
+```res example
 // V4
 module M = {
   type props<'msg> = {msg: 'msg}
@@ -122,7 +122,7 @@ module Context = {
 
 To this:
 
-```res
+```res example
 module Context = {
   let context = React.createContext(() => ())
 
@@ -156,7 +156,7 @@ module FancyInput = {
 }
 
 @react.component
-let make = () => {
+let make = (~onClick) => {
   let input = React.useRef(Nullable.null)
 
   <div>
@@ -169,7 +169,7 @@ let make = () => {
 
 To this: In v3, there is an inconsistency between `ref` as prop and `ref_` as argument. With JSX v4, `ref` is only allowed as an argument.
 
-```res
+```res example
 module FancyInput = {
   @react.component
   let make = React.forwardRef((
@@ -189,7 +189,7 @@ module FancyInput = {
 }
 
 @react.component
-let make = () => {
+let make = (~onClick) => {
   let input = React.useRef(Nullable.null)
 
   <div>
@@ -244,7 +244,7 @@ module Button = {
 
 To this:
 
-```res
+```res example
 module Button = {
   @module("./Button") @react.component
   external make: (~text: string=?) => React.element = "default"
diff --git a/pages/docs/react/latest/refs-and-the-dom.mdx b/pages/docs/react/latest/refs-and-the-dom.mdx
index 9d3f95629..707db06ae 100644
--- a/pages/docs/react/latest/refs-and-the-dom.mdx
+++ b/pages/docs/react/latest/refs-and-the-dom.mdx
@@ -38,13 +38,13 @@ Avoid using refs for anything that can be done declaratively.
 
 A React ref is represented as a `React.ref('value)` type, a container managing a mutable value of type `'value`. You can create this kind of ref with the [React.useRef](./hooks-ref) hook:
 
-```res
+```res example
 @react.component
 let make = () => {
-  let clicks = React.useRef(0);
+  let clicks = React.useRef(0)
 
   let onClick = (_) => {
-    clicks.current = clicks.current + 1;
+    clicks.current = clicks.current + 1
   };
 
   <div onClick>
@@ -76,7 +76,7 @@ This code uses a `React.ref` to store a reference to an `input` DOM node to put
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 // CustomTextInput.res
 
 @send external focus: Dom.element => unit = "focus"
@@ -193,7 +193,7 @@ The example below implements a common pattern: using the ref callback to store a
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 // CustomTextInput.res
 
 @send external focus: Dom.element => unit = "focus"
@@ -202,7 +202,7 @@ The example below implements a common pattern: using the ref callback to store a
 let make = () => {
   let textInput = React.useRef(Nullable.null)
   let setTextInputRef = element => {
-    textInput.current = element;
+    textInput.current = element
   }
 
   let focusTextInput = _ => {
@@ -248,7 +248,7 @@ You can pass callback refs between components like you can with object refs that
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 // Parent.res
 
 @send external focus: Dom.element => unit = "focus"
diff --git a/pages/docs/react/latest/rendering-elements.mdx b/pages/docs/react/latest/rendering-elements.mdx
index 06413ad0a..72331c29f 100644
--- a/pages/docs/react/latest/rendering-elements.mdx
+++ b/pages/docs/react/latest/rendering-elements.mdx
@@ -14,7 +14,7 @@ In our previous section [React Elements & JSX](./elements-and-jsx) we learned ho
 
 As we mentioned before, a `React.element` describes what you see on the screen:
 
-```res
+```res example
 let element = <h1> {React.string("Hello World")} </h1>
 ```
 
@@ -40,7 +40,7 @@ Here is a full example rendering our application in our `root` div:
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```res
+```res example
 // Dom access can actually fail. ReScript
 // is really explicit about handling edge cases!
 switch ReactDOM.querySelector("#root") {
diff --git a/pages/docs/react/latest/styling.mdx b/pages/docs/react/latest/styling.mdx
index ef2a0be86..2bfca0c30 100644
--- a/pages/docs/react/latest/styling.mdx
+++ b/pages/docs/react/latest/styling.mdx
@@ -14,12 +14,11 @@ React comes with builtin support for inline styles, but there are also a number
 
 If they work in JS then they almost certainly work in ReScript. In the next few sections, we've shared some ideas for working with popular libraries. If you're interested in working with one you don't see here, search the [package index](https://rescript-lang.org/packages) or post in [the forum](https://forum.rescript-lang.org).
 
-
 ## Inline Styles
 
 This is the most basic form of styling, coming straight from the 90s. You can apply a `style` attribute to any DOM element with our `ReactDOM.Style.make` API:
 
-```res
+```res example
 <div style={ReactDOM.Style.make(~color="#444444", ~fontSize="68px", ())} />
 ```
 
@@ -31,7 +30,7 @@ It's a [labeled](/docs/manual/latest/function#labeled-arguments) (therefore type
 
 The above `Style.make` API will safely type check every style field! However, we might have missed some more esoteric fields. If that's the case, the type system will tell you that the field you're trying to add doesn't exist. To remediate this, we're exposing a `ReactDOM.Style.unsafeAddProp` to dangerously add a field to a style:
 
-```res
+```res example
 let style =
   ReactDOM.Style.make(
     ~color="red",
@@ -44,7 +43,7 @@ let style =
 
 Use a `%%raw` expression to import CSS files within your ReScript / React component code:
 
-```rescript
+```res example
 // in a JS module setup
 %%raw("import './styles/main.css'")
 
@@ -62,13 +61,13 @@ As an example, let's say we have a CSS module like this:
 /* styles.module.css */
 
 .root {
-  color: red
+  color: red;
 }
 ```
 
-We now need to create a module binding that imports our styles as a JS object: 
+We now need to create a module binding that imports our styles as a JS object:
 
-```res
+```res example
 // {..} means we are handling a JS object with an unknown
 // set of attributes
 @module external styles: {..} = "./styles.module.css"
@@ -79,7 +78,6 @@ let app = <div className={styles["root"]} />
 
 **Note:** `{..}` is an open [JS object type](/docs/manual/latest/object#type-declaration), which means the type checker will not type check correct classname usage. If you want to enforce compiler errors, replace `{..}` with a concrete JS object type, such as `{"root": string}`.
 
-
 ## CSS Utility Libraries
 
 ### Tailwind
@@ -98,7 +96,7 @@ First, create your TailwindCSS main entrypoint file:
 
 Then, import your `main.css` file in your ReScript / React application:
 
-```res
+```res example
 // src/App.res
 
 %%raw("import './main.css'")
@@ -106,7 +104,7 @@ Then, import your `main.css` file in your ReScript / React application:
 
 Utilize ReScript's pattern matching and string interpolations to combine different classnames:
 
-```res
+```res example
 @react.component
 let make = (~active: bool) => {
   let activeClass = if active {
@@ -124,14 +122,13 @@ let make = (~active: bool) => {
 
 > **Hint:** `rescript-lang.org` actually uses TailwindCSS under the hood! Check out our [codebase](https://github.com/rescript-association/rescript-lang.org) to get some more inspiration on usage patterns.
 
-
 ## CSS-in-JS
 
 There's no way we could recommend a definitive CSS-in-JS workflow, since there are many different approaches on how to bind to CSS-in-JS libraries (going from simple to very advanced).
 
 For demonstration purposes, let's create some simple bindings to e.g. [`emotion`](https://emotion.sh/docs/introduction) (as described [here](https://github.com/bloodyowl/rescript-react-starter-kit/blob/eca7055c59ba578b2d1994fc928d8f541a423e74/src/shared/Emotion.res)):
 
-```res
+```res example
 // src/Emotion.res
 
 @module("@emotion/css") external css: {..} => string = "css"
@@ -170,7 +167,7 @@ let app = <div className={Styles.container} />
 
 Please note that this approach will not check for invalid css attribute names. If you e.g. want to make sure that only valid CSS attributes are being passed, you could define your `css` function like this as well:
 
-```res
+```res example
 @module("@emotion/css") external css: ReactDOM.Style.t => string = "css"
 
 // Usage is slightly different (and probably less ergonomic)
@@ -181,7 +178,7 @@ let app = <div
 />
 ```
 
-Here we used the already existing `React.Style.t` type to enforce valid CSS attribute names. 
+Here we used the already existing `React.Style.t` type to enforce valid CSS attribute names.
 Last but not least, you can also bind to functions that let you use raw CSS directly:
 
 ```res
diff --git a/scripts/test-examples.mjs b/scripts/test-examples.mjs
index dc68c9c5a..f7acca969 100644
--- a/scripts/test-examples.mjs
+++ b/scripts/test-examples.mjs
@@ -87,7 +87,7 @@ fs.writeFileSync(tempFileName, '')
 
 let success = true
 
-glob.sync(__dirname + '/../pages/docs/manual/latest/**/*.mdx').forEach((file) => {
+glob.sync(__dirname + '/../pages/docs/{manual/latest,react/latest}/**/*.mdx').forEach((file) => {
   let content = fs.readFileSync(file, {encoding: 'utf-8'})
   let parsedResult = parseFile(content)
   if (parsedResult != null) {
diff --git a/src/layouts/ReactDocsLayout.res b/src/layouts/ReactDocsLayout.res
index 134279c37..3f8d3bdc1 100644
--- a/src/layouts/ReactDocsLayout.res
+++ b/src/layouts/ReactDocsLayout.res
@@ -50,36 +50,6 @@ module Latest = {
     let title = "rescript-react"
     let version = "latest"
 
-    // TODO: Remove this once the work on the v11 milestone is completed.
-    // https://github.com/rescript-association/rescript-lang.org/milestone/6
-    let warnBanner = {
-      open Markdown
-
-      let v011Url =
-        "/" ++ (Array.join(url.base, "/") ++ ("/v0.11.0/" ++ Array.join(url.pagepath, "/")))
-
-      let label = switch Array.find(Constants.allReactVersions, ((v, _)) => {
-        v === version
-      }) {
-      | Some((_, label)) => label
-      | None => version
-      }
-
-      <div className="mb-10">
-        <Warn>
-          <P>
-            {React.string(
-              "You are currently looking at the " ++
-              (label ++
-              " docs, which are still a work in progress. If you miss anything, you may find it in the older v0.11.0 docs "),
-            )}
-            <A href=v011Url> {React.string("here")} </A>
-            {React.string(".")}
-          </P>
-        </Warn>
-      </div>
-    }
-
     <LatestLayout
       theme=#Reason
       components
@@ -89,7 +59,6 @@ module Latest = {
       title
       breadcrumbs
       ?frontmatter>
-      warnBanner
       children
     </LatestLayout>
   }