[S6L2] React, Props, State Flashcards
Was ist ein State in React?
- Daten die eine Component halten kann und an andere Components weitergeben kann.
- Wenn States updaten werden das auch die Components und machen damit die Components “Reactive”
- Sind das Herz einer Komponente
Sind states einfach veränderbar?
-Ja, aber nur durch setStates
Wie werden Stats über Components hin und hergereicht?
-Durch Props
Was sind Props?
- Jede Component kann Props erhalten
- Sind das Blut eines Systems, welches durch die Components fließt
- Functional Components erhalten Props als ein Object gepassed
- Props sind immutable, können nicht erneut zugewiesen werden, nur gelesen werden
- Können hoch oder durch evenHandlers auch heruntergebenen werden
Modifizieren Componentes in React ihre eigenen Props?
-Nein, da Functions/Classes in React pur sind tun sie das nicht.
Wie werden Props durch Components gereicht?
PartenComponent
- > Reicht Props herunter
- ChiildComponents
- > Reichen Props herunter
- GrandChiildComponents
Wie weißt man ein Object an eine Component?
const MeComponent = props => { return <div> <h1>{props.me.name}</h1> <p>age: {props.me.age}</p> <p>location: {props.me.location}</p> </div> };
const App = () => {
const myObj = name: 'Sascha', age: 25, location: 'Hamburg' };
return (
<div>
</div>
Was ist Reusability?
- Eine Komponente einmal zu nutzen und oft wiederzuverwenden
- DRY-Princible einzuhalten
- Single-Responsibility-Princible, Components können eine Sache richtig gut
Worauf muss man achten um eine Component reusable zu machen?
- Nur die Minimalanforderungen der Component planen
- Die Component nicht übertstylen
- Nicht zu tief nesten, Props sollten nicht unendlich lange durchgereicht werden
- DefaultProps nutzen wenn eine Component alleinstehend sein soll
Wie gibt man einer Component verschiedene Styles über Props?
//Optionale Klasse wie Props const BaiscButton = props => { return Click me!
//Styling .red [{ background: red; } .blue { background: blue; }
//Reuse of Component
Wie gibt man einer React Component einen DefaultProps?
const BaiscButton = props => { return Click me!
BaisButton.defaultProps = {
ButtonStyles: ‘defaultStyles’};
.defaultStyles {
background: teal;
}
Wie kann man einen Prop als optionalen Klassennamen für eine Component einrichten?
const BaiscButton = props => { return Click me!
//Durch Stringinterpolation kann nun auch keine Klasse als leer übergeben sein
Sind alles Objects und Functions in React?
Ja, alle Components returnedn eine Art Object
Was ist die Props Chain?
- Die Props Chain fließt top zu bottom durch die Components hindurch
- Dabei ist es wichtig auf die richtige Schreibweise und Nutzung der Props beim Weitergeben zu achten
Was kann man dadurch tun, da alle Compontents Objects in React returnen?
-Functions benutzen um die Objects zu returnen und große Componente Bäume zu erstellen
Was ist Prop Drilling?
- Ein Pattern bei welchem Props durch eine Chain von Componente gereicht werden
- Etwas anstrengend, da auf viel geachtet werden muss, ein Schreibfehler und die App läuft nicht
Was ist ein Bespiel für eine Props Chain über mehrere Components?
const GrandChild = props => { return <div> <h2>{props.personData.grandChildName}</h2> </div> };
const Child = props => { return <div> <h2>{props.personData.childName}</h2> < GrandChild persondata={props.personData} / > </div> };
const Parent = props => { return <div> <h1>{props.personData.parentName}</h1> < Child persondata={props.personData} / > </div> };
const App = () => {
const personData = parentName: 'Gilbert', childname: 'Relotius', grandChildName: 'Anna' };
return (
<div>
</div>
Was ist Array.map()?
- Eine Funktion die ein neues Array erzeugt anhand von Daten einer anderen Liste
- Immutable, es verändert die ursprüngliche Liste nicht
Wie kann die Array.map, JSX und React zusammen genutzt werden?
-Man kann JSX eine Map Function geben und es wird es in ein Array aus JSX Elementen wandeln, welche durch React und dann in DOM Element verwandelt werden können
Wie holt man mit Array.map first und lastname aus einem Array aus Objects mit Menschen?
const fullName = friendData.map(friend => { return `${friend.first_name} ${friend.last_name}`; });
Wie kann man mit JSX eine Liste an Objecten handeln und dynamisch divs für diese erstellen?
const friendList = [ { id: 1, first_name: "Anjanette", last_name: "Comelini" }, { id: 2, first_name: "Noe", last_name: "Griffithe" }, { id: 3, first_name: "Crichton", last_name: "Petroulis" }, ];
class App extends React.Component { constructor () { super (); this. state = { name : "Freddy", friends : friendList }; } render () { return ( < div className="App"> <h1>Hello {this.state.name}< /h1> {this. state. friends. map(friend => { return ( < div key= {friend. id}> {friend.first_name} {friend.last_name} < /div> ); })} div> ); } } </h1>
Was macht man beim Iterieren über Daten für JSX?
- Die Daten sind auf this .state vorhanden
- Man liest mit this .state.name.map die daten
- Map holt sich das relevante heraus und erzeugt einen neuen Array zurück
- Der Array is dabei ein Array aus divs, welche mit JSX zu DOM Elementen werden