rithmschool · rebelskum · Dec 22, 2017 · Jan 3, 2018 · Jan 11, 2018 · Jan 12, 2018
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
 .DS_Store
+
diff --git a/01-introduction-to-react/jsx-and-babel/app.jsx b/01-introduction-to-react/jsx-and-babel/app.jsx
@@ -0,0 +1,95 @@
+
+// part 1
+class FirstComponent extends React.Component {
+  render() {
+    return (
+       <div>
+         <h1>My very first component</h1>
+       </div>
+    );
+  }
+}
+
+class SecondComponent extends React.Component {
+  render(){
+    return (
+      <div>
+        <h2>My second component</h2>
+      </div>
+    )
+  }
+}
+
+class NamedComponent extends React.Component {
+  render() {
+    return (
+      <p>Hi, my name is {this.props.name}!</p>
+    )
+
+
+  }
+}
+// part 2
+class Tweet extends React.Component {
+  render() {
+    return (
+      <div>
+        {/* name */}
+        <span>{this.props.name}</span>
+        {/* username */}
+        <span className="username">@{this.props.username}</span>
+        {/* date */}
+        <span className="date">{this.props.date}</span>
+        {/* message */}
+        <p>{this.props.message}</p>
+      </div>
+    )
+  }
+}
+// part 3
+class Person extends React.Component {
+  render() {
+    let drinkAllowed = this.props.age >= 21 ? "Have a drink!" : "You must be 21";
+    let hobbies = this.props.hobbies.map((hobby,curr) => <li key={curr}>{hobby}</li>)
+    return (
+      <div>
+        <p>Learn some information about this person</p>
+        <ul>
+          <li> Name: {this.props.name.slice(0,6)}</li>
+          <li> Age: {this.props.age}</li>
+          <ul> Hobbies:
+            {hobbies}
+          </ul>
+        </ul>
+        <h3>{drinkAllowed}</h3>
+      </div>
+    )
+  }
+}
+
+
+
+class App extends React.Component {
+  render(){
+    return (
+      <div>
+        <FirstComponent />
+        <SecondComponent />
+        <NamedComponent name= "Jette"/>
+        <Tweet name= "Jette" username= "rebelskum" date={new Date()} message= "Omg, have you seen the new Star Wars movie?!"/>
+        <Tweet name= "Michelle" username= "curlygirl" date={new Date()} message= "Omg, no i haven't seen the new Star wars movie"/>
+        <Tweet name= "Vicki" username= "mamaOwl" date={new Date()} message= "Omg, how was the new Star Wars movie @Rebelskum"/>
+        <Person name="Sean" age={36} hobbies={['crossfit', 'basketball', 'football']}/>
+        <Person name="Stephen" age={30} hobbies={['coding', 'biology', 'reading']}/>
+        <Person name="Allie" age={19} hobbies={['yoga', 'cooking', 'coding']}/>
+      </div>
+    )
+  }
+}
+
+
+
+ReactDOM.render(
+    <App />,
+    document.getElementById('app')
+);
diff --git a/01-introduction-to-react/jsx-and-babel/index.html b/01-introduction-to-react/jsx-and-babel/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" type="text/css" href="app.css">
+  <title>React + Babel</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+  <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
+  <script type="text/babel" src="app.jsx"></script>
+</body>
+</html>
diff --git a/02-props-state-component-architecture/state/colored_squares/.gitignore b/02-props-state-component-architecture/state/colored_squares/.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*