Merge pull request #29 from linuxonrails/port_07_enable_from_ts_to_js_#16

Port 07 Enable From TS to JS (ES6 >ES6). Issue #16

Author: brauliodiez

07 Enable/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "samplereact-es6",
+  "version": "1.0.0",
+  "description": "A little project to provide a set of step by step guided samples using React and ES6",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --inline",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "bootstrap": "^3.3.7",
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2"
+  },
+  "devDependencies": {
+    "babel-core": "^6.18.2",
+    "babel-loader": "^6.2.7",
+    "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-dev-server": "^1.16.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Lemoncode/react-by-sample-es6"
+  }
+}

07 Enable/readme.md

@@ -0,0 +1,73 @@
+# 07 Enable
+
+
+Let's continue with the update name sample, this time we want to disable the
+"update" button when the input is empty or when the value hasn't changed.
+
+We will take a startup point sample _06 MoveBacktOStateless_.
+
+Summary steps:
+
+- Add a condition to disable
+
+
+## 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 from _06 MoveBacktoStateless_.
+
+- Let's start by adding a condition to disable the field whenever is empty. Replace only the input tag in _src/nameEdit.jsx_ with the following code:
+
+  ```jsx
+  <input type="submit" value="Change"
+    className="btn btn-default"
+    onClick={props.onNameUpdateRequest}
+    disabled={props.editingUserName === ''}
+  />
+  ```
+
+- Now comes the tricky part, detect when the name hasn't changed.<br />
+First we will add a new property called _userName_ with type `string` in _src/nameEdit.jsx_. This one will hold the last accepted userName.
+
+  ```jsx
+  interface Props {
+    userName : string;
+    editingUserName : string;
+    onEditingNameUpdated : (newEditingName : string) => any;
+    onNameUpdateRequest : () => void;
+  }
+  ```
+
+- We will add to the enable condition one more test, checking if name has changed.
+Replace again only the input tag in _src/nameEdit.jsx_ with the following code:
+
+  ```jsx
+  <input type="submit" value="Change"
+    className="btn btn-default"
+    onClick={props.onNameUpdateRequest}
+    disabled={props.editingUserName === '' || props.userName === props.editingUserName}
+  />
+  ```
+
+- Now we have to feed this property from the parent control (Add `UserName={this.state.userName}` to the NameEditComponent in _src/app.jsx_). The `NameEditComponent` should be like:
+
+  ```jsx
+  <NameEditComponent
+    UserName={this.state.userName}
+    editingUserName={this.state.editingUserName}
+    onEditingNameUpdated={this.updateEditingName.bind(this)}
+    onNameUpdateRequest={this.setUsernameState.bind(this)}
+  />
+  ```
+
+
+- Let's give a try
+
+  ```
+  npm start
+  ```

07 Enable/src/app.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {HelloComponent} from './hello';
+import {NameEditComponent} from './nameEdit';
+
+export class App extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const defaultUserName = 'defaultUserName';
+    this.state = {userName: defaultUserName, editingUserName: defaultUserName};
+  }
+
+  setUsernameState() {
+    this.setState({userName: this.state.editingUserName});
+  }
+
+  updateEditingName(editingName) {
+    this.setState({editingUserName: editingName});
+  }
+
+  render() {
+    return (
+      <div>
+        <HelloComponent userName={this.state.userName} />
+        <NameEditComponent
+          userName={this.state.userName}
+          editingUserName={this.state.editingUserName}
+          onEditingNameUpdated={this.updateEditingName.bind(this)}
+          onNameUpdateRequest={this.setUsernameState.bind(this)} />
+      </div>
+    );
+  }
+}

07 Enable/src/hello.jsx

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

07 Enable/src/index.html

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

07 Enable/src/main.jsx

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

07 Enable/src/nameEdit.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export const NameEditComponent = (props) => {
+  return (
+    <div>
+      <label>Update Name:</label>
+      <input value={props.editingUserName}
+        onChange={(e) => props.onEditingNameUpdated(e.target.value)} />
+      <input type="submit" value="Change"
+        className="btn btn-default"
+        onClick={props.onNameUpdateRequest}
+        disabled={props.editingUserName === '' || props.userName === props.editingUserName}
+        />
+    </div>
+  );
+}
+
+NameEditComponent.propTypes = {
+  userName: React.PropTypes.string.isRequired,
+  editingUserName: React.PropTypes.string.isRequired,
+  onEditingNameUpdated: React.PropTypes.func.isRequired,
+  onNameUpdateRequest: React.PropTypes.func.isRequired
+};

07 Enable/webpack.config.js

@@ -0,0 +1,74 @@
+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']
+  },
+  target: 'web',
+  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?$/,
+        exclude: /node_modules/,
+        loader: 'babel',
+        query: {
+          presets: ['react', '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
+    })
+  ]
+}