ES6 Syntax als React Vorbereitung

[p-runge]

Um React zu benutzen (aber auch generell) ist es hilfreich die gängigsten Features aus ES6 zu kennen. ES6 steht für ESMAScript 6, was quasi als JavaScript v2.0 zu verstehen ist (JavaScript v1 war noch sehr rudimentär).

Viele ES6 Features kennst du schon: const und let, Promises, die For-of-Schleife, ... Folgende Features sind aber gerade in der Verwendung von React gut zu wissen.

Object Destructuring

Wenn man an eine oder mehrere Props eines Objekt kommen möchte, kann man es entweder so schreiben:

const person = {
  firstName: "John",
  lastName: "Doe",
  age: "42"
};

const firstName = person.firstName;
const lastName = person.lastName;

console.log(firstName, lastName); // "John Doe"

oder man benutzt Object Desctructuring:

const person = {
  firstName: "John",
  lastName: "Doe",
  age: "42"
};

const { firstName, lastName } = person;

console.log(firstName, lastName); // "John Doe"

Man spart sich hier also, wie auch bei den Array Functions, wieder eine Menge Tipparbeit, und spart sich sogar die Benennung einzelner Props.

Du kennst diese Schreibweise sogar schon, und zwar von Imports. Genau so funktioniert das aber auch bei Objekten.

Und wenn man genau drauf achtet, merkt man auch, dass in Komponenten das Parameter auch ein Objekt ist. Also ja, man kann sogar in Funktionsheadern die Parameter destructen.

Aufgabe

• [x] Destructe die Props all deiner Komponenten

Defaultwerte für Parameter

Optionale Parameter einer Funktion können mit einem Defaultwert versehen werden. Bedeutet also, wenn das Parameter nicht mitgegeben wird (oder undefined als Wert übergeben wird), das Parameter stattdessen den Defaulwert erhält. Wenn das Parameter allerdings mitgegeben wird, wird natürlich auch der entsprechende Wert benutzt.

In diesem Beispiel kann man also einer Funktion renderUserProfile u.A. ein Parameter profilePictureSrc mitgeben.

function renderUserProfile(username string, profilePictureSrc = "https://domain.com/my-default-profile-picture.png") {
  // render profile picture
}

renderUserProfile("some-user", "custom-picture.jpg"); // profilePictureSrc = "custom-picture.jpg"
renderUserProfile("other-user"); // profilePictureSrc = "https://domain.com/my-default-profile-picture.png"

Genau so funktioniert das Übrigens auch für Props eines Objekts:

function UserProfile({ username string, profilePictureSrc = "https://domain.com/my-default-profile-picture.png" }) {
  // render profile picture
}

UserProfile({
  username: "some-user",
  profilePictureSrc: "custom-picture.jpg",
); // props.profilePictureSrc = "custom-picture.jpg"
UserProfile({
  username: "other-user",
); // props.profilePictureSrc = "https://domain.com/my-default-profile-picture.png"

Aufgabe

• [x] Definiere in deiner Button Komponente einen Defaultwert für dein Label (z.B. "Click me!" o.Ä.), und teste, ob der Wert entsprechend angezeigt wird, wenn du kein label übergibst.

Object Property Value Shorthan

Manchmal hat man Situationen, in denen man, bevor man ein Objekt erstellt, einzelne Props des Objekts bereits in Variablen gespeichert hat, sodass die Belegung des Objekts selbst dann so aussehen könnte:

const firstName = "John";
const age = 42;

const person = {
  firstName: firstName,
  lastName: "Doe",
  age: age,
};

Wenn du Variable nun genau so heißt wie die Prop des Objekts (so wie hier also firstName und age), kann man stattdessen eine Kurzschreibweise benutzen:

const firstName = "John";
const age = 42;

const person = {
  firstName,
  lastName: "Doe",
  age,
};

Hinweis: Dies funktioniert nur bei Objekt-Props, und nicht z.B. bei der Definition von Variablen.

Aufgabe

• [x] Nix :) Einfach nächstes Mal benutzen, wenn du siehst, dass es anwendbar ist.

Spread Operator

Bei Array kann es manchmal sein, dass man mehrere Array zusammentun möchte. Man könnte dafür zwar über das 2. Array drüberschleifen und jedes Element einzeln in das 1. Array pushen, aber das wäre etwas umständlich. Stattdessen gibt es den Spread Operator, mit dem man ein Array quasi "aufspreizen" kann. Das würde dann so aussehen:

const array1 = [4, 5, 6];
const array2 = [1, 2, 3];

const newArray = [
  ...array1,
  ...array2,
];

console.log(newArray); // [4, 5, 6, 1, 2, 3];

Etwas interessanter wird das Ganze, wenn man merkt, dass es auch Funktionen gibt, die eine dynamische Anzahl an Parametern erwarten, wie z.B. console.log().

const names = ["Peter", "Hans", "Werner", "Helmut"];

console.log(...names); // "Peter Hans Werner Helmut"