[S6L2] React, Props, State

Question 1

Was ist ein State in React?

Answer 1

• 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

Question 2

Sind states einfach veränderbar?

Answer 2

-Ja, aber nur durch setStates

Question 3

Wie werden Stats über Components hin und hergereicht?

Answer 3

-Durch Props

Question 4

Was sind Props?

Answer 4

• 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

Question 5

Modifizieren Componentes in React ihre eigenen Props?

Answer 5

-Nein, da Functions/Classes in React pur sind tun sie das nicht.

Question 6

Wie werden Props durch Components gereicht?

Answer 6

PartenComponent

• > Reicht Props herunter
• ChiildComponents
• > Reichen Props herunter
• GrandChiildComponents

Question 7

Wie weißt man ein Object an eine Component?

Answer 7

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>

Question 8

Was ist Reusability?

Answer 8

• Eine Komponente einmal zu nutzen und oft wiederzuverwenden
• DRY-Princible einzuhalten
• Single-Responsibility-Princible, Components können eine Sache richtig gut

Question 9

Worauf muss man achten um eine Component reusable zu machen?

Answer 9

• 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

Question 10

Wie gibt man einer Component verschiedene Styles über Props?

Answer 10

//Optionale Klasse wie Props
const BaiscButton = props => {
return  Click me! 

//Styling
.red [{
background: red;
}
.blue {
background: blue;
}

//Reuse of Component

Question 11

Wie gibt man einer React Component einen DefaultProps?

Answer 11

const BaiscButton = props => {
return  Click me! 

BaisButton.defaultProps = {
ButtonStyles: ‘defaultStyles’};

.defaultStyles {
background: teal;
}

Question 12

Wie kann man einen Prop als optionalen Klassennamen für eine Component einrichten?

Answer 12

const BaiscButton = props => {
return  Click me! 

//Durch Stringinterpolation kann nun auch keine Klasse als leer übergeben sein

Question 13

Sind alles Objects und Functions in React?

Answer 13

Ja, alle Components returnedn eine Art Object

Question 14

Was ist die Props Chain?

Answer 14

• 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

Question 15

Was kann man dadurch tun, da alle Compontents Objects in React returnen?

Answer 15

-Functions benutzen um die Objects zu returnen und große Componente Bäume zu erstellen

Question 16

Was ist Prop Drilling?

Answer 16

• 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

Question 17

Was ist ein Bespiel für eine Props Chain über mehrere Components?

Answer 17

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>

Question 18

Was ist Array.map()?

Answer 18

• Eine Funktion die ein neues Array erzeugt anhand von Daten einer anderen Liste
• Immutable, es verändert die ursprüngliche Liste nicht

Question 19

Wie kann die Array.map, JSX und React zusammen genutzt werden?

Answer 19

-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

Question 20

Wie holt man mit Array.map first und lastname aus einem Array aus Objects mit Menschen?

Answer 20

const fullName = friendData.map(friend => {
  return `${friend.first_name} ${friend.last_name}`;
});

Question 21

Wie kann man mit JSX eine Liste an Objecten handeln und dynamisch divs für diese erstellen?

Answer 21

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>

Question 22

Was macht man beim Iterieren über Daten für JSX?

Answer 22

• 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