yutsuo
/
udemy-react
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

lists

master
Yutsuo 6 years ago
parent
bdcb65f598
commit
5aa1c36b02
2 changed files with 101 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 176
      02/src/App.js
  2. 4
      02/src/Person/Person.js

176
02/src/App.js
Unescape View File

@ -3,67 +3,66 @@ import './App.css';
import Person from './Person/Person';
/* // ## Functional code generated by creat-react-app ##
// function App() {
// return (
// <div className="App">
// <h1>Hi, I'm a React App, I'm cute.</h1>
// <p>Created using Functional code</p>
// <button>Switch Name</button>
// <Person name="Yutsuo" ilvl="320"> Main Character </Person>
// <Person name="Schwarzgeist" ilvl="200"/>
// <Person name="Murom" ilvl="78"/>
// </div>
// );
// // return React.createElement('div', {className: 'App'}, React.createElement('h1', null, `Oh Hay I'm a React App!!!`));
// }
/*// ## Functional code generated by creat-react-app ##
function App() {
return (
<div className="App">
<h1>Hi, I'm a React App, I'm cute.</h1>
<p>Created using Functional code</p>
<button>Switch Name</button>
<Person name="Yutsuo" ilvl="320"> Main Character </Person>
<Person name="Schwarzgeist" ilvl="200"/>
<Person name="Murom" ilvl="78"/>
</div>
);
}
*/
/* // ## Functional code created using ES6 (React Hooks) ##
// const App = props => {
// const [charState, setCharState] = React.useState({
// character: [
// { name: 'Yutsuo', ilvl: 320 },
// { name: 'Schwarz', ilvl: 110 },
// { name: 'Murom', ilvl: 78 }
// ]
// // somethingElse: 'something something'
// });
// const [somethingElseState, setSomethingElseState] = React.useState('yadda yadda yadda');
// console.log(charState, somethingElseState);
// const switchNameHandler = () => {
// // console.log('\"CLICK\"');
// // DON'T DO THIS: this.state.character[1].name = 'Schwarzgeist';
// // Do not mutate state directly. Use setState() react/no-direct-mutation-state
// setCharState({
// character: [
// { name: 'Yutsuo', ilvl: 320 },
// { name: 'Schwarzgeist', ilvl: 110 },
// { name: 'Murom', ilvl: 79 }
// ],
// somethingElse: charState.somethingElse
// });
// };
// return (
// <div className="App">
// <h1>Hi, I'm a React App, I'm cute.</h1>
// <p>Created using ES6 Functional code</p>
// <button onClick={switchNameHandler}>Switch Char</button>
// <Person name={charState.character[0].name} ilvl={charState.character[0].ilvl} />
// <Person name={charState.character[1].name} ilvl={charState.character[1].ilvl} />
// <Person name={charState.character[2].name} ilvl={charState.character[2].ilvl} />
// <br />
// <Person name="Yutsuo" ilvl="320"> Main Character </Person>
// <Person name="Schwarzgeist" ilvl="200"/>
// <Person name="Murom" ilvl="78"/>
// </div>
// );
// // return React.createElement('div', {className: 'App'}, React.createElement('h1', null, `Oh Hay I'm a React App!!!`));
// }
/*// ## Functional code created using ES6 (React Hooks) ##
const App = props => {
const [charState, setCharState] = React.useState({
character: [
{ name: 'Yutsuo', ilvl: 320 },
{ name: 'Schwarz', ilvl: 110 },
{ name: 'Murom', ilvl: 78 }
]
// somethingElse: 'something something'
});
const [somethingElseState, setSomethingElseState] = React.useState('yadda yadda yadda');
console.log(charState, somethingElseState);
const switchNameHandler = () => {
// console.log('\"CLICK\"');
// DON'T DO THIS: this.state.character[1].name = 'Schwarzgeist';
// Do not mutate state directly. Use setState() react/no-direct-mutation-state
setCharState({
character: [
{ name: 'Yutsuo', ilvl: 320 },
{ name: 'Schwarzgeist', ilvl: 110 },
{ name: 'Murom', ilvl: 79 }
],
somethingElse: charState.somethingElse
});
};
return (
<div className="App">
<h1>Hi, I'm a React App, I'm cute.</h1>
<p>Created using ES6 Functional code</p>
<button onClick={switchNameHandler}>Switch Char</button>
<Person name={charState.character[0].name} ilvl={charState.character[0].ilvl} />
<Person name={charState.character[1].name} ilvl={charState.character[1].ilvl} />
<Person name={charState.character[2].name} ilvl={charState.character[2].ilvl} />
<br />
<Person name="Yutsuo" ilvl="320"> Main Character </Person>
<Person name="Schwarzgeist" ilvl="200"/>
<Person name="Murom" ilvl="78"/>
</div>
);
// return React.createElement('div', {className: 'App'}, React.createElement('h1', null, `Oh Hay I'm a React App!!!`));
}
*/
/* // ## What's behind each JSX tag ##
@ -74,39 +73,53 @@ import Person from './Person/Person';
// ## OOP code ##
class App extends React.Component {
// The state should be IMMUTABLE, do not directly change it
state = {
character: [
{ name: 'char1', ilvl: 0 },
{ name: 'char2', ilvl: 0 },
{ name: 'char3', ilvl: 0 }
{ id: 1, name: 'char1', ilvl: '100' },
{ id: 2, name: 'char2', ilvl: '110' },
{ id: 3, name: 'char3', ilvl: '120' }
],
somethingElse: 'something something',
showOrHide: false
}
deleteCharacterHandler = (index) => {
// const characters = this.state.character.slice();
const characters = [...this.state.character];
characters.splice(index, 1);
this.setState({characters: characters});
const characterCopy = [...this.state.character]; //<- it's a copy so you don't change the state, but a copy of it
// const characters = this.state.character.slice(); //<- this works, too, but use spread [...] instead
characterCopy.splice(index, 1); // <- deletes the item from the copy of the state.character object
console.log('deleted character: ', this.state.character[index]);
this.setState({character: characterCopy}); //<- state alterations should be made by this function alone (setState())
}
nameChangedHandler = (event) => {
this.setState({
character: [
{ name: 'Yutsuo', ilvl: 320 },
{ name: event.target.value, ilvl: 110 },
{ name: 'Murom', ilvl: 79 }
]
})
nameChangedHandler = (event, id) => {
// find the index during input event
const charIndex = this.state.character.findIndex(c => {return c.id === id});
// copy the state item to manipulate it, state can't be directly changed.
const char = { ...this.state.character[charIndex] };
// get the input event to change name
char.name = event.target.value;
// make a copy of the whole characters array prepare the changes there
const characters = [...this.state.character];
characters[charIndex] = char;
// change the state
this.setState( {character:characters} );
}
showOrHide = () => {
const doesShow = this.state.showOrHide
// showOrHide was set to start false, but here when changing state it will
// become the opposite. So if it's true it will be false and vice-versa
this.setState({showOrHide: !doesShow})
}
render() {
//inline CSS directives
const style = {
backgroundColor: 'white',
font: 'inherit',
@ -122,7 +135,14 @@ deleteCharacterHandler = (index) => {
persons = (
<div>
{this.state.character.map((char, index) => {
return <Person click={this.deleteCharacterHandler.bind(index)} name={char.name} age={char.ilvl} />
return (
<Person
click={() => this.deleteCharacterHandler(index)}
name={char.name}
ilvl={char.ilvl}
key={char.id}
changed={(event) => this.nameChangedHandler(event, char.id)}
/>)
})}
</div>
)
@ -133,9 +153,9 @@ deleteCharacterHandler = (index) => {
<h1>Hi, I'm a React App, I'm cute.</h1>
<p>Created using OOP code</p>
<button
style={style}
onClick={() => this.switchNameHandler()}>
Switch Char
style={style} // <- putting in the CSS directives set above
onClick={() => console.log('\"CLICK\"')} >
Click Me
</button>
<button
style={style}

4
02/src/Person/Person.js
Unescape View File

@ -4,9 +4,11 @@ import './Person.css';
const person = (props) => {
return (
<div className="Person">
<p onClick={props.click}>I'm a {props.name} and my ilvl is {props.ilvl} and ready to raid!</p>
<p>I'm {props.name} and my ilvl is {props.ilvl} and ready to raid!</p>
<p>{props.children}</p>
<input type="text" onChange={props.changed} defaultValue={props.name} />
<button onClick={props.click}>delete</button>
{console.log('props:', props)}
</div>
)
};

Write Preview
Loading…
Cancel
Save