Add forgotten resource ../99_readme_resources/04 Callback/browser_output.png and fix import modules. This closes #12

Author: linuxonrails

04 Callback/readme.md

@@ -38,7 +38,7 @@ from a stateless component into a class component, then we will add some refacto
   ```jsx
   import * as React from 'react';
 
-  class NameEditComponent extends React.Component {
+  export class NameEditComponent extends React.Component {
 
     constructor(props) {
       super(props);
@@ -75,15 +75,12 @@ from a stateless component into a class component, then we will add some refacto
     initialUserName: React.PropTypes.string.isRequired,
     onNameUpdated: React.PropTypes.func,
   };
-
-  export default NameEditComponent;
-
   ```
 
 - Let's wire this up in the `app.jsx` file.
 
   ```jsx
-  class App extends React.Component {
+  export class App extends React.Component {
     constructor(props) {
       super(props);
       this.state = { userName: 'defaultUserName' };
@@ -107,7 +104,6 @@ from a stateless component into a class component, then we will add some refacto
     }
   }
 
-  export default App;
   ```
 
  Now we've got a clear event, strongly typed and simplified (straight forward).

04 Callback/src/app.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import HelloComponent from './hello';
-import NameEditComponent from './nameEdit';
+import { HelloComponent } from './hello';
+import { NameEditComponent } from './nameEdit';
 
-class App extends React.Component {
+export class App extends React.Component {
   constructor(props) {
     super(props);
     this.state = { userName: 'defaultUserName' };
@@ -25,5 +25,3 @@ class App extends React.Component {
     );
   }
 }
-
-export default App;

04 Callback/src/hello.jsx

@@ -1,11 +1,9 @@
 import * as React from 'react';
 
-const HelloComponent = props => (
+export const HelloComponent = props => (
   <h2>Hello user: {props.userName}!</h2>
 );
 
 HelloComponent.propTypes = {
   userName: React.PropTypes.string.isRequired,
 };
-
-export default HelloComponent;

04 Callback/src/main.jsx

@@ -2,9 +2,9 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import App from './app';
+import { App } from './app';
 
 render(
-  <App />,
-  document.getElementById('root')
+  <App />
+  , document.getElementById('root')
 );

04 Callback/src/nameEdit.jsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-class NameEditComponent extends React.Component {
+export class NameEditComponent extends React.Component {
 
   constructor(props) {
     super(props);
@@ -37,5 +37,3 @@ NameEditComponent.propTypes = {
   initialUserName: React.PropTypes.string.isRequired,
   onNameUpdated: React.PropTypes.func,
 };
-
-export default NameEditComponent;