webpack and react - Port to pure functions

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

Related: gaearon/react-transform-hmr#6 .

manuscript/03_webpack_and_react.md

@@ -191,19 +191,17 @@ 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**
 
 ```javascript
 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.

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)