ReactJS - React Without ES6 ECMAScript

Hallo da, angehende Programmierer! Heute machen wir uns auf eine aufregende Reise in die Welt von ReactJS, aber mit einer Wendung - wir werden dies ohne ES6 tun. Keine Sorge, wenn du noch nicht weißt, was ES6 ist; wir werden alles erklären, während wir vorankommen. Stell dir vor, wir bauen eine Zeitmaschine, um uns in die frühen Tage von React zurückzuversetzen. Bist du bereit? Tauchen wir ein!

Was ist React und warum lernen wir die "alte" Methode?

React ist eine beliebte JavaScript-Bibliothek zur Erstellung von Benutzeroberflächen. Es ist wie LEGO für Web-Entwickler - du erstellst kleine, wiederverwendbare Teile (Komponenten) und baust sie zusammen, um komplexe Anwendungen zu erstellen.

Nun könnte ihr euch fragen: "Warum lernen wir React ohne ES6?"Nun, meine lieben Schüler, das ist wie das Fahren eines Schaltgetriebesautos vor einem Automatikgetriebe. Es gibt dir ein tieferes Verständnis dafür, wie die Dinge unter der Haube funktionieren. Außerdem könntest du ältere Codebasen antreffen, die diese Syntax verwenden, daher ist es gut, sich damit vertraut zu machen.

Create React Class (create-react-class)

In der vor-ES6-Welt von React haben wir etwas genannt createReactClass verwendet, um Komponenten zu erstellen. Sehen wir uns ein einfaches Beispiel an:

var React = require('react');
var createReactClass = require('create-react-class');

var Greeting = createReactClass({
render: function() {
return <h1>Hello, {this.props.name}!</h1>;
}
});

Lassen wir das auseinanderbrechen:

1. Wir requiren (importieren) React und das create-react-class-Paket.
2. Wir erstellen eine Komponente namens Greeting mit createReactClass.
3. Innerhalb der Komponente definieren wir eine render-Funktion, die JSX zurückgibt (die HTML-ähnliche Syntax, die ihr seht).

Wenn wir ES6 verwenden würden, sähe diese gleiche Komponente so aus:

class Greeting extends React.Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}

Seht ihr den Unterschied? Die createReactClass-Methode mag etwas ausführlicher erscheinen, aber sie hat einige einzigartige Funktionen, die wir als nächstes erkunden werden.

Standardwert für Props setzen (getDefaultProps)

In React möchten wir oft Standardwerte für Props setzen. Mit createReactClass verwenden wir eine spezielle Methode namens getDefaultProps. So funktioniert es:

var Greeting = createReactClass({
getDefaultProps: function() {
return {
name: 'World'
};
},
render: function() {
return <h1>Hello, {this.props.name}!</h1>;
}
});

In diesem Beispiel:

1. Wir definieren eine getDefaultProps-Funktion, die ein Objekt zurückgibt.
2. Dieses Objekt enthält Standardwerte für unsere Props.
3. Wenn keine name-Prop bei der Verwendung dieser Komponente angegeben wird, wird sie standardmäßig auf 'World' gesetzt.

Wenn wir <Greeting /> verwenden, wird "Hello, World!" gerendert. Verwenden wir jedoch <Greeting name="Alice" />, wird "Hello, Alice!" gerendert.

In ES6 React würden wir dasselbe mit statischen Eigenschaften erreichen:

class Greeting extends React.Component {
static defaultProps = {
name: 'World'
};
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}

Initialen Zustand setzen (getInitialState)

Der Zustand ist wie der persönliche Datenspeicher einer Komponente. Mit createReactClass setzen wir den initialen Zustand mit getInitialState:

var Counter = createReactClass({
getInitialState: function() {
return {
count: 0
};
},
incrementCount: function() {
this.setState({
count: this.state.count + 1
});
},
render: function() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.incrementCount}>Increment</button>
</div>
);
}
});

Lassen wir das auseinanderbrechen:

1. getInitialState gibt ein Objekt zurück, das den initialen Zustand definiert.
2. Wir setzen einen initialen count von 0.
3. Wir haben eine incrementCount-Funktion, die den Zustand aktualisiert.
4. In der render-Methode显示den Zähler und einen Knopf zum Inkrementieren.

In ES6 React würden wir den initialen Zustand normalerweise im Konstruktor setzen:

class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
// ... Rest des Komponenten
}

Methodenvergleich

Hier ist eine praktische Tabelle, die die von uns diskutierten Methoden vergleicht:

createReactClass	ES6 Class	Zweck
getDefaultProps	static defaultProps	Standardpropwerte setzen
getInitialState	constructor	Initialen Zustand setzen
render	render	Die Komponente rendern

Schlussfolgerung

Und das war's, Leute! Wir haben eine Reise zurück in die Zeit gemacht, um React ohne ES6 zu erkunden. Denkt daran, dass das Verständnis dieser Konzepte euch zu einem umfassenderen React-Entwickler macht. Es ist wie die Geschichte einer Sprache zu kennen - es gibt euch ein tiefes Verständnis für die modernen Funktionen.

Als wir uns abschlossen, wurde ich an eine Geschichte erinnert. Einmal arbeitete ich an einem Legacy-Projekt, das diese ältere Syntax verwendete. Meine Teamkollegen waren ratlos, aber dank des Verständnisses dieser Grundlagen konnte ich wie ein React-Superheld hereinkommen und den Tag retten!

Bleibt dran, bleibt neugierig, und bevor ihr es wisst, werdet ihr großartige Dinge mit React bauen - egal, ob mit der alten Syntax oder der neuen. Frohes Coden und mögen eure Komponenten immer fehlerfrei rendern!

Credits: Image by storyset