Merge pull request #1 from linuxuser07/basics

Basics

Author: linuxuser07

react-complete-guide/src/App.js

@@ -1,13 +1,29 @@
 import React, { Component } from 'react';
 import './App.css';
+import Person from './Person/Person';
 
 class App extends Component {
+  state = {
+    persons: [
+      {name: 'Max', age: 28},
+      {name: 'Manu', age: 29},
+      {name: 'Stephanie', age: 26}
+    ]
+  }
+
   render() {
     return (
       <div className="App">
         <h1>Hi, I'm a react app </h1>
+        <p>This is really working </p>
+        <button>Switch Name</button>
+        <Person name={this.state.persons[0].name} age={this.state.persons[0].age}/>
+        <Person name={this.state.persons[1].name} age={this.state.persons[1].age}> My Hobbies: Racing</Person>
+        <Person name={this.state.persons[2].name} age={this.state.persons[2].age}/>
       </div>
     );
+    //this is what the jsx is compile to 
+    //return React.createElement('div', {className: 'App'}, React.createElement('h1', null, 'this does work'));
   }
 }
 

react-complete-guide/src/Person/Person.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const person = (props) => {
+    return (
+        <div>
+            <p>I'm {props.name} and I am {props.age} years old!</p>
+            <p>{props.children}</p>
+        </div>
+    ) 
+}
+
+export default person;