Add with-context-api example (#5154)

* Add with-context-api example

* Change next dependency to canary and fix CounterProvider import

examples/with-context-api/README.md

@@ -0,0 +1,44 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-context-api)
+
+# Hello World example
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-context-api with-context-api-app
+# or
+yarn create next-app --example with-context-api with-context-api-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-context-api
+cd with-context-api
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+This example shows how to use react context api in our app. Based on WesBos example.

examples/with-context-api/components/CounterProvider.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+
+/* First we will make a new context */
+const CounterContext = React.createContext()
+
+/* Then create a provider Component */
+class CounterProvider extends Component {
+  state = {
+    count: 0
+  }
+
+  increase = () => {
+    this.setState({
+      count: this.state.count + 1
+    })
+  }
+
+  decrease = () => {
+    this.setState({
+      count: this.state.count - 1
+    })
+  }
+
+  render () {
+    return (
+      <CounterContext.Provider
+        value={{
+          count: this.state.count,
+          increase: this.increase,
+          decrease: this.decrease
+        }}
+      >
+        {this.props.children}
+      </CounterContext.Provider>
+    )
+  }
+}
+
+/* then make a consumer which will surface it */
+const CounterConsumer = CounterContext.Consumer
+
+export default CounterProvider
+export { CounterConsumer }

examples/with-context-api/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "with-context-api",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^7.0.0-canary.16",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
+  },
+  "license": "ISC"
+}

examples/with-context-api/pages/_app.js

@@ -0,0 +1,19 @@
+import App, { Container } from 'next/app'
+/* First we import our provider */
+import CounterProvider from '../components/CounterProvider'
+
+class MyApp extends App {
+  render () {
+    const { Component, pageProps } = this.props
+    return (
+      <Container>
+        {/* Then we wrap our components with the provider */}
+        <CounterProvider>
+          <Component {...pageProps} />
+        </CounterProvider>
+      </Container>
+    )
+  }
+}
+
+export default MyApp

examples/with-context-api/pages/index.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react'
+/* First we import the consumer */
+import { CounterConsumer } from '../components/CounterProvider'
+
+export default class index extends Component {
+  render () {
+    return (
+      /* Then we use our context through render props */
+      <CounterConsumer>
+        {({ count, increase, decrease }) => (
+          <div>
+            <p>Counter: {count}</p>
+            <button onClick={increase}>Increase</button>
+            <button onClick={decrease}>Decrease</button>
+          </div>
+        )}
+      </CounterConsumer>
+    )
+  }
+}