Merge pull request #27 from linuxonrails/port_04_callback_from_ts_to_js_#12

 Port 04 Callback From TS to JS (ES6 >ES6) Issue #12

Author: brauliodiez

04 Callback/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "samplereact",
+  "version": "1.0.0",
+  "description": "In this sample we are going to setup the basic plumbing to \"build\" our project and launch it in a dev server.",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --inline",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "babel-core": "^6.18.2",
+    "babel-loader": "^6.2.7",
+    "babel-plugin-transform-runtime": "^6.15.0",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-react": "^6.16.0",
+    "css-loader": "^0.25.0",
+    "file-loader": "^0.9.0",
+    "html-webpack-plugin": "^2.24.1",
+    "style-loader": "^0.13.1",
+    "url-loader": "^0.5.7",
+    "webpack": "^1.13.3",
+    "webpack-devserver": "0.0.6"
+  },
+  "dependencies": {
+    "bootstrap": "^3.3.7",
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2"
+  }
+}

04 Callback/readme.md

@@ -0,0 +1,121 @@
+# 04 Callback + State
+
+In this sample we are going to refactor the previous sample **03 State**.
+
+We'll update the name property only when the user clicks on
+a _change_ button, we will simplify the event itself as well.
+
+Obviously, we will take the sample **03 State** as a starting point.
+
+Summary steps:
+
+- Add a button to the `EditName` component and a handler function for this.
+- Submit the name only when the user clicks on the button.
+- Update the `app` component to handle the new simplified event.
+
+## Prerequisites
+
+Install [Node.js and npm](https://nodejs.org/en/) (v6.6.0 or newer) if they are not already installed on your computer.
+
+> Verify that you are running at least node v6.x.x and npm 3.x.x by running `node -v` and `npm -v` in a terminal/console window. Older versions may produce errors.
+
+## Steps to build it
+
+- Copy the content of the `03 State` folder to an empty folder for the sample
+and make this your current folder.
+
+- Install the npm packages described in the `package.json` and verify that it works:
+
+  ```bash
+  npm install
+  ```
+
+- Since we are going to use an internal handler, we'll transform the `NameEditComponent`
+from a stateless component into a class component, then we will add some refactor on the naming.
+
+ The `nameEdit.jsx` file should looks like this:
+
+  ```jsx
+  import * as React from 'react';
+
+  export class NameEditComponent extends React.Component {
+
+    constructor(props) {
+      super(props);
+      // Watch out what would happen if we get this user name via an AJAX callback
+      // you will find a different implementatin on 05 sample
+      this.state = {
+        editingName: this.props.initialUserName,
+      };
+
+      this.onChange = this.onChange.bind(this);
+      this.onNameSubmit = this.onNameSubmit.bind(this);
+    }
+
+    onChange(event) {
+      this.setState({ editingName: event.target.value });
+    }
+
+    onNameSubmit() {
+      this.props.onNameUpdated(this.state.editingName);
+    }
+
+    render() {
+      return (
+        <div>
+          <label htmlFor="editingName">Update Name:</label>
+          <input value={this.state.editingName} onChange={this.onChange} id="editingName" />
+          <input type="submit" value="Change" className="btn btn-default" onClick={this.onNameSubmit} />
+        </div>
+      );
+    }
+  }
+
+  NameEditComponent.propTypes = {
+    initialUserName: React.PropTypes.string.isRequired,
+    onNameUpdated: React.PropTypes.func,
+  };
+  ```
+
+- Let's wire this up in the `app.jsx` file.
+
+  ```jsx
+  export class App extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = { userName: 'defaultUserName' };
+      this.setUsernameState = this.setUsernameState.bind(this);
+    }
+
+    setUsernameState(newName) {
+      this.setState({ userName: newName });
+    }
+
+    render() {
+      return (
+        <div>
+          <HelloComponent userName={this.state.userName} />
+          <NameEditComponent
+            initialUserName="Javier Cansado"
+            onNameUpdated={this.setUsernameState}
+          />
+        </div>
+      );
+    }
+  }
+
+  ```
+
+ Now we've got a clear event, strongly typed and simplified (straight forward).
+
+- Let's give it a try:
+
+  ```bash
+  npm start
+  ```
+
+- Then, load http://localhost:8080/ in a browser to see the output.
+
+ ![Browser Output](../99_readme_resources/04 Callback/browser_output.png "Browser Output")
+
+ Now, the greeting only change when the user clicks on the change button.

04 Callback/src/app.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { HelloComponent } from './hello';
+import { NameEditComponent } from './nameEdit';
+
+export class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { userName: 'defaultUserName' };
+    this.setUsernameState = this.setUsernameState.bind(this);
+  }
+
+  setUsernameState(newName) {
+    this.setState({ userName: newName });
+  }
+
+  render() {
+    return (
+      <div>
+        <HelloComponent userName={this.state.userName} />
+        <NameEditComponent
+          initialUserName="Javier Cansado"
+          onNameUpdated={this.setUsernameState}
+        />
+      </div>
+    );
+  }
+}

04 Callback/src/hello.jsx

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

04 Callback/src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Sample 03: State management</title>
+  </head>
+  <body>
+    <h1>Sample app</h1>
+    <div id="root"></div>
+  </body>
+</html>

04 Callback/src/main.jsx

@@ -0,0 +1,10 @@
+/* global document */
+
+import React from 'react';
+import { render } from 'react-dom';
+import { App } from './app';
+
+render(
+  <App />
+  , document.getElementById('root')
+);

04 Callback/src/nameEdit.jsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+
+export class NameEditComponent extends React.Component {
+
+  constructor(props) {
+    super(props);
+    // Watch out what would happen if we get this user name via an AJAX callback
+    // you will find a different implementatin on 05 sample
+    this.state = {
+      editingName: this.props.initialUserName,
+    };
+
+    this.onChange = this.onChange.bind(this);
+    this.onNameSubmit = this.onNameSubmit.bind(this);
+  }
+
+  onChange(event) {
+    this.setState({ editingName: event.target.value });
+  }
+
+  onNameSubmit() {
+    this.props.onNameUpdated(this.state.editingName);
+  }
+
+  render() {
+    return (
+      <div>
+        <label htmlFor="editingName">Update Name:</label>
+        <input value={this.state.editingName} onChange={this.onChange} id="editingName" />
+        <input type="submit" value="Change" className="btn btn-default" onClick={this.onNameSubmit} />
+      </div>
+    );
+  }
+}
+
+NameEditComponent.propTypes = {
+  initialUserName: React.PropTypes.string.isRequired,
+  onNameUpdated: React.PropTypes.func,
+};

04 Callback/webpack.config.js

@@ -0,0 +1,79 @@
+var path = require('path');
+var webpack = require('webpack');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+
+var basePath = __dirname;
+
+module.exports = {
+  context: path.join(basePath, "src"),
+  resolve: {
+    extensions: ['', '.js', '.jsx']
+  },
+  entry: [
+    './main.jsx',
+    '../node_modules/bootstrap/dist/css/bootstrap.css'
+  ],
+  output: {
+    path: path.join(basePath, 'dist'),
+    filename: 'bundle.js'
+  },
+  devtool: 'source-map',
+  devServer: {
+    contentBase: './dist', //Content base
+    inline: true, //Enable watch and live reload
+    host: 'localhost',
+    port: 8080,
+    stats: 'errors-only'
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.jsx$/,
+        loader: "babel-loader",
+        exclude: /node_modules/,
+        query: {
+          plugins: ['transform-runtime'],
+          presets : ['es2015', 'react']
+        }
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+        query: {
+          presets: ['es2015']
+        }
+      },
+      {
+        test: /\.css$/,
+        loader: 'style-loader!css-loader'
+      },
+      // Loading glyphicons => https://github.com/gowravshekar/bootstrap-webpack
+      // Using here url-loader and file-loader
+      {
+        test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
+        loader: 'url?limit=10000&mimetype=application/font-woff'
+      },
+      {
+        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
+        loader: 'url?limit=10000&mimetype=application/octet-stream'
+      },
+      {
+        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
+        loader: 'file'
+      },
+      {
+        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+        loader: 'url?limit=10000&mimetype=image/svg+xml'
+      }
+    ]
+  },
+  plugins: [
+    // Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html', // Name of file in ./dist/
+      template: 'index.html', // Name of template in ./src
+      hash: true
+    })
+  ]
+}