ReactJS - React Without ES6 ECMAScript

Bonjour là-bas, futurs programmeurs ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde de ReactJS, mais avec une touche spéciale - nous le ferons sans ES6. Ne vous inquiétez pas si vous ne savez pas encore ce qu'est ES6 ; nous expliquerons tout au fur et à mesure. Imaginez que nous construisons une machine à temps pour nous ramener aux premiers jours de React. Prêts ? C'est parti !

Qu'est-ce que React et pourquoi apprenons-nous l'ancienne méthode ?

React est une bibliothèque JavaScript populaire pour construire des interfaces utilisateur. C'est comme LEGO pour les développeurs web - vous créez de petites pièces réutilisables (composants) et les assemblez pour construire des applications complexes.

Vous vous demandez peut-être, "Pourquoi apprenons-nous React sans ES6 ?" Eh bien, mes chers étudiants, c'est comme apprendre à conduire une voiture manuelle avant une automatique. Ça vous donne une compréhension plus profonde de la manière dont les choses fonctionnent sous le capot. De plus, vous pourriez rencontrer des anciens codebases qui utilisent cette syntaxe, donc c'est bon de s'y familiariser.

Create React Class (create-react-class)

Dans le monde pré-ES6 de React, nous utilisions quelque chose appelé createReactClass pour créer des composants. Jetons un œil à un exemple simple :

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

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

Reprenons cela :

1. Nous requiring (importons) React et le paquet create-react-class.
2. Nous créons un composant appelé Greeting en utilisant createReactClass.
3. À l'intérieur du composant, nous définissons une fonction render qui retourne du JSX (la syntaxe similaire à HTML que vous voyez).

Maintenant, si nous utilisions ES6, ce même composant ressemblerait à :

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

Voyez la différence ? La méthode createReactClass peut sembler plus verbale, mais elle a quelques fonctionnalités uniques que nous explorerons ensuite.

Définir une Valeur par Défaut pour les Props (getDefaultProps)

En React, nous voulons souvent définir des valeurs par défaut pour les props. Avec createReactClass, nous utilisons une méthode spéciale appelée getDefaultProps. Voici comment cela fonctionne :

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

Dans cet exemple :

1. Nous définissons une fonction getDefaultProps qui retourne un objet.
2. Cet objet contient des valeurs par défaut pour nos props.
3. Si aucune prop name n'est fournie lors de l'utilisation de ce composant, elle sera par défaut 'Monde'.

Ainsi, si nous utilisons <Greeting />, cela affichera "Bonjour, Monde !". Mais si nous utilisons <Greeting name="Alice" />, cela affichera "Bonjour, Alice !".

En ES6 React, nous obtenons le même résultat en utilisant des propriétés statiques :

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

Définir l'État Initial (getInitialState)

L'état est comme le stockage personnel d'un composant. Avec createReactClass, nous définissons l'état initial en utilisant getInitialState :

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

Reprenons cela :

1. getInitialState retourne un objet qui définit l'état initial.
2. Nous définissons un initial count de 0.
3. Nous avons une fonction incrementCount qui met à jour l'état.
4. Dans la méthode render, nous affichons le compte et un bouton pour l'incrémenter.

En ES6 React, nous définissons généralement l'état initial dans le constructeur :

class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
// ... reste du composant
}

Comparaison des Méthodes

Voici un tableau pratique comparant les méthodes que nous avons discutées :

createReactClass	ES6 Class	Objectif
getDefaultProps	static defaultProps	Définir des valeurs par défaut pour les props
getInitialState	constructor	Définir l'état initial
render	render	Rendre le composant

Conclusion

Et voilà, les amis ! Nous avons effectué un voyage dans le temps pour explorer React sans ES6. Souvenez-vous, comprendre ces concepts vous rendra un développeur React plus complet. C'est comme connaître l'histoire d'une langue - cela vous donne une appreciation plus profonde des fonctionnalités modernes.

En conclusion, j'ai pensé à une histoire. Une fois, je travaillais sur un projet hérité qui utilisait cette ancienne syntaxe. Mes collègues étaient perdus, mais grâce à la compréhension de ces bases, j'ai pu intervenir comme un super-héros React et sauver la situation !

Continuez à pratiquer, restez curieux, et avant que vous ne vous en rendiez compte, vous serez en train de construire des choses incroyables avec React - que ce soit avec l'ancienne syntaxe ou la nouvelle. Bon codage, et que vos composants rendent toujours sans faille !

Credits: Image by storyset