Merge pull request #25 from crsanti/issue/05-refactor

Review 05 Refactor (issue #14)

Author: brauliodiez

.gitignore

@@ -5,4 +5,5 @@ typings/
 *.orig
 .idea/
 */src/**/*.js.map
-*.log
+*.log
+**/.vscode/

05 Refactor/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"
+  }
+}

05 Refactor/readme.md

@@ -0,0 +1,109 @@
+# 05 Refactor
+
+In the previous sample we were setting an initial username value, what would
+happen if we expect this value to come from e.g. an AJAX request or if it could
+change in time? The current approach won't work.
+
+We can think about two possible solutions:
+
+- The first idea that could come into our mind is to implement a mix: we receive via props the current name value, then we hold an state with the current editing
+value... what drawbacks could we encounter? We have to listen on the `componentWillReceiveProps` for any change on the parent user name control and replace our state, we end up with a mixed governance.
+
+- The second idea is to setup two properties, the parent control will hold _userName_ and _editingUsername_, whenever the user clicks on the button to
+replace the name it will notify the parent control and it will replace the
+content of _userName_" with the content from _editingUsername_. If _userName_ gets updated by any other third party (e.g. ajax callback) it will update as well
+_editingUsername_.
+
+We will take as a starting point sample _04 Callback_:
+
+Summary steps:
+
+- Update _nameEdit.jsx_ in order to request the new _editingUsername_, and remove it from the state.
+
+- Update _app.jsx_ to hold the new editing property in the state, pass it to the
+children, control and perform the proper update on the callback event from the
+child control.
+
+## Prerequisites
+
+Install [Node.js and npm](https://nodejs.org/en/) 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 _04 Callback_ and execute `npm install`.
+
+- Update _nameEdit.jsx_ in order to request the new _editingUsername_, and remove it
+from the state.
+
+```jsx
+import React from 'react';
+
+export class NameEditComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        <label>Update Name:</label>
+        <input value={this.props.editingUserName}
+          onChange={(e) => this.props.onEditingNameUpdated(e.target.value)} />
+        <input type="submit" value="Change" className="btn btn-default"
+          onClick={this.props.onNameUpdateRequest} />
+      </div>
+    );
+  }
+}
+
+NameEditComponent.propTypes = {
+  editingUserName: React.PropTypes.string.isRequired,
+  onEditingNameUpdated: React.PropTypes.func.isRequired,
+  onNameUpdateRequest: React.PropTypes.func.isRequired
+};
+```
+
+- Update _app.jsx_ to hold the new editing property in the state, pass it to the
+children control and perform the proper update on the callback event from the
+child control.
+
+
+```jsx
+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
+          editingUserName={this.state.editingUserName}
+          onEditingNameUpdated={this.updateEditingName.bind(this)}
+          onNameUpdateRequest={this.setUsernameState.bind(this)} />
+      </div>
+    );
+  }
+}
+  ```
+
+Finally we can check the sample is working as _04 Callback_ executing from the command line
+`npm start` and opening [http://localhost:8080](http://localhost:8080).

05 Refactor/src/app.jsx

@@ -0,0 +1,32 @@
+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
+          editingUserName={this.state.editingUserName}
+          onEditingNameUpdated={this.updateEditingName.bind(this)}
+          onNameUpdateRequest={this.setUsernameState.bind(this)} />
+      </div>
+    );
+  }
+}

05 Refactor/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
+};

05 Refactor/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>

05 Refactor/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'));

05 Refactor/src/nameEdit.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export class NameEditComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        <label>Update Name:</label>
+        <input value={this.props.editingUserName}
+          onChange={(e) => this.props.onEditingNameUpdated(e.target.value)} />
+        <input type="submit" value="Change" className="btn btn-default"
+          onClick={this.props.onNameUpdateRequest} />
+      </div>
+    );
+  }
+}
+
+NameEditComponent.propTypes = {
+  editingUserName: React.PropTypes.string.isRequired,
+  onEditingNameUpdated: React.PropTypes.func.isRequired,
+  onNameUpdateRequest: React.PropTypes.func.isRequired
+};

05 Refactor/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
+    })
+  ]
+}