Added example of before/after context API

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:**
 >

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>
+    );
+  }
+}

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>
+    );
+  }
+}