En tant que bibliothèque frontale la plus populaire, tout le monde veut apprendre React. ReactJS est fondamentalement JavaScript. Mais cela ne signifie pas que vous devez tout apprendre en JavaScript pour passer à ReactJS. Comprendre les concepts fondamentaux de JavaScript vous aidera à saisir plus facilement les concepts de React et, en fin de compte, cela accélérera votre capacité à travailler sur des projets.
Décrivons les concepts essentiels que vous devez connaître sur JavaScript avant de passer à ReactJS.
1. Fonctions fléchées
Les fonctions fléchées sont largement utilisées dans React. Depuis la version 16.8, React est passé de composants basés sur des classes à des composants fonctionnels. Fonctions fléchées permettent de créer des fonctions avec une syntaxe plus courte.
Illustrons cela dans les exemples suivants :
Fonction régulière
fonctionsalutation() {
retour'Bonjour'
}
console.log (salutation()) //helloFonction flèche
laisser salutation = () =>'Bonjour'
console.log (salutation()) //helloLes deux fonctions ci-dessus ont la même sortie, bien que la syntaxe soit différente. La fonction flèche semble plus courte et plus propre que la fonction normale. Habituellement, les composants React ont la structure suivante :
importer Réagir depuis'réagir'constante Réserver = () => {
retour (
Réserver</div>)
}
exporterdéfaut Livre
Les fonctions fléchées n'ont pas de nom. Si vous souhaitez le nommer, affectez-le à une variable. La différence entre une fonction normale et une fonction fléchée ne se limite pas à la syntaxe. En savoir plus sur les fonctions fléchées dans MozillaComment documentation des développeurs.
2. Déstructuration
La déstructuration est utilisée pour obtenir des données à partir de structures de données complexes. En JavaScript, les tableaux et les objets peuvent stocker de nombreuses valeurs. Vous pouvez manipuler les valeurs et les utiliser dans différentes parties de l'application.
Pour obtenir ces valeurs, il faut déstructurer la variable. Selon la structure de données avec laquelle vous traitez, vous pouvez utiliser la notation point (.) ou la notation crochet. Par exemple:
constante étudiant = {'nom': 'Marie',
'adresse': "South Park, Bethléem",
'âge': 15
}
Déstructuration :
console.log (nom.étudiant) // sortie MarieDans l'exemple ci-dessus, la notation par points accède à la valeur de la clé 'name'. Dans ReactJS, vous utiliserez le concept de déstructuration pour obtenir et partager des valeurs dans votre application. La déstructuration permet d'éviter les répétitions et rend votre code plus lisible.
3. Méthodes de tableau
Vous rencontrerez plusieurs fois des tableaux en travaillant sur des projets React. Un tableau est une collection de données. Vous stockez les données dans des tableaux, vous pouvez donc les réutiliser en cas de besoin.
Les méthodes de tableau sont principalement utilisées pour manipuler, récupérer et afficher des données. Certaines méthodes de tableau couramment utilisées sont carte(), filtre(), et réduire(). Vous devez être familier avec le méthodes de tableau pour comprendre quand appliquer chacun.
Par exemple, le carte() La méthode itère sur tous les éléments d'un tableau. Il agit sur chaque élément du tableau pour créer un nouveau tableau.
constante nombres = [9, 16, 25, 36];
constante squaredArr = nombres.map(Mathématiques.sqrt) // 3,4,5,6
Vous utiliserez beaucoup les méthodes de tableau dans ReactJS. Vous les utiliserez pour convertir des tableaux en chaînes, joindre, ajouter des éléments et supprimer des éléments d'autres tableaux.
4. Conditionnels courts
Les conditions sont des instructions que JavaScript utilise pour prendre des décisions dans le code. Les conditionnels courts incluent && (et), II (ou) et l'opérateur ternaire. Ce sont des expressions plus courtes des conditions et des instructions if/else.
L'exemple suivant montre comment utiliser un opérateur ternaire.
Code avec instruction if/else :
fonctionhoraire d'ouverture(jour) {
si (jour == DIMANCHE) {
retour12;
}
autre {
retour9;
}
}Code avec opérateur ternaire :
fonctionhoraire d'ouverture(jour) {
retour jour == DIMANCHE? 12: 9;
}En savoir plus différents types de conditionnels avec un accent particulier sur les conditionnels courts. Ceux-ci sont largement utilisés dans React.
5. Modèles littéraux
Les littéraux de modèle utilisent des back-ticks (``) pour définir une chaîne. Les littéraux de modèle vous permettent de manipuler des données de chaîne pour les rendre plus dynamiques. Les littéraux de modèle balisés vous permettent d'effectuer des opérations dans une chaîne. Ce sont des expressions plus courtes des conditions et des instructions if/else.
Par exemple:
laisser prenom = "Jeanne";laisser nom = "Biche";
laisser texte = `Bienvenue ${firstName}, ${lastName}!`; // Bienvenue Jane Doe !
6. Opérateurs de propagation
L'opérateur Spread (...) copie les valeurs d'un objet ou d'un tableau dans un autre. Sa syntaxe se compose de trois points suivis du nom de la variable. Par exemple (...nom). Il fusionne les propriétés de deux tableaux ou objets.
L'exemple suivant montre comment utiliser l'opérateur de propagation pour copier les valeurs d'une variable dans une autre.
constante noms = ['Marie', 'Jeanne'];
constante membres du groupe = ['Fred', ...des noms, 'Angèle']; // ["Fred", "Marie", "Jane", "Angèle"]
Vous pouvez utiliser l'opérateur de propagation pour effectuer un certain nombre d'opérations. Celles-ci incluent la copie du contenu d'un tableau, l'insertion d'un tableau dans un autre, l'accès à des tableaux imbriqués et la transmission de tableaux en tant qu'arguments. Vous pouvez utiliser l'opérateur de propagation dans ReactJS pour gérer les changements d'état dans les composants.
Pourquoi apprendre ReactJS ?
ReactJS est populaire pour une bonne raison. Il a une courbe d'apprentissage courte, fiable et rend rapidement au DOM. Il prend en charge les composants autonomes et dispose d'excellents outils de débogage.
ReactJS intègre de nouveaux concepts JavaScript issus d'ECMAScript 6 (ES6). L'apprentissage des concepts fondamentaux en JavaScript facilitera le développement de projets en ReactJS.
Pour couronner le tout, ReactJS a une grande communauté qui publie constamment de nouvelles mises à jour. Si vous souhaitez apprendre une bibliothèque JavaScript, ReactJS serait un excellent choix. Le framework Next.js complète les limites de ReactJS. Une combinaison des deux fait de ReactJS une puissante bibliothèque frontale.
