Convert state-and-lifecycle to inline embeds

Author: Ives van Hoorne

content/docs/state-and-lifecycle.md

@@ -13,50 +13,13 @@ So far we have only learned one way to update the UI.
 
 We call `ReactDOM.render()` to change the rendered output:
 
-```js{8-11}
-function tick() {
-  const element = (
-    <div>
-      <h1>Hello, world!</h1>
-      <h2>It is {new Date().toLocaleTimeString()}.</h2>
-    </div>
-  );
-  ReactDOM.render(
-    element,
-    document.getElementById('root')
-  );
-}
-
-setInterval(tick, 1000);
-```
-
-[Try it on CodePen.](http://codepen.io/gaearon/pen/gwoJZk?editors=0010)
+[Run example.](source:examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-1.js{11})
 
 In this section, we will learn how to make the `Clock` component truly reusable and encapsulated. It will set up its own timer and update itself every second.
 
 We can start by encapsulating how the clock looks:
 
-```js{3-6,12}
-function Clock(props) {
-  return (
-    <div>
-      <h1>Hello, world!</h1>
-      <h2>It is {props.date.toLocaleTimeString()}.</h2>
-    </div>
-  );
-}
-
-function tick() {
-  ReactDOM.render(
-    <Clock date={new Date()} />,
-    document.getElementById('root')
-  );
-}
-
-setInterval(tick, 1000);
-```
-
-[Try it on CodePen.](http://codepen.io/gaearon/pen/dpdoYR?editors=0010)
+[Run example.](source:examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-2.js{6,7,8,9,14})
 
 However, it misses a crucial requirement: the fact that the `Clock` sets up a timer and updates the UI every second should be an implementation detail of the `Clock`.
 
@@ -89,20 +52,7 @@ You can convert a functional component like `Clock` to a class in five steps:
 
 5. Delete the remaining empty function declaration.
 
-```js
-class Clock extends React.Component {
-  render() {
-    return (
-      <div>
-        <h1>Hello, world!</h1>
-        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
-      </div>
-    );
-  }
-}
-```
-
-[Try it on CodePen.](http://codepen.io/gaearon/pen/zKRGpo?editors=0010)
+[Run example.](source:examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-3.js)
 
 `Clock` is now defined as a class rather than a function.
 
@@ -171,30 +121,7 @@ We will later add the timer code back to the component itself.
 
 The result looks like this:
 
-```js{2-5,11,18}
-class Clock extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {date: new Date()};
-  }
-
-  render() {
-    return (
-      <div>
-        <h1>Hello, world!</h1>
-        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
-      </div>
-    );
-  }
-}
-
-ReactDOM.render(
-  <Clock />,
-  document.getElementById('root')
-);
-```
-
-[Try it on CodePen.](http://codepen.io/gaearon/pen/KgQpJd?editors=0010)
+[Run example.](source:examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-4.js{5,6,7,8,14,20})
 
 Next, we'll make the `Clock` set up its own timer and update itself every second.
 
@@ -265,47 +192,7 @@ Finally, we will implement a method called `tick()` that the `Clock` component w
 
 It will use `this.setState()` to schedule updates to the component local state:
 
-```js{18-22}
-class Clock extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {date: new Date()};
-  }
-
-  componentDidMount() {
-    this.timerID = setInterval(
-      () => this.tick(),
-      1000
-    );
-  }
-
-  componentWillUnmount() {
-    clearInterval(this.timerID);
-  }
-
-  tick() {
-    this.setState({
-      date: new Date()
-    });
-  }
-
-  render() {
-    return (
-      <div>
-        <h1>Hello, world!</h1>
-        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
-      </div>
-    );
-  }
-}
-
-ReactDOM.render(
-  <Clock />,
-  document.getElementById('root')
-);
-```
-
-[Try it on CodePen.](http://codepen.io/gaearon/pen/amqdNA?editors=0010)
+[Run example.](source:examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-5.js{18,19,20,21,22})
 
 Now the clock ticks every second.
 
@@ -434,38 +321,15 @@ This also works for user-defined components:
 
 The `FormattedDate` component would receive the `date` in its props and wouldn't know whether it came from the `Clock`'s state, from the `Clock`'s props, or was typed by hand:
 
-```js
-function FormattedDate(props) {
-  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
-}
-```
-
-[Try it on CodePen.](http://codepen.io/gaearon/pen/zKRqNB?editors=0010)
+[Run example.](source:examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-6.js{4,5,6})
 
 This is commonly called a "top-down" or "unidirectional" data flow. Any state is always owned by some specific component, and any data or UI derived from that state can only affect components "below" them in the tree.
 
 If you imagine a component tree as a waterfall of props, each component's state is like an additional water source that joins it at an arbitrary point but also flows down.
 
 To show that all components are truly isolated, we can create an `App` component that renders three `<Clock>`s:
 
-```js{4-6}
-function App() {
-  return (
-    <div>
-      <Clock />
-      <Clock />
-      <Clock />
-    </div>
-  );
-}
-
-ReactDOM.render(
-  <App />,
-  document.getElementById('root')
-);
-```
-
-[Try it on CodePen.](http://codepen.io/gaearon/pen/vXdGmd?editors=0010)
+[Run example.](source:examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-7/index.js{9,10,11})
 
 Each `Clock` sets up its own timer and updates independently.
 

content/docs/uncontrolled-components.md

@@ -10,7 +10,7 @@ To write an uncontrolled component, instead of writing an event handler for ever
 
 For example, this code accepts a single name in an uncontrolled component:
 
-[Run the example.](source:examples/uncontrolled-components/src/index.js{11,20}?editorsize=70)
+[Run the example.](source:examples/single-file-examples/src/uncontrolled-components.js{11,20}?editorsize=70)
 
 Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components. It can also be slightly less code if you want to be quick and dirty. Otherwise, you should usually use controlled components.
 

examples/uncontrolled-components/package.json renamed to examples/single-file-examples/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "uncontrolled-components",
+  "name": "react-doc-examples",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-1.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+function tick() {
+  const element = (
+    <div>
+      <h1>Hello, world!</h1>
+      <h2>It is {new Date().toLocaleTimeString()}.</h2>
+    </div>
+  );
+  ReactDOM.render(element, document.getElementById('root'));
+}
+
+setInterval(tick, 1000);

examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-2.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+function Clock(props) {
+  return (
+    <div>
+      <h1>Hello, world!</h1>
+      <h2>It is {props.date.toLocaleTimeString()}.</h2>
+    </div>
+  );
+}
+
+function tick() {
+  ReactDOM.render(<Clock date={new Date()} />, document.getElementById('root'));
+}
+
+setInterval(tick, 1000);

examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-3.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+class Clock extends React.Component {
+  render() {
+    return (
+      <div>
+        <h1>Hello, world!</h1>
+        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
+      </div>
+    );
+  }
+}
+
+function tick() {
+  ReactDOM.render(<Clock date={new Date()} />, document.getElementById('root'));
+}
+
+setInterval(tick, 1000);

examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-4.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+class Clock extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {date: new Date()};
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>Hello, world!</h1>
+        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<Clock />, document.getElementById('root'));

examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-5.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+class Clock extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {date: new Date()};
+  }
+
+  componentDidMount() {
+    this.timerID = setInterval(() => this.tick(), 1000);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timerID);
+  }
+
+  tick() {
+    this.setState({
+      date: new Date(),
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>Hello, world!</h1>
+        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<Clock />, document.getElementById('root'));

examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-6.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+function FormattedDate(props) {
+  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
+}
+
+class Clock extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {date: new Date()};
+  }
+
+  componentDidMount() {
+    this.timerID = setInterval(() => this.tick(), 1000);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timerID);
+  }
+
+  tick() {
+    this.setState({
+      date: new Date(),
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>Hello, world!</h1>
+        <FormattedDate date={this.state.date} />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<Clock />, document.getElementById('root'));

examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-7/Clock.js

@@ -0,0 +1,35 @@
+import React from 'react';
+
+function FormattedDate(props) {
+  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
+}
+
+export default class Clock extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {date: new Date()};
+  }
+
+  componentDidMount() {
+    this.timerID = setInterval(() => this.tick(), 1000);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timerID);
+  }
+
+  tick() {
+    this.setState({
+      date: new Date(),
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>Hello, world!</h1>
+        <FormattedDate date={this.state.date} />
+      </div>
+    );
+  }
+}