From ae7c5f77707d89a4beeb61aaaac3a1221975ee25 Mon Sep 17 00:00:00 2001
From: Juho Vepsalainen <bebraw@gmail.com>
Date: Thu, 8 Oct 2015 20:32:23 +0300
Subject: [PATCH] webpack and react - Port to pure functions

Sadly HMR isn't supported yet defeating the point...

Related: https://github.com/gaearon/react-transform-hmr/issues/6 .
---
 manuscript/03_webpack_and_react.md  | 18 +++++++-----------
 manuscript/04_implementing_notes.md |  2 ++
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/manuscript/03_webpack_and_react.md b/manuscript/03_webpack_and_react.md
index edd08c6e..080b0e0e 100644
--- a/manuscript/03_webpack_and_react.md
+++ b/manuscript/03_webpack_and_react.md
@@ -191,7 +191,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**
 
@@ -199,11 +199,9 @@ 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`. It is important that you import `React` as well because that JSX will get converted to `React.createElement` calls. You may find this alternative a little neater regardless.
@@ -221,11 +219,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 62f4edb7..88ca4aff 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)