Convert to ES6 class properties

.babelrc

@@ -2,5 +2,8 @@
   "presets": [
     "env",
     "react"
+  ],
+  "plugins": [
+    "babel-plugin-transform-class-properties"
   ]
 }

package.json

@@ -9,14 +9,17 @@
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",
+    "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
+    "css-loader": "^0.28.7",
     "eslint": "^4.11.0",
-    "live-server": "^1.2.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
+    "style-loader": "^0.19.1",
     "validator": "^9.1.2",
-    "webpack": "^3.10.0"
+    "webpack": "^3.10.0",
+    "webpack-dev-server": "^2.9.7"
   },
   "devDependencies": {
     "eslint-config-standard": "^10.2.1",
@@ -27,8 +30,6 @@
   },
   "scripts": {
     "build": "webpack",
-    "watch": "webpack --watch",
-    "build-babel": "babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch",
-    "serve": "live-server public/"
+    "serve": "webpack-dev-server"
   }
 }

src/app.js

@@ -2,5 +2,27 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import IndecisionApp from './components/IndecisionApp'
+import './styles/style.css'
 
 ReactDOM.render(<IndecisionApp />, document.getElementById('app'))
+
+class OldSyntax {
+  constructor () {
+    this.name = 'Mike'
+  }
+}
+
+const oldSyntax = new OldSyntax()
+console.log(oldSyntax)
+
+class NewSyntax {
+  name = "Jen"
+  getGreeting = () => {
+    return `Hi, my name is ${this.name}.`
+  }
+}
+const newSyntax = new NewSyntax()
+const newGetGreeting = newSyntax.getGreeting
+console.log(newSyntax)
+console.log(newGetGreeting())
+

src/components/AddOptions.js → src/components/AddOption.js

@@ -1,14 +1,11 @@
 import React from 'react'
 
 export default class AddOption extends React.Component {
-  constructor (props) {
-    super(props)
-    this.handleAddOption = this.handleAddOption.bind(this)
-    this.state = {
-      error: undefined
-    }
+  state = {
+    error: undefined
   }
-  handleAddOption (e) {
+
+  handleAddOption = (e) => {
     e.preventDefault()
     const option = e.target.elements.option.value.trim()
     const error = this.props.handleAddOption(option)

src/components/IndecisionApp.js

@@ -1,21 +1,51 @@
 import React from 'react'
-import AddOption from './AddOptions'
+import AddOption from './AddOption'
 import Options from './Options'
 import Action from './Action'
 import Header from './Header'
 
 export default class IndecisionApp extends React.Component {
-  constructor (props) {
-    super(props)
-    this.handleDeleteOptions = this.handleDeleteOptions.bind(this)
-    this.handleDeleteOption = this.handleDeleteOption.bind(this)
-    this.handleResetOptions = this.handleResetOptions.bind(this)
-    this.handleAddOption = this.handleAddOption.bind(this)
-    this.handlePick = this.handlePick.bind(this)
-    this.state = {
-      options: []
+  state = {
+    options: []
+  }
+
+  handleDeleteOptions = () => {
+    this.setState(() => ({ options: [] }))
+  }
+
+  handleDeleteOption = (optionText) => {
+    this.setState((previousState) => {
+      return {
+        options: previousState.options.filter((option) => {
+          return optionText !== option
+        })}
+    })
+  }
+
+  handleResetOptions = () => {
+    // this.setState(() => ({ options: this.props.options }))
+    this.setState(() => ({ options: [] }))
+  }
+
+  handleAddOption = (option) => {
+    if (this.state.options.indexOf(option) > -1) {
+      return 'The option entered already exists'
+    } else if (!option) {
+      return 'The option entered was not valid'
     }
+    this.setState((previousState) => ({
+      // this is the short version rather than using return { blah: blahStuff }
+      // the curly braces need normal braces around to avoid parser errors
+      options: previousState.options.concat([option])
+    }))
+  }
+
+  handlePick = () => {
+    const randomNumber = Math.floor(Math.random() * this.state.options.length)
+    const option = this.state.options[randomNumber]
+    console.log(option)
   }
+
   render () {
     const title = 'Indecision App'
     const subTitle = 'Put your life in the hands of a computer'
@@ -68,41 +98,4 @@ export default class IndecisionApp extends React.Component {
     }
   }
 
-  handleDeleteOptions () {
-    this.setState(() => ({ options: [] }))
-  }
-
-  handleDeleteOption (optionText) {
-    this.setState((previousState) => {
-      return {
-        options: previousState.options.filter((option) => {
-          return optionText !== option
-        })}
-    })
-  }
-
-  handleResetOptions () {
-    // this.setState(() => ({ options: this.props.options }))
-    this.setState(() => ({ options: [] }))
-  }
-
-  handleAddOption (option) {
-    console.log(option)
-    if (this.state.options.indexOf(option) > -1) {
-      return 'The option entered already exists'
-    } else if (!option) {
-      return 'The option entered was not valid'
-    }
-    this.setState((previousState) => ({
-      // this is the short version rather than using return { blah: blahStuff }
-      // the curly braces need normal braces around to avoid parser errors
-      options: previousState.options.concat([option])
-    }))
-  }
-
-  handlePick () {
-    const randomNumber = Math.floor(Math.random() * this.state.options.length)
-    const option = this.state.options[randomNumber]
-    console.log(option)
-  }
 } // End of IndecisionApp class definition

webpack.config.js

@@ -11,6 +11,18 @@ module.exports = {
       loader: 'babel-loader',
       test: /\.js$/,
       exclude: /node_modules/
+    },
+    {
+      loader: [
+        'style-loader',
+        'css-loader'
+      ],
+      test: /\.css$/
     }]
+  },
+  devtool: 'cheap-module-eval-source-map',
+  devServer: {
+    // https://webpack.js.org/configuration/dev-server/#devserver
+    contentBase: path.join(__dirname, 'public')
   }
 }