Heutzutage ist React eine der beliebtesten JavaScript-Bibliotheken. Mit ihr lassen sich dynamische und reaktionsschnelle Anwendungen erstellen, sie ermöglicht eine bessere Leistung und kann leicht erweitert werden. Die zugrundeliegende Logik basiert auf Komponenten, die in verschiedenen Kontexten wiederverwendet werden können, sodass derselbe Code nicht mehrmals geschrieben werden muss. Kurz gesagt, mit React kannst du effiziente und leistungsstarke Anwendungen erstellen.
Es gab also noch nie einen besseren Zeitpunkt, um zu lernen, wie man React-Anwendungen erstellt.
Ohne ein solides Verständnis einiger wichtiger JavaScript-Funktionen kann das Erstellen von React-Anwendungen jedoch schwierig oder sogar unmöglich sein.
Deshalb haben wir eine Liste mit JavaScript-Funktionen und Konzepten zusammengestellt, die du kennen musst, bevor du mit React anfängst. Je besser du diese Konzepte verstehst, desto einfacher wird es für dich sein, professionelle React-Anwendungen zu erstellen.
Deshalb werden wir in diesem Artikel auf die folgenden Punkte eingehen:
JavaScript und ECMAScript
JavaScript ist eine beliebte Skriptsprache, die zusammen mit HTML und CSS verwendet wird, um dynamische Webseiten zu erstellen. Während HTML für die Struktur einer Webseite und CSS für den Stil und das Layout der Elemente verwendet wird, ist JavaScript die Sprache, mit der das Verhalten der Seite hinzugefügt wird, d. h. die Funktionalität und Interaktivität.
Inzwischen wurde die Sprache von den großen Browsern übernommen und es wurde ein Dokument geschrieben, das die Funktionsweise von JavaScript beschreibt: der ECMAScript-Standard.
Seit 2015 wird der ECMAScript-Standard jährlich aktualisiert, so dass jedes Jahr neue Funktionen zu JavaScript hinzugefügt werden.
ECMAScript 2015 war die sechste Version des Standards und wird daher auch als ES6 bezeichnet. Die folgenden Versionen werden fortlaufend gekennzeichnet, so dass wir ECMAScript 2016 als ES7, ECMAScript 2017 als ES8 und so weiter bezeichnen.
Da dem Standard immer wieder neue Funktionen hinzugefügt werden, kann es sein, dass einige nicht von allen Browsern unterstützt werden. Wie kannst du also sicherstellen, dass die neuesten JavaScript-Funktionen, die du zu deiner JS-App hinzugefügt hast, in allen Browsern wie erwartet funktionieren?
Du hast drei Möglichkeiten:
- Warte, bis alle wichtigen Browser die neuen Funktionen unterstützen. Aber wenn du die neue JS-Funktion unbedingt für deine App brauchst, ist das keine Option.
- Verwende ein Polyfill, d.h. „ein Stück Code (normalerweise JavaScript im Web), das verwendet wird, um moderne Funktionen in älteren Browsern bereitzustellen, die sie nicht von Haus aus unterstützen“ (siehe auch mdn web docs).
- Verwende einen JavaScript-Transpiler wie Babel oder Traceur, der ECMAScript 2015+ Code in eine JavaScript-Version umwandelt, die von allen Browsern unterstützt wird.
Anweisungen vs. Ausdrücke
Den Unterschied zwischen Anweisungen und Ausdrücken zu verstehen, ist wichtig, wenn du React-Anwendungen entwickelst. Kehren wir also kurz zu den grundlegenden Konzepten der Programmierung zurück.
Ein Computerprogramm ist eine Liste von Anweisungen, die von einem Computer ausgeführt werden sollen. Diese Instruktionen werden (Rechen-)Anweisungen genannt.
Im Gegensatz zu Anweisungen sind Ausdrücke Fragmente von Code, die einen Wert erzeugen. In einer Anweisung ist ein Ausdruck ein Teil, der einen Wert zurückgibt, und wir sehen ihn normalerweise auf der rechten Seite eines Gleichheitszeichens.
Dagegen:
JavaScript-Anweisungen können Blöcke oder Codezeilen sein, die in der Regel mit Semikolons enden oder in geschweifte Klammern eingeschlossen sind.
Hier ist ein einfaches Beispiel für eine Anweisung in JavaScript:
document.getElementById("hello").innerHTML = "Hello World!";Die obige Anweisung schreibt "Hello World!" in ein DOM-Element mit id="hello".
Wie wir bereits erwähnt haben, erzeugen Ausdrücke einen Wert oder sind selbst ein Wert. Betrachte das folgende Beispiel:
msg = document.getElementById("hello").value;document.getElementById("hello").value ist en Ausdruck, da er einen Wert liefert.
Ein weiteres Beispiel soll helfen, den Unterschied zwischen Ausdrücken und Anweisungen zu verdeutlichen:
const msg = "Hello World!";
function sayHello( msg ) {
console.log( msg );
}Im obigen Beispiel,
- ist die erste Zeile eine Anweisung, wobei
"Hello World!"ein Ausdruck ist, - die Funktionsdeklaration ist eine Anweisung, bei der der Parameter
msg, der an die Funktion übergeben wird, ein Ausdruck ist, - die Zeile, in der die Meldung auf der Konsole ausgegeben wird, ist eine Anweisung, bei der der Parameter
msgebenfalls ein Ausdruck ist.
Warum Ausdrücke in React wichtig sind
Wenn du eine React-Anwendung erstellst, kannst du JavaScript-Ausdrücke in deinen JSX-Code einbauen. Du kannst zum Beispiel eine Variable übergeben, einen Event-Handler oder eine Bedingung schreiben. Dazu musst du deinen JS-Code in geschweifte Klammern einschließen.
Du kannst zum Beispiel eine Variable übergeben:
const Message = () => {
const name = "Carlo";
return <p>Welcome {name}!</p>;
}Kurz gesagt, die geschweiften Klammern sagen deinem Transpiler, dass er den in Klammern eingeschlossenen Code als JS-Code verarbeiten soll. Alles, was vor dem öffnenden <p> -Tag und nach dem schließenden </p> -Tag steht, ist normaler JavaScript-Code. Alles, was sich innerhalb der öffnenden <p> und schließenden </p> Tags befindet, wird als JSX-Code verarbeitet.
Hier ist ein weiteres Beispiel:
const Message = () => {
const name = "Ann";
const heading = <h3>Welcome {name}</h3>;
return (
<div>
{heading}
<p>This is your dashboard.</p>
</div>
);
}Du kannst auch ein Objekt übergeben:
render(){
const person = {
name: 'Carlo',
avatar: 'https://en.gravatar.com/userimage/954861/fc68a728946aac04f8531c3a8742ac22',
description: 'Content Writer'
}
return (
<div>
<h2>Welcome {person.name}</h2>
<img
className="card"
src={person.avatar}
alt={person.name}
/>
<p>Description: {person.description}.</p>
</div>
);
}Und unten ist ein ausführlicheres Beispiel:
render(){
const person = {
name: 'Carlo',
avatar: 'https://en.gravatar.com/userimage/954861/fc68a728946aac04f8531c3a8742ac22?size=original',
description: 'Content Writer',
theme: {
boxShadow: '0 4px 8px 0 rgba(0,0,0,0.2)', width: '200px'
}
}
return (
<div style={person.theme}>
<img
src={person.avatar}
alt={person.name}
style={ { width: '100%' } }
/>
<div style={ { padding: '2px 16px' } }>
<h3>{person.name}</h3>
<p>{person.description}.</p>
</div>
</div>
);
}Beachte die doppelten geschweiften Klammern in den style Attributen in den Elementen img und div. Wir haben doppelte Klammern verwendet, um zwei Objekte zu übergeben, die Karten- und Bildstile enthalten.
Du hast sicher bemerkt, dass wir in allen obigen Beispielen JavaScript-Ausdrücke in JSX eingebaut haben.
Unveränderlichkeit in React
Mutabilität und Unveränderlichkeit sind zwei Schlüsselkonzepte in der objektorientierten und funktionalen Programmierung.
Unveränderlichkeit bedeutet, dass ein Wert nicht geändert werden kann, nachdem er erstellt wurde. Mutabilität bedeutet natürlich das Gegenteil.
In Javascript sind primitive Werte unveränderlich, d. h., sobald ein primitiver Wert erstellt wurde, kann er nicht mehr geändert werden. Im Gegensatz dazu sind Arrays und Objekte veränderbar, weil ihre Eigenschaften und Elemente geändert werden können, ohne dass ein neuer Wert zugewiesen wird.
Es gibt mehrere Gründe für die Verwendung unveränderlicher Objekte in JavaScript:
- Verbesserte Leistung
- Geringerer Speicherverbrauch
- Thread-Safety
- Einfachere Kodierung und Fehlersuche
Nach dem Muster der Unveränderlichkeit kann eine Variable oder ein Objekt, sobald sie/es zugewiesen wurde, nicht mehr neu zugewiesen oder geändert werden. Wenn du Daten ändern musst, solltest du eine Kopie davon erstellen und ihren Inhalt ändern, während der ursprüngliche Inhalt unverändert bleibt.
Unveränderlichkeit ist auch ein Schlüsselkonzept in React.
In der React-Dokumentation steht:
Der Zustand einer Klassenkomponente ist als
this.stateverfügbar. Das Zustandsfeld muss ein Objekt sein. Verändere den Zustand nicht direkt. Wenn du den Zustand ändern willst, rufesetStatemit dem neuen Zustand auf.
Immer, wenn sich der Zustand einer Komponente ändert, berechnet React, ob die Komponente neu gerendert und das virtuelle DOM aktualisiert werden muss. Wenn React den vorherigen Zustand nicht kennt, kann es nicht entscheiden, ob die Komponente neu gerendert werden soll oder nicht. In der React-Dokumentation findest du ein hervorragendes Beispiel dafür.
Welche JavaScript-Funktionen können wir nutzen, um die Unveränderlichkeit des Zustandsobjekts in React zu garantieren? Lasst es uns herausfinden!
Variablen deklarieren
Du hast drei Möglichkeiten, eine Variable in JavaScript zu deklarieren: var, let, und const.
Die Anweisungvar gibt es seit den Anfängen von JavaScript. Sie wird verwendet, um eine funktionsgebundene oder global gebundene Variable zu deklarieren und sie optional mit einem Wert zu initialisieren.
Wenn du eine Variable mit var deklarierst, kannst du die Variable sowohl im globalen als auch im lokalen Bereich neu deklarieren und aktualisieren. Der folgende Code ist zulässig:
// Declare a variable
var msg = "Hello!";
// Redeclare the same variable
var msg = "Goodbye!"
// Update the variable
msg = "Hello again!"var Deklarationen werden verarbeitet, bevor irgendein Code ausgeführt wird. Wenn du also eine Variable an einer beliebigen Stelle im Code deklarierst, ist das gleichbedeutend damit, dass du sie ganz oben deklarierst. Dieses Verhalten wird als „Hoisting“ bezeichnet.
Es ist zu beachten, dass nur die Variablendeklaration gehostet wird, nicht aber die Initialisierung, die erst erfolgt, wenn der Kontrollfluss die Zuweisungsanweisung erreicht. Bis zu diesem Zeitpunkt ist die Variable undefined:
console.log(msg); // undefined
var msg = "Hello!";
console.log(msg); // Hello!Der Geltungsbereich einer var, die in einer JS-Funktion deklariert wurde, ist der gesamte Körper dieser Funktion.
Das bedeutet, dass die Variable nicht auf Blockebene definiert ist, sondern auf der Ebene der gesamten Funktion. Das führt zu einer Reihe von Problemen, die deinen JavaScript-Code fehlerhaft und schwer zu warten machen können.
Um diese Probleme zu lösen, wurde in ES6 das Schlüsselwortlet eingeführt.
Die Deklaration
letdeklariert eine lokale Variable mit Block-Scoping und initialisiert sie optional mit einem Wert.
Was sind die Vorteile von let gegenüber var? Hier sind einige:
letdeklariert eine Variable für den Umfang einer Blockanweisung, währendvareine Variable global oder lokal für eine ganze Funktion deklariert, unabhängig vom Blockbereich.- Globale
letVariablen sind keine Eigenschaften deswindowObjekts. Du kannst nicht mitwindow.variableNameauf sie zugreifen. - Auf
letkann erst zugegriffen werden, wenn ihre Deklaration erreicht ist. Die Variable wird erst dann initialisiert, wenn der Kontrollfluss die Codezeile erreicht, in der sie deklariert wurde (let-Deklarationen sind non-hoisted). - Das erneute Deklarieren einer Variable mit
letlöst einenSyntaxErroraus.
Da Variablen, die mit var deklariert wurden, nicht block-scoped werden können, kann auf eine Variable, die mit var in einer Schleife oder innerhalb einer if Anweisung definiert wurde, von außerhalb des Blocks zugegriffen werden, was zu fehlerhaftem Code führen kann.
Der Code im ersten Beispiel wird ohne Fehler ausgeführt. Ersetze nun var durch let in dem oben gezeigten Codeblock:
console.log(msg);
let msg = "Hello!";
console.log(msg);Im zweiten Beispiel ergibt die Verwendung von let anstelle von var ein Uncaught ReferenceError:
ES6 führt außerdem ein drittes Schlüsselwort ein: const.
const ist let sehr ähnlich, allerdings mit einem entscheidenden Unterschied:
Betrachte das folgende Beispiel:
const MAX_VALUE = 1000;
MAX_VALUE = 2000;Der obige Code würde den folgenden TypeError erzeugen:
Darüber hinaus:
Wenn du ein const deklarierst, ohne ihm einen Wert zu geben, würde das folgende SyntaxError auslösen (siehe auch ES6 In Depth: let und const):
Handelt es sich bei einer Konstante jedoch um ein Array oder ein Objekt, kannst du Eigenschaften oder Elemente innerhalb dieses Arrays oder Objekts bearbeiten.
Du kannst zum Beispiel Array-Elemente ändern, hinzufügen oder entfernen:
// Declare a constant array
const cities = ["London", "New York", "Sydney"];
// Change an item
cities[0] = "Madrid";
// Add an item
cities.push("Paris");
// Remove an item
cities.pop();
console.log(cities);
// Array(3)
// 0: "Madrid"
// 1: "New York"
// 2: "Sydney"Aber du darfst das Array nicht neu zuordnen:
const cities = ["London", "New York", "Sydney"];
cities = ["Athens", "Barcelona", "Naples"];Der obige Code würde zu einem TypeError führen.
Du kannst Objekteigenschaften und Methoden hinzufügen, neu zuweisen und entfernen:
// Declare a constant obj
const post = {
id: 1,
name: 'JavaScript is awesome',
excerpt: 'JavaScript is an awesome scripting language',
content: 'JavaScript is a scripting language that enables you to create dynamically updating content.'
};
// add a new property
post.slug = "javascript-is-awesome";
// Reassign property
post.id = 5;
// Delete a property
delete post.excerpt;
console.log(post);
// {id: 5, name: 'JavaScript is awesome', content: 'JavaScript is a scripting language that enables you to create dynamically updating content.', slug: 'javascript-is-awesome'}Aber du darfst das Objekt selbst nicht neu zuweisen. Der folgende Code würde zu einem Uncaught TypeError führen:
// Declare a constant obj
const post = {
id: 1,
name: 'JavaScript is awesome',
excerpt: 'JavaScript is an awesome scripting language'
};
post = {
id: 1,
name: 'React is powerful',
excerpt: 'React lets you build user interfaces'
};Object.freeze()
Wir sind uns jetzt einig, dass die Verwendung von const nicht immer eine starke Unveränderlichkeit garantiert (vor allem bei der Arbeit mit Objekten und Arrays). Wie kannst du also das Unveränderlichkeitsmuster in deinen React-Anwendungen umsetzen?
Wenn du erstens verhindern willst, dass die Elemente eines Arrays oder die Eigenschaften eines Objekts geändert werden, kannst du die statische Methode Object.freeze() verwenden.
Das Einfrieren eines Objekts verhindert Erweiterungen und macht bestehende Eigenschaften nicht beschreibbar und nicht konfigurierbar. Ein eingefrorenes Objekt kann nicht mehr geändert werden: Neue Eigenschaften können nicht hinzugefügt, vorhandene Eigenschaften nicht entfernt, ihre Aufzählbarkeit, Konfigurierbarkeit, Beschreibbarkeit oder ihr Wert nicht geändert und der Prototyp des Objekts kann nicht neu zugewiesen werden.
freeze()gibt das gleiche Objekt zurück, das übergeben wurde.
Jeder Versuch, eine Eigenschaft hinzuzufügen, zu ändern oder zu entfernen, schlägt fehl, entweder stillschweigend oder durch das Auslösen eines TypeError, meist im Strict-Modus.
Du kannst Object.freeze() auf diese Weise verwenden:
'use strict'
// Declare a constant obj
const post = {
id: 1,
name: 'JavaScript is awesome',
excerpt: 'JavaScript is an awesome scripting language'
};
// Freeze the object
Object.freeze(post);Wenn du jetzt versuchst, eine Eigenschaft hinzuzufügen, erhältst du einen Uncaught TypeError:
// Add a new property
post.slug = "javascript-is-awesome"; // Uncaught TypeError
Wenn du versuchst, eine Eigenschaft neu zuzuweisen, erhältst du eine andere Art von TypeError:
// Reassign property
post.id = 5; // Uncaught TypeError
Du kannst auch versuchen, eine Eigenschaft zu löschen. Das Ergebnis wird eine andere TypeError sein:
// Delete a property
delete post.excerpt; // Uncaught TypeError
Template Literals
Wenn du Zeichenketten mit der Ausgabe von Ausdrücken in JavaScript kombinieren musst, verwendest du normalerweise den Additionsoperator +. Du kannst aber auch eine JavaScript-Funktion nutzen, mit der du Ausdrücke in Zeichenketten einfügen kannst, ohne den Additionsoperator zu verwenden: Template Literals.
Template Literals sind eine besondere Art von Strings, die mit Backtick-Zeichen (`) begrenzt sind.
In Template Literals kannst du Platzhalter einfügen, die eingebettete Ausdrücke sind, die durch ein Dollarzeichen begrenzt und in geschweifte Klammern eingeschlossen sind.
Hier ist ein Beispiel:
const align = 'left';
console.log(`This string is ${ align }-aligned`);Die Strings und Platzhalter werden an eine Standardfunktion übergeben, die eine String-Interpolation durchführt, um die Platzhalter zu ersetzen und die Teile zu einem einzigen String zu verketten. Du kannst die Standardfunktion auch durch eine eigene Funktion ersetzen.
Du kannst Template Literals verwenden für:
Mehrzeilige Zeichenketten: Zeilenumbrüche sind Teil des Template Literal.
console.log(`Twinkle, twinkle, little bat!
How I wonder what you’re at!`);String-Interpolation: Ohne Template Literals kannst du nur den Additionsoperator verwenden, um die Ausgabe von Ausdrücken mit Zeichenketten zu kombinieren. Siehe das folgende Beispiel:
const a = 3;
const b = 7;
console.log("The result of " + a + " + " + b + " is " + (a + b));Das ist ein bisschen verwirrend, oder? Aber mit Template Literals kannst du diesen Code lesbarer und wartbarer schreiben:
const a = 3;
const b = 7;
console.log(`The result of ${ a } + ${ b } is ${ a + b }`);Behalte aber im Hinterkopf, dass es einen Unterschied zwischen den beiden Syntaxen gibt:
Template Literals eignen sich für verschiedene Zwecke. Im folgenden Beispiel verwenden wir einen ternären Operator, um einem Attribut class einen Wert zuzuweisen.
const page = 'archive';
console.log(`class=${ page === 'archive' ? 'archive' : 'single' }`);Im Folgenden führen wir eine einfache Berechnung durch:
const price = 100;
const VAT = 0.22;
console.log(`Total price: ${ (price * (1 + VAT)).toFixed(2) }`);Es ist auch möglich, Template Literals zu verschachteln, indem du sie in einen ${expression} Platzhalter einfügst (verwende verschachtelte Vorlagen jedoch mit Vorsicht, da komplexe Stringstrukturen schwer zu lesen und zu pflegen sein können).
Getaggte Vorlagen: Wie bereits erwähnt, ist es auch möglich, eine benutzerdefinierte Funktion zu definieren, die eine String-Verkettung durchführt. Diese Art von Template Literal wird Tagged Template genannt.
Tags ermöglichen es dir, Template Literals mit einer Funktion zu parsen. Das erste Argument einer Tag-Funktion enthält ein Array von String-Werten. Die übrigen Argumente beziehen sich auf die Ausdrücke.
Tags ermöglichen es dir, Template Literals mit einer benutzerdefinierten Funktion zu parsen. Das erste Argument dieser Funktion ist ein Array mit den im Template Literal enthaltenen Strings, die anderen Argumente sind die Ausdrücke.
Du kannst eine benutzerdefinierte Funktion erstellen, die beliebige Operationen mit den Template-Argumenten durchführt und die manipulierte Zeichenkette zurückgibt. Hier ist ein sehr einfaches Beispiel für eine getaggte Vorlage:
const name = "Carlo";
const role = "student";
const organization = "North Pole University";
const age = 25;
function customFunc(strings, ...tags) {
console.log(strings); // ['My name is ', ", I'm ", ', and I am ', ' at ', '', raw: Array(5)]
console.log(tags); // ['Carlo', 25, 'student', 'North Pole University']
let string = '';
for ( let i = 0; i < strings.length - 1; i++ ){
console.log(i + "" + strings[i] + "" + tags[i]);
string += strings[i] + tags[i];
}
return string.toUpperCase();
}
const output = customFunc`My name is ${name}, I'm ${age}, and I am ${role} at ${organization}`;
console.log(output);Der obige Code gibt die Array-Elemente strings und tags aus und schreibt die Zeichenfolgen groß, bevor er die Ausgabe in der Browserkonsole ausgibt.
Pfeil-Funktionen
Pfeilfunktionen sind eine Alternative zu anonymen Funktionen (Funktionen ohne Namen) in JavaScript, allerdings mit einigen Unterschieden und Einschränkungen.
Die folgenden Deklarationen sind alle gültige Beispiele für Pfeilfunktionen:
// Arrow function without parameters
const myFunction = () => expression;
// Arrow function with one parameter
const myFunction = param => expression;
// Arrow function with one parameter
const myFunction = (param) => expression;
// Arrow function with more parameters
const myFunction = (param1, param2) => expression;
// Arrow function without parameters
const myFunction = () => {
statements
}
// Arrow function with one parameter
const myFunction = param => {
statements
}
// Arrow function with more parameters
const myFunction = (param1, param2) => {
statements
}Du kannst die runden Klammern weglassen, wenn du nur einen Parameter an die Funktion übergibst. Wenn du zwei oder mehr Parameter übergibst, musst du sie in Klammern einschließen. Hier ist ein Beispiel dafür:
const render = ( id, title, category ) => `${id}: ${title} - ${category}`;
console.log( render ( 5, 'Hello World!', "JavaScript" ) );Einzeilige Pfeilfunktionen geben standardmäßig einen Wert zurück. Wenn du die mehrzeilige Syntax verwendest, musst du manuell einen Wert zurückgeben:
const render = ( id, title, category ) => {
console.log( `Post title: ${ title }` );
return `${ id }: ${ title } - ${ category }`;
}
console.log( `Post details: ${ render ( 5, 'Hello World!', "JavaScript" ) }` );Ein wichtiger Unterschied zwischen normalen Funktionen und Arrow Functions, den du beachten solltest, ist, dass Arrow Functions keine eigenen Bindungen zum Schlüsselwort this haben. Wenn du versuchst, this in einer Arrow Function zu verwenden, wird es außerhalb des Funktionsbereichs liegen.
Eine ausführlichere Beschreibung der Pfeil-Funktionen und Anwendungsbeispiele findest du in den mdn web docs.
Klassen
Klassen in JavaScript sind eine besondere Art von Funktionen zur Erstellung von Objekten, die den prototypischen Vererbungsmechanismus nutzen.
Laut mdn web docs,
Wenn es um Vererbung geht, gibt es in JavaScript nur ein Konstrukt: Objekte. Jedes Objekt hat eine private Eigenschaft, die eine Verknüpfung zu einem anderen Objekt, dem Prototyp, enthält. Dieses Prototyp-Objekt hat einen eigenen Prototyp, und so weiter, bis ein Objekt mit
nullals Prototyp erreicht ist.
Wie bei den Funktionen gibt es zwei Möglichkeiten, eine Klasse zu definieren:
- Ein Klassenausdruck
- Eine Klassendeklaration
Du kannst das Schlüsselwort class verwenden, um eine Klasse innerhalb eines Ausdrucks zu definieren, wie im folgenden Beispiel gezeigt:
const Circle = class {
constructor(radius) {
this.radius = Number(radius);
}
area() {
return Math.PI * Math.pow(this.radius, 2);
}
circumference() {
return Math.PI * this.radius * 2;
}
}
console.log('Circumference: ' + new Circle(10).circumference()); // 62.83185307179586
console.log('Area: ' + new Circle(10).area()); // 314.1592653589793Eine Klasse hat einen Körper, das ist der Code, der in geschweiften Klammern steht. Hier definierst du Konstruktoren und Methoden, die auch Klassenmitglieder genannt werden. Der Körper der Klasse wird auch ohne die Direktive 'strict mode' im strikten Modus ausgeführt.
Die Methode constructor dient der Erstellung und Initialisierung eines mit einer Klasse erstellten Objekts und wird automatisch ausgeführt, wenn die Klasse instanziiert wird. Wenn du keine Konstruktormethode in deiner Klasse definierst, verwendet JavaScript automatisch einen Standardkonstruktor.
Eine Klasse kann mit dem Schlüsselwort extends erweitert werden.
class Book {
constructor(title, author) {
this.booktitle = title;
this.authorname = author;
}
present() {
return this.booktitle + ' is a great book from ' + this.authorname;
}
}
class BookDetails extends Book {
constructor(title, author, cat) {
super(title, author);
this.category = cat;
}
show() {
return this.present() + ', it is a ' + this.category + ' book';
}
}
const bookInfo = new BookDetails("The Fellowship of the Ring", "J. R. R. Tolkien", "Fantasy");
console.log(bookInfo.show());Ein Konstruktor kann das Schlüsselwort super verwenden, um den übergeordneten Konstruktor aufzurufen. Wenn du der Methode super() ein Argument übergibst, ist dieses Argument auch in der übergeordneten Konstruktorklasse verfügbar.
Einen tieferen Einblick in JavaScript-Klassen und einige Anwendungsbeispiele findest du in den mdn Web Docs.
Klassen werden oft verwendet, um React-Komponenten zu erstellen. Normalerweise erstellst du keine eigenen Klassen, sondern erweiterst die eingebauten React-Klassen.
Alle Klassen in React haben eine render() Methode, die ein React-Element zurückgibt:
class Animal extends React.Component {
render() {
return <h2>Hey, I am a {this.props.name}!</h2>;
}
}Im obigen Beispiel ist Animal eine Klassenkomponente. Beachte:
- Der Name der Komponente muss mit einem Großbuchstaben beginnen.
- Die Komponente muss den Ausdruck
extends React.Componententhalten. Dies ermöglicht den Zugriff auf die Methoden vonReact.Component. - Die Methode
render()gibt das HTML zurück und ist erforderlich.
Sobald du deine Klassenkomponente erstellt hast, kannst du das HTML auf der Seite darstellen:
const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Animal name="Rabbit" />;
root.render(element);Das Bild unten zeigt das Ergebnis auf der Seite (du kannst es auf CodePen in Aktion sehen).
Beachte jedoch, dass es nicht empfehlenswert ist, Klassenkomponenten in React zu verwenden. Es ist besser, Komponenten als Funktionen zu definieren.
Das Schlüsselwort ‚this‘
In JavaScript ist das Schlüsselwort this ein allgemeiner Platzhalter, der normalerweise innerhalb von Objekten, Klassen und Funktionen verwendet wird und sich je nach Kontext oder Geltungsbereich auf unterschiedliche Elemente bezieht.
this kann im globalen Bereich verwendet werden. Wenn du this in der Konsole deines Browsers eingibst, erhältst du:
Window {window: Window, self: Window, document: document, name: '', location: Location, ...}Du kannst auf alle Methoden und Eigenschaften des Window Objekts zugreifen. Wenn du also this.location in der Konsole deines Browsers aufrufst, erhältst du die folgende Ausgabe:
Location {ancestorOrigins: DOMStringList, href: 'https://kinsta.com/', origin: 'https://kinsta.com', protocol: 'https:', host: 'kinsta.com', ...}Wenn du this in einem Objekt verwendest, bezieht es sich auf das Objekt selbst. Auf diese Weise kannst du dich in den Methoden eines Objekts auf die Werte des Objekts selbst beziehen:
const post = {
id: 5,
getSlug: function(){
return `post-${this.id}`;
},
title: 'Awesome post',
category: 'JavaScript'
};
console.log( post.getSlug );Versuchen wir nun, this in einer Funktion zu verwenden:
const useThis = function () {
return this;
}
console.log( useThis() );Wenn du nicht im Strict-Modus bist, bekommst du:
Window {window: Window, self: Window, document: document, name: '', location: Location, ...}Wenn du aber den Strict-Modus aufrufst, erhältst du ein anderes Ergebnis:
const doSomething = function () {
'use strict';
return this;
}
console.log( doSomething() );In diesem Fall gibt die Funktion undefined zurück. Das liegt daran, dass sich this in einer Funktion auf ihren expliziten Wert bezieht.
Wie kann man also this in einer Funktion explizit setzen?
Zunächst kannst du der Funktion manuell Eigenschaften und Methoden zuweisen:
function doSomething( post ) {
this.id = post.id;
this.title = post.title;
console.log( `${this.id} - ${this.title}` );
}
new doSomething( { id: 5, title: 'Awesome post' } );Du kannst aber auch die Methoden call, apply und bind sowie die Pfeilfunktionen verwenden.
const doSomething = function() {
console.log( `${this.id} - ${this.title}` );
}
doSomething.call( { id: 5, title: 'Awesome post' } );Die Methode call() kann für jede Funktion verwendet werden und tut genau das, was sie sagt: Sie ruft die Funktion auf.
Außerdem akzeptiert call() jeden anderen in der Funktion definierten Parameter:
const doSomething = function( cat ) {
console.log( `${this.id} - ${this.title} - Category: ${cat}` );
}
doSomething.call( { id: 5, title: 'Awesome post' }, 'JavaScript' );const doSomething = function( cat1, cat2 ) {
console.log( `${this.id} - ${this.title} - Categories: ${cat1}, ${cat2}` );
}
doSomething.apply( { id: 5, title: 'Awesome post' }, ['JavaScript', 'React'] );const post = { id: 5, title: 'Awesome post', category: 'JavaScript' };
const doSomething = function() {
return `${this.id} - ${this.title} - ${this.category}`;
}
const bindRender = doSomething.bind( post );
console.log( bindRender() );Eine Alternative zu den oben beschriebenen Optionen ist die Verwendung von Pfeilfunktionen.
Pfeilfunktionsausdrücke sollten nur für Nicht-Methoden-Funktionen verwendet werden, da sie keine eigene
thishaben.
Deshalb sind Pfeilfunktionen besonders nützlich bei Event-Handlern.
Denn „wenn der Code von einem Inline-Eventhandler-Attribut aufgerufen wird, wird sein this auf das DOM-Element gesetzt, auf dem der Listener platziert ist“ (siehe mdn web docs).
Bei Pfeilfunktionen ist das anders, denn…
… Pfeilfunktionen legen
thisauf der Grundlage des Bereichs fest, in dem die Pfeilfunktion definiert ist, und derthisWert ändert sich nicht, je nachdem, wie die Funktion aufgerufen wird.
Binden von „this“ an Event-Handler in React
In React gibt es einige Möglichkeiten, um sicherzustellen, dass der Event-Handler seinen Kontext nicht verliert:
1. Die Verwendung von bind() innerhalb der Render-Methode:
import React, { Component } from 'react';
class MyComponent extends Component {
state = { message: 'Hello World!' };
showMessage(){
console.log( 'This refers to: ', this );
console.log( 'The message is: ', this.state.message );
}
render(){
return( <button onClick={ this.showMessage.bind( this ) }>Show message from state!</button> );
}
}
export default MyComponent;2. Binden des Kontexts an den Event-Handler im Konstruktor:
import React, { Component } from 'react';
class MyComponent extends Component {
state = { message: 'Hello World!' };
constructor(props) {
super(props);
this.showMessage = this.showMessage.bind( this );
}
showMessage(){
console.log( 'This refers to: ', this );
console.log( 'The message is: ', this.state.message );
}
render(){
return( <button onClick={ this.showMessage }>Show message from state!</button> );
}
}
export default MyComponent;3. Definiere den Event-Handler mit Hilfe von Pfeilfunktionen:
import React, { Component } from 'react';
class MyComponent extends Component {
state = { message: 'Hello World!' };
showMessage = () => {
console.log( 'This refers to: ', this );
console.log( 'The message is: ', this.state.message );
}
render(){
return( <button onClick={this.showMessage}>Show message from state!</button> );
}
}
export default MyComponent;4. Verwendung von Pfeilfunktionen in der Rendering-Methode:
import React, { Component } from 'react';
class MyComponent extends Component {
state = { message: 'Hello World!' };
showMessage() {
console.log( 'This refers to: ', this );
console.log( 'The message is: ', this.state.message );
}
render(){
return( <button onClick={()=>{this.showMessage()}}>Show message from state!</button> );
}
}
export default MyComponent;Egal, welche Methode du wählst, wenn du auf die Schaltfläche klickst, zeigt die Browserkonsole die folgende Ausgabe an:
This refers to: MyComponent {props: {…}, context: {…}, refs: {…}, updater: {…}, state: {…}, …}
The message is: Hello World!Ternärer Operator
Der bedingte Operator (oder ternäre Operator) ermöglicht es dir, einfache bedingte Ausdrücke in JavaScript zu schreiben. Er benötigt drei Operanden:
- eine Bedingung, gefolgt von einem Fragezeichen (
?), - einen Ausdruck, der ausgeführt werden soll, wenn die Bedingung wahr ist, gefolgt von einem Semikolon (
:), - einen zweiten Ausdruck, der ausgeführt wird, wenn die Bedingung falsch ist.
const drink = personAge >= 18 ? "Wine" : "Juice";Es ist auch möglich, mehrere Ausdrücke zu verketten:
const drink = personAge >= 18 ? "Wine" : personAge >= 6 ? "Juice" : "Milk";Sei aber vorsichtig, denn die Verkettung mehrerer Ausdrücke kann zu unordentlichem Code führen, der schwer zu warten ist.
Der ternäre Operator ist in React besonders nützlich, vor allem in deinem JSX-Code, der nur Ausdrücke in geschweiften Klammern zulässt.
Du kannst den ternären Operator zum Beispiel verwenden, um den Wert eines Attributs abhängig von einer bestimmten Bedingung zu setzen:
render(){
const person = {
name: 'Carlo',
avatar: 'https://en.gravatar.com/...',
description: 'Content Writer',
theme: 'light'
}
return (
<div
className='card'
style={
person.theme === 'dark' ?
{ background: 'black', color: 'white' } :
{ background: 'white', color: 'black'}
}>
<img
src={person.avatar}
alt={person.name}
style={ { width: '100%' } }
/>
<div style={ { padding: '2px 16px' } }>
<h3>{person.name}</h3>
<p>{person.description}.</p>
</div>
</div>
);
}Im obigen Code prüfen wir die Bedingung person.theme === 'dark', um den Wert des Attributs style des Containers div zu setzen.
Auswertung des Kurzschlusses
Der logische UND-Operator (&&) wertet die Operanden von links nach rechts aus und gibt true zurück, wenn und nur wenn alle Operanden true sind.
Das logische UND ist ein Kurzschlussoperator. Jeder Operand wird in einen booleschen Wert umgewandelt. Wenn das Ergebnis der Umwandlung false ist, bricht der AND-Operator ab und gibt den ursprünglichen Wert des falschen Operanden zurück. Wenn alle Werte true sind, gibt er den ursprünglichen Wert des letzten Operanden zurück.
Die Kurzschlussauswertung ist eine JavaScript-Funktion, die in React häufig verwendet wird, da sie es dir ermöglicht, Codeblöcke auf der Grundlage bestimmter Bedingungen auszugeben. Hier ist ein Beispiel:
{
displayExcerpt &&
post.excerpt.rendered && (
<p>
<RawHTML>
{ post.excerpt.rendered }
</RawHTML>
</p>
)
}Wenn im obigen Code displayExcerpt UND post.excerpt.rendered zu true ausgewertet werden, gibt React den letzten JSX-Block aus.
Um es noch einmal zu sagen: „Wenn die Bedingung true ist, wird das Element direkt nach && in der Ausgabe erscheinen. Wenn es false ist, ignoriert und überspringt React es“.
Spread-Syntax
Mit der Spread-Syntax in JavaScript kannst du ein iterierbares Element wie ein Array oder ein Objekt in Funktionsargumente, Array-Literale oder Objekt-Literale auflösen.
Im folgenden Beispiel packen wir ein Array in einem Funktionsaufruf aus:
function doSomething( x, y, z ){
return `First: ${x} - Second: ${y} - Third: ${z} - Sum: ${x+y+z}`;
}
const numbers = [3, 4, 7];
console.log( doSomething( ...numbers ) );Du kannst die Spread-Syntax verwenden, um ein Array zu duplizieren (auch multidimensionale Arrays) oder um Arrays zu verketten. In den folgenden Beispielen verketten wir zwei Arrays auf zwei verschiedene Arten:
const firstArray = [1, 2, 3];
const secondArray = [4, 5, 6];
firstArray.push( ...secondArray );
console.log( firstArray );Alternativ:
let firstArray = [1, 2, 3];
const secondArray = [4, 5, 6];
firstArray = [ ...firstArray, ...secondArray];
console.log( firstArray );Du kannst auch die Spread-Syntax verwenden, um zwei Objekte zu klonen oder zu verschmelzen:
const firstObj = { id: '1', title: 'JS is awesome' };
const secondObj = { cat: 'React', description: 'React is easy' };
// clone object
const thirdObj = { ...firstObj };
// merge objects
const fourthObj = { ...firstObj, ...secondObj }
console.log( { ...thirdObj } );
console.log( { ...fourthObj } );Destrukturierende Zuweisung
Eine weitere syntaktische Struktur, die du in React häufig findest, ist die destrukturierende Zuweisungssyntax.
Im folgenden Beispiel packen wir Werte aus einem Array aus:
const user = ['Carlo', 'Content writer', 'Kinsta'];
const [name, description, company] = user;
console.log( `${name} is ${description} at ${company}` );Und hier ist ein einfaches Beispiel für eine destrukturierende Zuweisung mit einem Objekt:
const user = {
name: 'Carlo',
description: 'Content writer',
company: 'Kinsta'
}
const { name, description, company } = user;
console.log( `${name} is ${description} at ${company}` );Aber wir können noch mehr tun. Im folgenden Beispiel packen wir einige Eigenschaften eines Objekts aus und weisen die verbleibenden Eigenschaften mit der Spread-Syntax einem anderen Objekt zu:
const user = {
name: 'Carlo',
family: 'Daniele',
description: 'Content writer',
company: 'Kinsta',
power: 'swimming'
}
const { name, description, company, ...rest } = user;
console.log( rest ); // {family: 'Daniele', power: 'swimming'}Du kannst auch einem Array Werte zuweisen:
const user = [];
const object = { name: 'Carlo', company: 'Kinsta' };
( { name: user[0], company: user[1] } = object );
console.log( user ); // (2) ['Carlo', 'Kinsta']Beachte, dass die Klammern um die Zuweisungsanweisung erforderlich sind, wenn du die Zuweisung eines Objekt-Literals ohne Deklaration verwendest.
Eine ausführlichere Analyse der Destrukturierungszuweisung mit mehreren Anwendungsbeispielen findest du in den mdn Web Docs.
filter(), map() und reduce()
JavaScript bietet mehrere nützliche Methoden, die du in React häufig verwenden wirst.
filter()
Im folgenden Beispiel wenden wir den Filter auf das Array numbers an, um ein Array zu erhalten, dessen Elemente Zahlen größer als 5 sind:
const numbers = [2, 6, 8, 2, 5, 9, 23];
const result = numbers.filter( number => number > 5);
console.log(result); // (4) [6, 8, 9, 23]Im folgenden Beispiel erhalten wir ein Array mit Beiträgen, die das Wort „JavaScript“ im Titel enthalten:
const posts = [
{id: 0, title: 'JavaScript is awesome', content: 'your content'},
{id: 1, title: 'WordPress is easy', content: 'your content'},
{id: 2, title: 'React is cool', content: 'your content'},
{id: 3, title: 'With JavaScript to the moon', content: 'your content'},
];
const jsPosts = posts.filter( post => post.title.includes( 'JavaScript' ) );
console.log( jsPosts );
map()
const numbers = [2, 6, 8, 2, 5, 9, 23];
const result = numbers.map( number => number * 5 );
console.log(result); // (7) [10, 30, 40, 10, 25, 45, 115]In einer React-Komponente wird die Methode map() häufig verwendet, um Listen zu erstellen. Im folgenden Beispiel ordnen wir das WordPress-Objekt posts zu, um eine Liste von Beiträgen zu erstellen:
<ul>
{ posts && posts.map( ( post ) => {
return (
<li key={ post.id }>
<h5>
<a href={ post.link }>
{
post.title.rendered ?
post.title.rendered :
__( 'Default title', 'author-plugin' )
}
</a>
</h5>
</li>
)
})}
</ul>reduce()
reduce() nimmt zwei Parameter entgegen:
- Eine Callback-Funktion, die für jedes Element des Arrays ausgeführt wird. Sie gibt einen Wert zurück, der beim nächsten Aufruf zum Wert des Akkumulationsparameters wird. Beim letzten Aufruf gibt die Funktion den Wert zurück, der der Rückgabewert von
reduce()sein wird. - Einen Anfangswert, der der erste Wert des Akkumulators ist, der an die Callback-Funktion übergeben wird.
Die Callback-Funktion benötigt ein paar Parameter:
- Einen Akkumulator: Der Wert, der beim vorherigen Aufruf der Callback-Funktion zurückgegeben wurde. Beim ersten Aufruf wird er auf einen Anfangswert gesetzt, falls er angegeben wurde. Andernfalls nimmt sie den Wert des ersten Elements des Arrays.
- Der Wert des aktuellen Elements: Der Wert wird auf das erste Element des Arrays (
array[0]) gesetzt, wenn ein Anfangswert festgelegt wurde, andernfalls nimmt er den Wert des zweiten Elements (array[1]) an. - Der aktuelle Index ist die Indexposition des aktuellen Elements.
Ein Beispiel macht alles deutlicher.
const numbers = [1, 2, 3, 4, 5];
const initialValue = 0;
const sumElements = numbers.reduce(
( accumulator, currentValue ) => accumulator + currentValue,
initialValue
);
console.log( numbers ); // (5) [1, 2, 3, 4, 5]
console.log( sumElements ); // 15Lass uns im Detail herausfinden, was bei jeder Iteration passiert. Gehe zurück zum vorherigen Beispiel und ändere die initialValue:
const numbers = [1, 2, 3, 4, 5];
const initialValue = 5;
const sumElements = numbers.reduce(
( accumulator, currentValue, index ) => {
console.log('Accumulator: ' + accumulator + ' - currentValue: ' + currentValue + ' - index: ' + index);
return accumulator + currentValue;
},
initialValue
);
console.log( sumElements );Das folgende Bild zeigt die Ausgabe in der Browserkonsole:
Nun wollen wir herausfinden, was ohne den Parameter initialValue passiert:
const numbers = [1, 2, 3, 4, 5];
const sumElements = numbers.reduce(
( accumulator, currentValue, index ) => {
console.log( 'Accumulator: ' + accumulator + ' - currentValue: ' + currentValue + ' - index: ' + index );
return accumulator + currentValue;
}
);
console.log( sumElements );
Weitere Beispiele und Anwendungsfälle werden auf der mdn web docs Website diskutiert.
Exporte und Importe
Seit ECMAScript 2015 (ES6) ist es möglich, Werte aus einem JavaScript-Modul zu exportieren und sie in ein anderes Skript zu importieren. Du wirst Importe und Exporte in deinen React-Anwendungen häufig verwenden und deshalb ist es wichtig, dass du weißt, wie sie funktionieren.
Der folgende Code erstellt eine funktionale Komponente. Die erste Zeile importiert die React-Bibliothek:
import React from 'react';
function MyComponent() {
const person = {
name: 'Carlo',
avatar: 'https://en.gravatar.com/userimage/954861/fc68a728946aac04f8531c3a8742ac22?size=original',
description: 'Content Writer',
theme: 'dark'
}
return (
<div
className = 'card'
style = {
person.theme === 'dark' ?
{ background: 'black', color: 'white' } :
{ background: 'white', color: 'black'}
}>
<img
src = { person.avatar }
alt = { person.name }
style = { { width: '100%' } }
/>
<div
style = { { padding: '2px 16px' } }
>
<h3>{ person.name }</h3>
<p>{ person.description }.</p>
</div>
</div>
);
}
export default MyComponent;Wir verwenden das Schlüsselwort import, gefolgt von dem Namen, den wir dem zu importierenden Element zuweisen wollen, und dem Namen des Pakets, das wir installieren wollen, wie er in der package.json-Datei angegeben ist.
Beachte, dass wir in der obigen MyComponent() Funktion einige der JavaScript-Funktionen verwendet haben, die in den vorherigen Abschnitten besprochen wurden. Wir haben Eigenschaftswerte in geschweifte Klammern gesetzt und den Wert der Eigenschaft style mit der Syntax des bedingten Operators zugewiesen.
Das Skript endet mit dem Export unserer benutzerdefinierten Komponente.
Da wir nun etwas mehr über Importe und Exporte wissen, wollen wir uns genauer ansehen, wie sie funktionieren.
Exportieren
Jedes React-Modul kann zwei verschiedene Arten von Exporten haben: named export und default export.
So kannst du zum Beispiel mit einer einzigen export Anweisung mehrere Funktionen auf einmal exportieren:
export { MyComponent, MyVariable };Du kannst auch einzelne Merkmale exportieren (function, class, const, let):
export function MyComponent() { ... };
export let myVariable = x + y;Du kannst aber nur einen einzigen Standardexport haben:
export default MyComponent;Du kannst den Standardexport auch für einzelne Merkmale verwenden:
export default function() { ... }
export default class { ... }Importieren
Sobald die Komponente exportiert wurde, kann sie zusammen mit anderen Modulen in eine andere Datei importiert werden, z. B. in eine index.js-Datei:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import MyComponent from './MyComponent';
const root = ReactDOM.createRoot( document.getElementById( 'root' ) );
root.render(
<React.StrictMode>
<MyComponent />
</React.StrictMode>
);Im obigen Code haben wir die Import-Deklaration auf verschiedene Weise verwendet.
In den ersten beiden Zeilen haben wir den importierten Ressourcen einen Namen zugewiesen, in der dritten Zeile haben wir keinen Namen zugewiesen, sondern einfach die Datei ./index.css importiert. Die letzte Anweisung import importiert die Datei ./MyComponent und weist ihr einen Namen zu.
Lasst uns die Unterschiede zwischen diesen Importen herausfinden.
Insgesamt gibt es vier Arten von Importen:
Benannter Import
import { MyFunction, MyVariable } from "./my-module";Standard-Import
import MyComponent from "./MyComponent";Namespace-Import
import * as name from "my-module";Nebeneffekt importieren
import "module-name";Wenn du ein paar Stile in deine index.css eingefügt hast, sollte deine Karte wie im Bild unten aussehen, wo du auch den entsprechenden HTML-Code sehen kannst:
Beachte, dass import Deklarationen nur in Modulen auf der obersten Ebene verwendet werden können (nicht innerhalb von Funktionen, Klassen usw.).
Für einen umfassenderen Überblick über import und export kannst du auch die folgenden Ressourcen konsultieren:
- export (mdn web docs)
- import (mdn web docs)
- Importieren und Exportieren von Komponenten (React Dev)
- Wann sollte ich geschweifte Klammern für ES6-Import verwenden? (Stack Overflow)
Zusammenfassung
React ist heute eine der beliebtesten JavaScript-Bibliotheken und gehört zu den gefragtesten Fähigkeiten in der Welt der Webentwicklung.
Mit React ist es möglich, dynamische Webanwendungen und fortschrittliche Schnittstellen zu erstellen. Die Erstellung großer, dynamischer und interaktiver Anwendungen ist dank der wiederverwendbaren Komponenten ganz einfach.
Aber React ist eine JavaScript-Bibliothek, und ein gutes Verständnis der wichtigsten Funktionen von JavaScript ist unerlässlich, um deine Reise mit React zu beginnen. Deshalb haben wir einige der JavaScript-Funktionen, die du in React am häufigsten verwendest, an einem Ort gesammelt. Wenn du diese Funktionen beherrschst, hast du auf deiner React-Lernreise einen Vorsprung.
Und wenn es um Webentwicklung geht, ist der Umstieg von JS/React auf WordPress mit wenig Aufwand verbunden.
Jetzt bist du dran: Welche JavaScript-Funktionen sind deiner Meinung nach für die React-Entwicklung am nützlichsten? Haben wir etwas Wichtiges übersehen, das du gerne auf unserer Liste gesehen hättest? Teile uns deine Gedanken in den Kommentaren unten mit.
Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.
Schreibe einen Kommentar