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

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

@ -4,9 +4,11 @@ import './Person.css';
const person = (props) => { const person = (props) => {
return ( return (
<div className="Person"> <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> <p>{props.children}</p>
<input type="text" onChange={props.changed} defaultValue={props.name} /> <input type="text" onChange={props.changed} defaultValue={props.name} />
<button onClick={props.click}>delete</button>
{console.log('props:', props)}
</div> </div>
) )
}; };

Write Preview
Loading…
Cancel
Save