From 8494428bcb3dd8d4778a58ebe25e7c1f908c7f53 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Tue, 13 Feb 2018 11:44:39 -0800
Subject: [PATCH] Added example of before/after context API

---
 content/blog/2018-02-07-react-v-16-3.md       |  8 +++-
 .../context-example-after.js                  | 34 +++++++++++++++
 .../context-example-before.js                 | 42 +++++++++++++++++++
 .../create-ref-example.js}                    |  0
 4 files changed, 83 insertions(+), 1 deletion(-)
 create mode 100644 examples/16-3-release-blog-post/context-example-after.js
 create mode 100644 examples/16-3-release-blog-post/context-example-before.js
 rename examples/{16-3-release-blog-create-ref.js => 16-3-release-blog-post/create-ref-example.js} (100%)

diff --git a/content/blog/2018-02-07-react-v-16-3.md b/content/blog/2018-02-07-react-v-16-3.md
index 9d8c4ad6..d5307c13 100644
--- a/content/blog/2018-02-07-react-v-16-3.md
+++ b/content/blog/2018-02-07-react-v-16-3.md
@@ -21,6 +21,12 @@ Version 16.3 introduces a new context API that is more efficient and supports bo
 >
 > The old context API will keep working for all React 16.x releases, so you will have time to migrate.
 
+Here is an example of how you might inject a "theme" using the old context API:
+`embed:16-3-release-blog-post/context-example-before.js`
+
+And here is an example of how you might do the same with the new context API:
+`embed:16-3-release-blog-post/context-example-after.js`
+
 [Learn more about the new context API here.](#)
 
 ## `createRef` API
@@ -28,7 +34,7 @@ Version 16.3 introduces a new context API that is more efficient and supports bo
 Previously, React provided two ways for managing refs: the legacy string ref API and the callback API. Although the string ref API was the more convenient of the two, it had [several downsides](https://github.com/facebook/react/issues/1373) and so our official recomendation was to [use the callback form instead](https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs).
 
 Version 16.3 adds a new option for managing refs that offers the convenience of a string ref without any of the downsides:
-`embed:16-3-release-blog-create-ref.js`
+`embed:16-3-release-blog-post/create-ref-example.js`
 
 > **Note:**
 >
diff --git a/examples/16-3-release-blog-post/context-example-after.js b/examples/16-3-release-blog-post/context-example-after.js
new file mode 100644
index 00000000..0f9137f4
--- /dev/null
+++ b/examples/16-3-release-blog-post/context-example-after.js
@@ -0,0 +1,34 @@
+// highlight-next-line
+const ThemeContext = React.createContext('light');
+
+class ThemeProvider extends React.Component {
+  state = {theme: 'light'};
+
+  render() {
+    // highlight-range{2}
+    return (
+      <ThemeContext.Provider value={this.state.theme}>
+        {this.props.children}
+      </ThemeContext.Provider>
+    );
+  }
+}
+
+class ThemedButton extends React.Component {
+  render() {
+    // highlight-range{2-4}
+    return (
+      <ThemeContext.Consumer>
+        {theme => {
+          const background = theme ? '#fff' : '#000';
+
+          return (
+            <button style={{background}}>
+              {this.props.children}
+            </button>
+          );
+        }}
+      </ThemeContext.Consumer>
+    );
+  }
+}
diff --git a/examples/16-3-release-blog-post/context-example-before.js b/examples/16-3-release-blog-post/context-example-before.js
new file mode 100644
index 00000000..fac8e39f
--- /dev/null
+++ b/examples/16-3-release-blog-post/context-example-before.js
@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+class ThemeProvider extends React.Component {
+  // highlight-range{1-3}
+  static childContextTypes = {
+    theme: PropTypes.string,
+  };
+
+  state = {
+    theme: 'light',
+  };
+
+  // highlight-range{1-5}
+  getChildContext() {
+    return {
+      theme: state.theme,
+    };
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
+
+class ThemedButton extends React.Component {
+  // highlight-range{1-3}
+  static contextTypes = {
+    theme: PropTypes.string,
+  };
+
+  render() {
+    // highlight-next-line
+    const background = this.context.theme ? '#fff' : '#000';
+
+    return (
+      <button style={{background}}>
+        {this.props.children}
+      </button>
+    );
+  }
+}
diff --git a/examples/16-3-release-blog-create-ref.js b/examples/16-3-release-blog-post/create-ref-example.js
similarity index 100%
rename from examples/16-3-release-blog-create-ref.js
rename to examples/16-3-release-blog-post/create-ref-example.js