first commit

.gitignore

@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -0,0 +1,11 @@
+REACT_STARTKID
+
+สำหรับเริ่มต้นระบบแบบกำหนดค่า webpack, babel, node เอง
+รันโดนใช้คำสั่ง
+
+//หลังจาก clone ระบบมาแล้วเข้าไปที่ folder  react_startkid จากนั้นรันคำสั่งด้านล่าง
+
+npm i //เพื่อลง package ต่างๆ
+npm start
+
+เปิด chrome แล้วเข้าใช้งานที่  http://localhost:8000

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "babeltest",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack --config webpack.config.js",
+    "start": "webpack-dev-server --config webpack.dev.js && node server/index.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.9.1"
+  },
+  "dependencies": {
+    "express": "^4.16.1",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
+  }
+}

public/dist/bundle.js

@@ -0,0 +1,100 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+/******/
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// identity function for calling harmony imports with the correct context
+/******/ 	__webpack_require__.i = function(value) { return value; };
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, {
+/******/ 				configurable: false,
+/******/ 				enumerable: true,
+/******/ 				get: getter
+/******/ 			});
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 1);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.add = add;
+function add() {
+    var a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    var b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+
+    return a + b;
+}
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _math = __webpack_require__(0);
+
+var sum = (0, _math.add)(10, 20);
+console.warn(sum);
+
+/***/ })
+/******/ ]);

public/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Babel</title>
+</head>
+
+<body>
+    <div id="app"></div>
+    <script src="http://localhost:8080/main.js"></script>
+</body>
+
+</html>

server/index.js

@@ -0,0 +1,10 @@
+const express = require('express')
+const path = require('path')
+const renderer = require('./renderer')
+
+const app = express()
+app.use(express.static(path.resolve(__dirname, '..', 'public')))
+app.use(renderer)
+app.listen(8000, () => {
+    console.warn('running at http://localhost:8000')
+})

server/renderer.js

@@ -0,0 +1,9 @@
+const fs = require('fs')
+const path = require('path')
+
+const filepath = path.resolve(__dirname,'..','public', 'index.html')
+const markup = fs.readFileSync(filepath, 'utf-8')
+
+module.exports = (req, res, next) => {
+    res.send(markup)
+}

src/index.js

@@ -0,0 +1,69 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+const RadioIcon = ({ isSelected }) => {
+    return (
+        <div
+            style={{
+                borderColor: isSelected ? 'green' : '#ccc',
+                borderSize: '2px',
+                borderStyle: 'solid',
+                borderRadius: 14,
+                height: 14,
+                width: 14,
+                display: 'inline-block',
+                cursor: 'pointer',
+                background: isSelected ? 'rgb(0,0,0,0.05)' : '',
+            }}
+        />
+    )
+}
+
+class RadioOption extends React.Component {
+    render() {
+        return (
+            <div onClick={this.props.handleClick}>
+                <RadioIcon isSelected={this.props.isSelected} />{this.props.children}
+            </div>
+        )
+    }
+}
+
+class RadioGroup extends React.Component {
+    render() {
+        const childrenWithProps = React.Children.map(this.props.children, child => {
+            return React.cloneElement(child, {
+                handleClick: ()=> this.props.handleSelect(child.props.value),
+                isSelected: child.props.value === this.props.selected
+            })
+        })
+        return <div>{childrenWithProps}</div>
+    }
+}
+
+class App extends React.Component {
+    state = { selectedRadio: 'md' }
+    render() {
+        return (
+            <div>
+                <h1>Selected: {this.state.selectedRadio}</h1>
+                <RadioGroup handleSelect={this.handleSelect} selected={this.state.selectedRadio}>
+                    <RadioOption value="xs">Extra Small</RadioOption>
+                    <RadioOption value="sm">Small</RadioOption>
+                    <RadioOption value="md">Medium</RadioOption>
+                    <RadioOption value="lg">Large</RadioOption>
+                </RadioGroup>
+            </div>
+        )
+    }
+
+    handleSelect = (v) => {
+        this.setState({ selectedRadio: v })
+    }
+}
+
+
+ReactDOM.render(
+    <App />,
+    document.querySelector('#app')
+)

webpack.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+    entry: './src/index.js',
+    output: {
+        filename: 'bundle.js',
+        path: './public/dist'
+    },
+    module: {
+        rules: [
+            {
+                test: /.js$/,
+                use: [
+                    {
+                        loader: 'babel-loader',
+                        options: {
+                            presets: ['env']
+                        }
+                    }
+                ]
+            }
+        ]
+    }
+}

webpack.dev.js

@@ -0,0 +1,30 @@
+const webpack = require('webpack')
+const path = require('path')
+
+module.exports = {
+    entry: './src/index.js',
+    output: {
+        filename: '[name].js',
+        path: path.resolve(__dirname, 'public/dist'),
+        publicPath: '/',
+    },
+    module: {
+        rules: [
+            {
+                test: /.js$/,
+                use: [
+                    {
+                        loader: 'babel-loader',
+                        options: {
+                            presets: ['env', 'react', 'stage-2']
+                        }
+                    }
+                ]
+            }
+        ]
+    },
+    devServer: {
+        port: 8080,
+        inline: true,
+    }
+}