A simple exercice on ReactJS

Author: Barbara Ormonde

src/App.css

@@ -1,32 +1,3 @@
 .App {
  text-align: center;
-}
-
-.App-logo {
- animation: App-logo-spin infinite 20s linear;
- height: 40vmin;
-}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
-}
-
-.App-link {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
+}

src/App.js

@@ -1,27 +1,71 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import Person from './Person/Person';
+
 
 class App extends Component {
+ //state is managed inside a component and only called on classes that extends Component. It's not a function component
+ state = {
+ persons: [
+ {name: 'BMO', age: 28},
+ {name: 'Max', age: 28},
+ {name: 'Viking', age: 9}
+ ]
+ }
+
+ switchNameHandler = (newName) => {
+ //DON'T DO THIS: this.state.persons[0].name = 'Barbara'; 
+ //this will merge with existing data
+ this.setState({persons: [
+ {name: 'Barbara', age: 28},
+ {name: newName, age: 28},
+ {name: 'Viking, the Golden Rascal', age: 9}
+ ]})
+ }
+
+ nameChangedHandler = (event) => {
+ this.setState({persons: [
+ {name: event.target.value, age: 28},
+ {name: 'Max', age: 28},
+ {name: 'Viking, the Golden Rascal', age: 9}
+ ]})
+ }
+
  render() {
+ //inline styles
+ const style = {
+ backgroundColor: 'white',
+ font: 'inherit',
+ border: '1px solid blue',
+ padding: '8px'
+ };
+
  return (
+ //este é igual ao return HTML exclusivo de baixo, mas formatado diferente
+ //return React.createElement('div', {className: 'App'}, React.createElement('h1', null, 'Does this work now?'));
  <div className="App">
- <header className="App-header">
- <img src={logo} className="App-logo" alt="logo" />
- <p>
- Edit <code>src/App.js</code> and save to reload.
- </p>
- <a
- className="App-link"
- href="https://reactjs.org"
- target="_blank"
- rel="noopener noreferrer"
- >
- Learn React
- </a>
- </header>
+ <h1>Hi, I'm a React App</h1>
+ <p> This is really working</p>
+ <button
+ style={style}
+ onClick={() => this.switchNameHandler('Maximilian!!')}>Switch Name</button>
+ <Person 
+ name={this.state.persons[0].name} 
+ age={this.state.persons[0].age}
+ changed={this.nameChangedHandler}/>
+ <Person 
+ name={this.state.persons[1].name} 
+ age={this.state.persons[1].age}
+ changed={this.nameChangedHandler}
+ click={this.switchNameHandler.bind(this, 'Max!')}>My Hobbies: Racing</Person>
+ <Person 
+ name={this.state.persons[2].name} 
+ age={this.state.persons[2].age}
+ changed={this.nameChangedHandler}
+ />
  </div>
  );
+ 
  }
 }
 

src/Person/Person.css

@@ -0,0 +1,8 @@
+.Person{
+ width: 60%;
+ margin: 16px auto;
+ border: 1px solid #eee;
+ box-shadow: 0 2px 3px #ccc;
+ padding: 16px;
+ text-align: center;
+}

src/Person/Person.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Person from './Person.css';
+
+const person = (props) => {
+ return (
+ <div className="Person">
+ <p onClick={props.click}>I'm {props.name} and I'm {props.age} years old!</p>
+ <p>{props.children}</p>
+ <input type="text" onChange={props.changed} />
+ </div>
+ )
+};
+
+export default person;

src/index.css

@@ -1,14 +1,6 @@
 body {
  margin: 0;
  padding: 0;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
- "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+ font-family: sans-serif;
 }
 
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
- monospace;
-}