diff --git a/docs/quick-start.md b/docs/quick-start.md
index 35c205b49..2d651c057 100644
--- a/docs/quick-start.md
+++ b/docs/quick-start.md
@@ -42,16 +42,14 @@ It is advisable that only top-level components of your app (such as route handle
 Let’s say we have a `<Counter />` “dumb” component with a number `value` prop, and an `onIncrement` function prop that it will call when user presses an “Increment” button:
 
 ```js
-import { Component } from 'react';
-
-export default class Counter extends Component {
-  render() {
-    return (
-      <button onClick={this.props.onIncrement}>
-        {this.props.value}
-      </button>
-    )
-  }
+import React from 'react'
+
+export default function Counter(props) {
+  return (
+    <button onClick={props.onIncrement}>
+      {props.value}
+    </button>
+  )
 }
 ```