diff --git a/manuscript/03_webpack_and_react.md b/manuscript/03_webpack_and_react.md
index 885d2894..ff02ff33 100644
--- a/manuscript/03_webpack_and_react.md
+++ b/manuscript/03_webpack_and_react.md
@@ -181,7 +181,7 @@ to get React installed. This will save React to the `dependencies` section of *p
 
 *react-dom* is needed as React can be used to target multiple systems (DOM, mobile, terminal, i.e.,). Given we're dealing with the browser, *react-dom* is the correct choice here.
 
-Now that we got that out of the way, we can start to develop our Kanban application. First we should define the `App`. This will be the core of our application. It represents the high level view of our app and works as an entry point. Later on it will orchestrate the entire app.
+Now that we got that out of the way, we can start to develop our Kanban application. First we should define the `App`. This will be the core of our application. It represents the high level view of our app and works as an entry point. Later on it will orchestrate the entire app. We can get started by using React's function based component definition syntax:
 
 **app/components/App.jsx**
 
@@ -189,15 +189,11 @@ Now that we got that out of the way, we can start to develop our Kanban applicat
 import React from 'react';
 import Note from './Note.jsx';
 
-export default class App extends React.Component {
-  render() {
-    return <Note />;
-  }
-}
+export default () => {
+  return <Note />;
+};
 ```
 
-T> You can import portions from `react` using syntax `import React, { Component } from 'react';`. Then you can do `class App extends Component`. You may find this alternative a little neater.
-
 T> It may be worth your while to install [React Developer Tools](https://github.com/facebook/react-devtools) extension to your browser. Currently Chrome and Firefox are supported. This will make it easier to understand what's going on while developing.
 
 W> It is important to note that ES6 based class approach **doesn't** support autobinding behavior. Apart from that you may find ES6 classes neater than `React.createClass`. See the end of this chapter for a comparison.
@@ -211,11 +207,9 @@ We also need to define the `Note` component. In this case, we will just want to
 ```javascript
 import React from 'react';
 
-export default class Note extends React.Component {
-  render() {
-    return <div>Learn Webpack</div>;
-  }
-}
+export default () => {
+  return <div>Learn Webpack</div>;
+};
 ```
 
 T> Note that we're using *jsx* extension here. It helps us to tell modules using JSX syntax apart from regular ones. It is not absolutely necessary, but it is a good convention to have.
diff --git a/manuscript/04_implementing_notes.md b/manuscript/04_implementing_notes.md
index ac1d019f..d07e0895 100644
--- a/manuscript/04_implementing_notes.md
+++ b/manuscript/04_implementing_notes.md
@@ -104,6 +104,8 @@ We are using various important features of React in the snippet above. Understan
 * `<ul>{notes.map(this.renderNote)}</ul>` - `{}`'s allow us to mix JavaScript syntax within JSX. `map` returns a list of `li` elements for React to render.
 * ``<li key={`note${note.id}`}>`` - In order to tell React in which order to render the elements, we use the `key` property. It is important that this is unique or else React won't be able to figure out the correct order in which to render. If not set, React will give a warning. See [Multiple Components](https://facebook.github.io/react/docs/multiple-components.html) for more information.
 
+T> You can import portions from `react` using syntax `import React, {Component} from 'react';`. Then you can do `class App extends Component`. You may find this alternative a little neater.
+
 If you run the application now, you can see it almost works. There's a small glitch, but we'll fix that next.
 
 ![Almost done](images/react_02.png)