add missing files up to pagination

andoulla · Aug 28, 2016 · 7512e59 · 7512e59
1 parent 9c6978a
commit 7512e59
Show file tree

Hide file tree

Showing 44 changed files with 22,070 additions and 8 deletions.
diff --git a/Lecture 9 ES6 Classes /1 - Start/index.html → Lecture 9 ES6 Classes/1 - Start/index.html b/Lecture 9 ES6 Classes /1 - Start/index.html → Lecture 9 ES6 Classes/1 - Start/index.html
diff --git a/Lecture 9 ES6 Classes /2 - End/index.html → Lecture 9 ES6 Classes/2 - End/index.html b/Lecture 9 ES6 Classes /2 - End/index.html → Lecture 9 ES6 Classes/2 - End/index.html
diff --git a/Lesson 12 Webpack setup/index.html b/Lesson 12 Webpack setup/index.html
@@ -3,6 +3,8 @@
 <head>
   <meta charset="UTF-8">
   <title>Document</title>
+  <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.33/browser.js"></script>-->
+  <link rel="stylesheet" href="./style/style.css">
 </head>
 <body>
   <div id="app"></div>

diff --git a/Lesson 12 Webpack setup/package.json b/Lesson 12 Webpack setup/package.json
@@ -14,6 +14,7 @@
     "babel-preset-es2015": "6.6.0",
     "babel-preset-react": "6.5.0",
     "babel-preset-stage-1": "6.5.0",
+    "babel-standalone": "^6.7.7",
     "react": "15.0.2",
     "react-dom": "15.0.2",
     "webpack": "1.13.0",

diff --git a/Lesson 12 Webpack setup/src/components/babel-transformer.jsx b/Lesson 12 Webpack setup/src/components/babel-transformer.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import * as Babel from 'babel-standalone';
+
+export default class BabelTransformer extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      inputJSX: '/* Add your JSX here */',
+      outputJS: '',
+      error: ''
+    }
+    this.transformJSX = this.transformJSX.bind(this);
+  }
+
+  transformJSX(event) {
+    let code = event.target.value;
+    try {
+      this.setState({
+      outputJS: Babel.transform(code, { sourceMaps: true, presets: ['es2015', 'react'] }).code,
+      error: ''
+      });
+
+      console.log(this.state.outputJS);
+    }
+    catch(error) {
+      this.setState({error: error.message})
+    }
+  }
+  render() {
+
+    return (
+     <div>
+      <div className="container" >
+        <textarea onChange={this.transformJSX} defaultValue={this.state.inputJSX}></textarea>
+        <pre>
+          {this.state.outputJS}
+        </pre>
+
+      </div>
+       <footer>{this.state.error}</footer>  
+      </div> 
+    )
+  } 
+};
diff --git a/Lesson 12 Webpack setup/src/index.jsx b/Lesson 12 Webpack setup/src/index.jsx
@@ -1,13 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-
-const Hello = () => {
-  return (
-    <div>Hello world!</div>
-  )
-}
+import BabelTransformer from './components/babel-transformer';
 
 ReactDOM.render(
-  <Hello />,
+  <BabelTransformer />,
   document.getElementById('app')
-);
+);
diff --git a/Lesson 12 Webpack setup/style/style.css b/Lesson 12 Webpack setup/style/style.css
@@ -0,0 +1,36 @@
+body {
+	margin: 0;
+	padding: 0;
+	/*font-family: monospace;*/
+}
+
+footer {
+	display: block;
+	height: 10vh;
+	overflow: auto;
+	background-color: #f1f1f1;
+	color: #c7254e;
+	font-size: 28px;
+	padding: 20px;
+	box-sizing: border-box;
+}
+
+.container {
+	height: 90vh;
+	display: flex;
+	box-sizing: border-box;
+
+}
+
+pre, textarea {
+	width: 50%;
+	margin: 0;
+	padding: 10px;
+	color: #222;
+	overflow: scroll;
+}
+
+
+textarea:focus { 
+	outline: 0;
+}
diff --git a/Lesson 12 Webpack setup/webpack.config.js b/Lesson 12 Webpack setup/webpack.config.js
@@ -10,5 +10,8 @@ module.exports = {
       exclude: /node_modules/,
       loader: 'babel'
     }]
+  },
+   resolve: {
+    extensions: ['', '.js', '.jsx']
   }
 };