reactjs · cyan33 · May 26, 2018
diff --git a/content/docs/composition-vs-inheritance.md b/content/docs/composition-vs-inheritance.md
@@ -17,67 +17,21 @@ Some components don't know their children ahead of time. This is especially comm
 
 We recommend that such components use the special `children` prop to pass children elements directly into their output:
 
-```js{4}
-function FancyBorder(props) {
-  return (
-    <div className={'FancyBorder FancyBorder-' + props.color}>
-      {props.children}
-    </div>
-  );
-}
-```
+`embed:composition-vs-inheritance/fancy-border-example.js`
 
 This lets other components pass arbitrary children to them by nesting the JSX:
 
-```js{4-9}
-function WelcomeDialog() {
-  return (
-    <FancyBorder color="blue">
-      <h1 className="Dialog-title">
-        Welcome
-      </h1>
-      <p className="Dialog-message">
-        Thank you for visiting our spacecraft!
-      </p>
-    </FancyBorder>
-  );
-}
-```
-
-[Try it on CodePen.](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)
+`embed:composition-vs-inheritance/welcome-dialog-example.js`
+
+[Try it on CodeSandbox.](codesandbox://composition-vs-inheritance/fancyborder-welcome-dialog-example)
 
 Anything inside the `<FancyBorder>` JSX tag gets passed into the `FancyBorder` component as a `children` prop. Since `FancyBorder` renders `{props.children}` inside a `<div>`, the passed elements appear in the final output.
 
 While this is less common, sometimes you might need multiple "holes" in a component. In such cases you may come up with your own convention instead of using `children`:
 
-```js{5,8,18,21}
-function SplitPane(props) {
-  return (
-    <div className="SplitPane">
-      <div className="SplitPane-left">
-        {props.left}
-      </div>
-      <div className="SplitPane-right">
-        {props.right}
-      </div>
-    </div>
-  );
-}
-
-function App() {
-  return (
-    <SplitPane
-      left={
-        <Contacts />
-      }
-      right={
-        <Chat />
-      } />
-  );
-}
-```
-
-[Try it on CodePen.](https://codepen.io/gaearon/pen/gwZOJp?editors=0010)
+`embed:composition-vs-inheritance/split-pane-example.js`
+
+[Try it on CodeSandbox.](codesandbox://composition-vs-inheritance/split-pane-codesandbox-example.js,composition-vs-inheritance/split-pane-codesandbox-example.css)
 
 React elements like `<Contacts />` and `<Chat />` are just objects, so you can pass them as props like any other data. This approach may remind you of "slots" in other libraries but there are no limitations on what you can pass as props in React.
 
@@ -87,78 +41,13 @@ Sometimes we think about components as being "special cases" of other components
 
 In React, this is also achieved by composition, where a more "specific" component renders a more "generic" one and configures it with props:
 
-```js{5,8,16-18}
-function Dialog(props) {
-  return (
-    <FancyBorder color="blue">
-      <h1 className="Dialog-title">
-        {props.title}
-      </h1>
-      <p className="Dialog-message">
-        {props.message}
-      </p>
-    </FancyBorder>
-  );
-}
-
-function WelcomeDialog() {
-  return (
-    <Dialog
-      title="Welcome"
-      message="Thank you for visiting our spacecraft!" />
-  );
-}
-```
+`embed:composition-vs-inheritance/specific-dialog-example.js`
 
 [Try it on CodePen.](https://codepen.io/gaearon/pen/kkEaOZ?editors=0010)
 
 Composition works equally well for components defined as classes:
 
-```js{10,27-31}
-function Dialog(props) {
-  return (
-    <FancyBorder color="blue">
-      <h1 className="Dialog-title">
-        {props.title}
-      </h1>
-      <p className="Dialog-message">
-        {props.message}
-      </p>
-      {props.children}
-    </FancyBorder>
-  );
-}
-
-class SignUpDialog extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleSignUp = this.handleSignUp.bind(this);
-    this.state = {login: ''};
-  }
-
-  render() {
-    return (
-      <Dialog title="Mars Exploration Program"
-              message="How should we refer to you?">
-        <input value={this.state.login}
-               onChange={this.handleChange} />
-        <button onClick={this.handleSignUp}>
-          Sign Me Up!
-        </button>
-      </Dialog>
-    );
-  }
-
-  handleChange(e) {
-    this.setState({login: e.target.value});
-  }
-
-  handleSignUp() {
-    alert(`Welcome aboard, ${this.state.login}!`);
-  }
-}
-```
+`embed:composition-vs-inheritance/signup-dialog-example.js`
 
 [Try it on CodePen.](https://codepen.io/gaearon/pen/gwZbYa?editors=0010)
 

diff --git a/examples/composition-vs-inheritance/fancy-border-example.js b/examples/composition-vs-inheritance/fancy-border-example.js
@@ -0,0 +1,8 @@
+function FancyBorder(props) {
+  return (
+    <div className={'FancyBorder FancyBorder-' + props.color}>
+      {/* highlight-next-line */}
+      {props.children}
+    </div>
+  );
+}
diff --git a/examples/composition-vs-inheritance/fancyborder-welcome-dialog-example.js b/examples/composition-vs-inheritance/fancyborder-welcome-dialog-example.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+function FancyBorder(props) {
+  return (
+    <div className={'FancyBorder FancyBorder-' + props.color}>
+      {props.children}
+    </div>
+  );
+}
+
+function WelcomeDialog() {
+  return (
+    <FancyBorder color="blue">
+      <h1 className="Dialog-title">
+        Welcome
+      </h1>
+      <p className="Dialog-message">
+        Thank you for visiting our spacecraft!
+      </p>
+    </FancyBorder>
+  );
+}
+
+ReactDOM.render(<WelcomeDialog />, document.getElementById('root'));
+
diff --git a/examples/composition-vs-inheritance/signup-dialog-example.js b/examples/composition-vs-inheritance/signup-dialog-example.js
@@ -0,0 +1,44 @@
+// highlight-range{10,27-31}
+function Dialog(props) {
+  return (
+    <FancyBorder color="blue">
+      <h1 className="Dialog-title">
+        {props.title}
+      </h1>
+      <p className="Dialog-message">
+        {props.message}
+      </p>
+      {props.children}
+    </FancyBorder>
+  );
+}
+
+class SignUpDialog extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSignUp = this.handleSignUp.bind(this);
+    this.state = {login: ''};
+  }
+
+  render() {
+    return (
+      <Dialog title="Mars Exploration Program"
+              message="How should we refer to you?">
+        <input value={this.state.login}
+               onChange={this.handleChange} />
+        <button onClick={this.handleSignUp}>
+          Sign Me Up!
+        </button>
+      </Dialog>
+    );
+  }
+
+  handleChange(e) {
+    this.setState({login: e.target.value});
+  }
+
+  handleSignUp() {
+    alert(`Welcome aboard, ${this.state.login}!`);
+  }
+}
diff --git a/examples/composition-vs-inheritance/specific-dialog-example.js b/examples/composition-vs-inheritance/specific-dialog-example.js
@@ -0,0 +1,21 @@
+// highlight-range{5,8,16-18}
+function Dialog(props) {
+  return (
+    <FancyBorder color="blue">
+      <h1 className="Dialog-title">
+        {props.title}
+      </h1>
+      <p className="Dialog-message">
+        {props.message}
+      </p>
+    </FancyBorder>
+  );
+}
+
+function WelcomeDialog() {
+  return (
+    <Dialog
+      title="Welcome"
+      message="Thank you for visiting our spacecraft!" />
+  );
+}
diff --git a/examples/composition-vs-inheritance/split-pane-codesandbox-example.css b/examples/composition-vs-inheritance/split-pane-codesandbox-example.css
@@ -0,0 +1,33 @@
+html, body, #root {
+  width: 100%;
+  height: 100%;
+}
+
+.SplitPane {
+  width: 100%;
+  height: 100%;
+}
+
+.SplitPane-left {
+  float: left;
+  width: 30%;
+  height: 100%;
+}
+
+.SplitPane-right {
+  float: left;
+  width: 70%;
+  height: 100%;
+}
+
+.Contacts {
+  width: 100%;
+  height: 100%; 
+  background: lightblue;
+}
+
+.Chat {
+  width: 100%;
+  height: 100%; 
+  background: pink;
+}
diff --git a/examples/composition-vs-inheritance/split-pane-codesandbox-example.js b/examples/composition-vs-inheritance/split-pane-codesandbox-example.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import './split-pane-codesandbox-example.css';
+
+function Contacts() {
+  return <div className="Contacts" />;
+}
+
+function Chat() {
+  return <div className="Chat" />;
+}
+
+function SplitPane(props) {
+  return (
+    <div className="SplitPane">
+      <div className="SplitPane-left">
+        {props.left}
+      </div>
+      <div className="SplitPane-right">
+        {props.right}
+      </div>
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <SplitPane
+      left={
+        <Contacts />
+      }
+      right={
+        <Chat />
+      } />
+  );
+}
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('root')
+);
diff --git a/examples/composition-vs-inheritance/split-pane-example.js b/examples/composition-vs-inheritance/split-pane-example.js
@@ -0,0 +1,27 @@
+function SplitPane(props) {
+  return (
+    <div className="SplitPane">
+      <div className="SplitPane-left">
+        {/* highlight-next-line */}
+        {props.left}
+      </div>
+        <div className="SplitPane-right">
+      {/* highlight-next-line */}
+        {props.right}
+      </div>
+    </div>
+  );
+}
+
+function App() {
+  {/* highlight-range{4,7} */}
+  return (
+    <SplitPane
+      left={
+        <Contacts />
+      }
+      right={
+        <Chat />
+      } />
+  );
+}
diff --git a/examples/composition-vs-inheritance/welcome-dialog-example.js b/examples/composition-vs-inheritance/welcome-dialog-example.js
@@ -0,0 +1,13 @@
+function WelcomeDialog() {
+  // highlight-range{3-8}
+  return (
+    <FancyBorder color="blue">
+      <h1 className="Dialog-title">
+        Welcome
+      </h1>
+      <p className="Dialog-message">
+        Thank you for visiting our spacecraft!
+      </p>
+    </FancyBorder>
+  );
+}