Initial commit + completed 2 tutorials

Tutorial 1 and tutorial 2 complete
2 Hello world components with spanishify and lebanify buttons

Author: Syknapse

src/App.css

@@ -1,28 +1 @@
-.App {
-  text-align: center;
-}
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
-
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
-}
-
-.App-title {
-  font-size: 1.5em;
-}
-
-.App-intro {
-  font-size: large;
-}
-
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}

src/App.js

@@ -1,21 +1,14 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
+import React from 'react';
 import './App.css';
+import HelloWorld from './HelloWorld';
 
-class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>
-    );
-  }
-}
+const App = () => {
+  return (
+  <div className="App">
+  <HelloWorld name="World"/>
+  <HelloWorld name="React"/>
+  </div>
+  );
+};
 
-export default App;
+export default App;

src/HelloWorld.css

@@ -0,0 +1,8 @@
+.HelloWorld {
+    border: 6px solid black;
+    text-align: center;
+    background: #c7e3f7;
+    color: #333;
+    margin: 20px;
+    padding: 20px;
+  }

src/HelloWorld.js

@@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import './HelloWorld.css';
+
+
+class HelloWorld extends Component {
+    constructor (props) {
+        super (props);
+        this.state = { greeting: 'Hello' };
+        this.spanishify = this.spanishify.bind(this);
+        this.lebanify = this.lebanify.bind(this);
+    }
+    spanishify() {
+        this.setState({ greeting: 'Hola' });
+    }
+    lebanify() {
+        this.setState({ greeting: 'Hi, keefak, sa va' });
+    }
+    render () {
+        return (
+            <div className="HelloWorld">
+            {this.state.greeting} {this.props.name}!
+            <br/>
+            <button onClick={this.spanishify}>Spanishify!</button>
+            <button onClick={this.lebanify}>Lebanify!</button>
+            </div>
+        );
+    }
+}
+
+/* const HelloWorld = props => {
+  return (<div className="HelloWorld">Hello {props.name}!</div>);
+}; */
+
+export default HelloWorld;