Merge pull request #28 from linuxonrails/port_06_movebacktostateless_from_ts_to_js_#15

Port 06 MoveBackToStateless From TS to JS (ES6 >ES6). Issue #15

Author: brauliodiez

06 MoveBackToStateless/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"
+  }
+}

06 MoveBackToStateless/readme.md

@@ -0,0 +1,47 @@
+# 06 MoveBackToStateless
+
+In example 05 we learned how to remove state from a child control just to have clear governance of state.
+
+It's time to make some cleanup, let's simplify _nameEdit_ component and move it as a stateless component.
+
+We will take a startup point sample _05 MoveBacktOStateless_.
+
+Summary steps:
+
+- Update _nameEdit.jsx_, port it to stateless component and add the methods inline.
+
+
+## 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 _05 Refactor_ and execute `npm install`.
+
+- Update _nameEdit.jsx_, port it to stateless component and add the methods inline. It should look like:
+
+  ```jsx
+  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} />
+      </div>
+    );
+  }
+
+  NameEditComponent.propTypes = {
+    editingUserName: React.PropTypes.string.isRequired,
+    onEditingNameUpdated: React.PropTypes.func.isRequired,
+    onNameUpdateRequest: React.PropTypes.func.isRequired
+  };
+
+  ```

06 MoveBackToStateless/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>
+    );
+  }
+}

06 MoveBackToStateless/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
+};

06 MoveBackToStateless/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>

06 MoveBackToStateless/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'));

06 MoveBackToStateless/src/nameEdit.jsx

@@ -0,0 +1,19 @@
+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} />
+    </div>
+  );
+}
+
+NameEditComponent.propTypes = {
+  editingUserName: React.PropTypes.string.isRequired,
+  onEditingNameUpdated: React.PropTypes.func.isRequired,
+  onNameUpdateRequest: React.PropTypes.func.isRequired
+};

06 MoveBackToStateless/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
+    })
+  ]
+}