[S6L3] React State, Class, Handler

Question 1

Was sind React Class Components?

Answer 1

• Eine Erweiterung der Base React Class aus der react Library
• Bietet mehr Funktionialitäten (React API, Lifecycle)
• Render Function ist sehr wichtig
• Class Component können States halten

Question 2

Wie definiert man eine Class Component?

Answer 2

class App extends React.Component {
//render instead of JSX Code
render () {
return (
<div>
<h1>Hello World h1>
</h1></div>
);
}
}

Question 3

Was ist ein State?

Answer 3

• Componen Level Storage Object, das Daten halten kann auf die Components zugreifen können
• States sollten vor der Constructor Function definiert sein
• Man kann states readen, updaten und deleten
• Wenn states updaten wird render() erneut gecallt
• States können als Props durch Components gereicht werden
• Wenn ein State sich ändert, ändert sich auch das Props
• States machen Components erst “Reactive”

Question 4

Wie sieht eine Class Component mit einem State aus?

Answer 4

class App extends React.Component {
constructor () {
super ();
this .state ={
 name: "Sascha"
};
}

render () {
return (
<div>
    <h1>{this.state.name} h1>
    <h2>Welcome h2>
</h2></h1></div>
);
}
}

Question 5

Welche Eselsbrücke gibt es bei Class Components zu in React zu merken?

Answer 5

• CCR
• Declare your CLASS
• Declare your CONSTRUCTOR
• Dont Forget to call RENDER

Question 6

Was kann in React als Alternative zu class App extends React.Component genutzt werden?

Answer 6

-import React, { Components } from ‘react’;

Question 7

Was sind States?

Answer 7

• Das Herz einer jeden React Anwendung
• Die Daten wir man hat wenn man diese braucht
• Können im Constructor gespeichert sein
• Ist ein Object auf das mit dem this Keyword zugegriffen werden kann
• Solange es die gemountete Component gibt, gibt es auch den State
• States sind mutable (read, update, delete)
• Können mit setState Methode verändert werden
• Wenn der State sich ändert wird render Function gecalled

Question 8

Wie kann man dynamisch states durch UserInput updaten?

Answer 8

class App extends React. Component {
  constructor () {
    super ();
    this. state = {
      message: "",
      name: "Sascha",
      age: 25,
      location: "Hamburg"
    };
  }
  handleChange Function = event  => {
    this.setState({ message: event.target.value });
  };

render () {
return (
div className=”Ap
Message propsMessage={this. state.message}
Name propsName={this. state.name}
Age propsAge={this. state.age}
Location propsLocation={this. state.location}
input onChange={this. handleChangeFunction}
/div
);
}
}

Question 9

Was ist ein DOM Event?

Answer 9

• Immer wenn ein User mit einem DOM Element interagiert
• Klick, MouseEnter, Inout, DoubeClick, Scroll etc
• Events feuern im Browser Window und sind zu bestimmten beinhalteten DOM Element gebunden

Question 10

Wie sieht ein plain Vanilla Javascript Event aus?

Answer 10

cont btn = document. querySelector(‘buttin’);

function  bgChange() {
const  rndCol = 'rgb(' + random(255) + ',' + random(255) + ','  + random(255) + ')';
document. body.style.backgroundColor = rndcol;

btn.onclick = bgChange;

Question 11

Was ist der Unterschied von Events in plain vanilla JavaScript und React?

Answer 11

• Das Event wird in ein synthetisches Event Object gewrapped
• Objects werden gepooled, können also von vielen anderen Typen von DOM Elementen und deren Events genutzt werden
• Bessere Performance
• Events sind sehr custom, können selber definiert werden und sind nicht durch Browser oder React bestimmt

Question 12

Wie sieht ein Event in React aus?

Answer 12

//Will log null because even was resused in syntheticEvent pool
function handleClick (event)  {
setTimeout(function() {
console.log(event. target.name);
}, 1000);
}

//Even Property die interessant ist muss in eigenem binding gespeichert werden
function handleClick (event)  {
let name = event .target.name;
setTimeout(function () {
console.log(name);
}, 1000);
}

Question 13

Wie werden Events in React in Components handelt?

Answer 13

class App extends React.Component {
  constructor() {
    super ();
    this. state = {
      message: ""
    };
  }

handleSingleClickEvent = () => alert(“Single Click Event Triggered”);

handleDoubleClickEvent = () => alert(“Double Click Event Triggered”);

handleMouseEnterEvent = () => alert(“Mouse Enter Event Triggered”);

handleMouseLeaveEvent = () => alert(“Mouse Leave Event Triggered”);

handleInputChange = event => {
console .log(event. target.value);
this. setState({ message: event. target.value });
};

render() {
return (
div className=”App”>
<h1>{this. state.message}</h1>
button onClick={this. handleSingleClickEvent}>
Single Click Handler
button
button onDoubleClick={this. handleDoubleClickEvent}>
Double Click Handler
button>
button>Double Click Handler button
div onMouseEnter={this. handleMouseEnterEvent}>Mouse Enter div>
div onMouseLeave={this. handleMouseLeaveEvent}>Mouse Leave div>
input
onChange={this. handleInputChange}
type=”text”
placeholder=”Change me”
/>
div>
);
}
}

Question 14

Was passiert wenn man eine Class Component von React.Component erben lässt und wie tut man es?

Answer 14

import React, { Component } from 'react';
oder
class Student extends React.Component

-Props wird als Klassenatttribut der Class Componente hinzugefügt
-Die Props sind dann mit dem this Keyword erreichbar
(this .pops

Question 15

Braucht eine Class Component einen Constructor wenn man keinen State nutzen möchte?

Answer 15

Nein!