Lesson 15

Author: davidlormor

package.json

@@ -15,12 +15,15 @@
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.5.0",
+    "babel-standalone": "^6.7.7",
     "react": "^15.1.0",
     "react-dom": "^15.1.0"
   },
   "devDependencies": {
     "babel": "^6.5.2",
+    "css-loader": "^0.23.1",
     "standard": "^7.1.1",
+    "style-loader": "^0.13.1",
     "webpack": "^1.13.1",
     "webpack-dev-server": "^1.14.1"
   }

web_modules/app/index.js

@@ -1,30 +1,46 @@
 import React, { Component } from 'react'
+import { transform } from 'babel-standalone'
+import './styles.css'
 
 class App extends Component {
   constructor () {
     super()
     this.state = {
-      people: [
-        {id: 1, name: 'David'},
-        {id: 2, name: 'Jordan'},
-        {id: 3, name: 'Renick'},
-        {id: 4, name: 'Galilee'},
-        {id: 5, name: 'Magdalene'}
-      ]
+      input: '/* add your jsx here */',
+      output: '',
+      error: ''
     }
+    this.update = this.update.bind(this)
   }
 
-  render () {
-    const people = this.state.people.map((person) => {
-      return <Person key={person.id} person={person} />
-    })
+  update (e) {
+    const code = e.target.value
 
-    return <div>{people}</div>
+    try {
+      this.setState({
+        output: transform(code, {
+          presets: ['es2015-loose', 'react', 'stage-0']
+        }).code,
+        error: ''
+      })
+    } catch (err) {
+      this.setState({ error: err.message })
+    }
   }
-}
 
-const Person = ({ person: { id, name } }) => {
-  return <div>{id}. {name}</div>
+  render () {
+    const { input, output, error } = this.state
+
+    return (
+      <div>
+        <header>{error}</header>
+        <div className='container'>
+          <textarea defaultValue={input} onChange={this.update}></textarea>
+          <pre>{output}</pre>
+        </div>
+      </div>
+    )
+  }
 }
 
 export default App

web_modules/app/styles.css

@@ -0,0 +1,38 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: monospace;
+}
+
+header {
+  display: block;
+  height: 10vh;
+  overflow: auto;
+  background: pink;
+  color: red;
+  font-size: 28px;
+}
+
+.container {
+  height: 90vh;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flex;
+  display: -o-flex;
+  display: flex;
+}
+
+pre {
+  background: #f8f8f8;
+}
+
+pre, textarea {
+  width: 50%;
+  font-family: monospace;;
+  font-size: 28px;
+  margin: 0;
+  padding: 10px;
+  color: #222;
+}
+
+textarea:focus { outline: 0; }

webpack.config.js

@@ -17,6 +17,10 @@ module.exports = {
         query: {
           presets: ['es2015', 'react']
         }
+      },
+      {
+        test: /\.css$/,
+        loaders: ['style', 'css']
       }
     ]
   }