Article original : Essential JavaScript Concepts to Know Before Learning React – With Code Examples
Vous avez peut-être vu passer des technologies rutilantes comme React, Vue et Angular qui promettent de révolutionner votre développement front-end. Il est tentant de se lancer tête baissée dans ces frameworks, impatient de construire des interfaces utilisateur époustouflantes. Mais attendez ! Avant de vous lancer dans ce voyage passionnant, considérez ceci :
Une base solide en JavaScript est la pierre angulaire de tout projet front-end réussi.
Dans cet article, mon objectif est de vous fournir les connaissances fondamentales en JavaScript nécessaires pour réussir avec React et d'autres frameworks front-end. À la fin de cette lecture, vous comprendrez mieux les concepts clés de JavaScript — tels que la déstructuration, le court-circuitage et la récupération de données (fetching), entre autres — et comment les utiliser efficacement.
Êtes-vous prêt à améliorer vos compétences en JavaScript ? Plongeons directement dans le vif du sujet 😉
Table des matières
Comment utiliser les gabarits de chaînes (Template Literals)
Avez-vous déjà eu l'impression que la construction de chaînes de caractères en JavaScript était une corvée ? Imaginez composer un message d'anniversaire en ajoutant constamment des guillemets et des signes plus (+) pour inclure le nom.
Avant l'ES6, c'était la réalité avec la concaténation de chaînes. Disons que vous vouliez saluer un utilisateur :
let name = prompt("What is your name?");
let greeting = alert("Hello, " + name + “!");
Ce code fonctionne, mais il peut devenir brouillon lorsqu'on manipule plusieurs variables ou du contenu dynamique.
Puis sont arrivés les gabarits de chaînes (template literals) ! Introduits dans l'ES6, ils offrent une manière plus élégante de créer des chaînes en utilisant des accents graves (``) au lieu des guillemets. Voici comment réécrire la salutation avec les template literals :
let name = prompt("What is your name?");
let greetings = alert(`Hello ${name}`);
Vous voyez la différence ? La partie ${name} indique à JavaScript d'insérer la valeur de la variable name directement dans la chaîne.
Les template literals vous donnent le pouvoir d'effectuer facilement de l'interpolation de chaînes dans l'écosystème JavaScript, fini la concaténation maladroite 😉 !
Les avantages des Template Literals incluent :
Lisibilité : Votre code devient plus clair et plus facile à comprendre.
Maintenabilité : Les mises à jour sont plus simples puisque les modifications sont localisées au sein du template literal.
Expressivité : Vous pouvez créer des chaînes multilignes et même utiliser des fonctions à l'intérieur !
Non seulement les template literals vous facilitent la vie, mais ils sont également essentiels pour construire des composants dynamiques avec React. Vous pouvez, par exemple, créer des éléments de liste dynamiques, rendre des composants de manière conditionnelle ou formater la sortie en fonction des données.
const name = 'Alice';
const greeting = `Hello, ${name}! How are you today?`;
console.log(greeting); // Output: Hello, Alice! How are you today?
const items = ['apple', 'banana', 'orange'];
const listItems = items.map(item => `<li>${item}</li>`).join('');
const list = `<ul>${listItems}</ul>`;
Comme vous pouvez le voir, les template literals facilitent la création de composants basés sur des chaînes de caractères dynamiques et lisibles dans React.
Comment déstructurer les objets et les tableaux
La déstructuration en JavaScript vous permet d'extraire des valeurs de tableaux ou des propriétés d'objets dans des variables distinctes, offrant ainsi un moyen concis et efficace de manipuler les structures de données.
Comment déstructurer des objets en JavaScript
Pour déstructurer un objet, utilisez des accolades { } et spécifiez les noms des propriétés que vous souhaitez extraire. Considérons un exemple :
const person = {
firstName: 'Olalekan',
lastName: ‘Akande',
middleName: ‘Toheeb’,
age: 30
};
const { lastName , firstName} = person;
console.log(firstName, lastName); // Output: Akande Olalekan
Dans ce code, nous avons déstructuré l'objet person et extrait les propriétés firstName et lastName dans des variables séparées.
Déstructuration imbriquée :
Vous pouvez également déstructurer des objets imbriqués :
const address = {
street: '123 Main St’,
city: 'Ilorin'
state: {
name: 'Kwara',
abbreviation: 'KW'
}
};
const { street, city, state: { name } } = address;
console.log(street, city, name); // Output: 123 Main St Ilorin Kwara
Valeurs par défaut :
Vous pouvez fournir des valeurs par défaut pour les propriétés si elles sont indéfinies :
const config = {
theme: 'light'
};
const { theme = 'dark' } = config;
console.log(theme); // Output: light
Renommer une propriété
Parfois, vous pourriez avoir besoin de changer le nom d'une propriété existante pour une meilleure lisibilité ou cohérence au sein de votre projet. La déstructuration offre un moyen pratique d'y parvenir.
L'utilisation d'un nom de propriété différent lors de l'affectation par déstructuration permet de renommer efficacement la propriété au moment de son extraction.
const person = {
firstName: 'Olalekan',
lastName: ‘Akande',
middleName: ‘Toheeb’,
age: 30
};
const { firstName: givenName, lastName: familyName } = person;
console.log(familyName, givenName); // Output: Akande Olalekan
Dans cet exemple, firstName est renommé en givenName, et lastName est renommé en familyName pendant le processus de déstructuration.
Cette technique de renommage peut améliorer la clarté et la maintenabilité du code, en particulier lors de la manipulation d'objets complexes.
Déstructuration de tableaux
Pour déstructurer un tableau, vous utilisez des crochets [] et spécifiez les indices des éléments que vous souhaitez extraire :
const numbers = [1, 2, 3, 4, 5];
const [first, second] = numbers;
console.log(first, second, rest); // Output: 1 2
La déstructuration dans React
La déstructuration est largement utilisée dans les composants React pour extraire les props, l'état (state) et les valeurs de contexte. Elle simplifie le code et améliore la lisibilité :
import React from 'react';
const MyComponent = ({ name, age }) => {
return (
<div>
<h1>Hello, {name}!</h1>
<p>You are {age} years old.</p>
</div>
);
};
Opérateurs Rest et Spread
Les opérateurs rest et spread sont étroitement liés à la déstructuration.
Opérateur Rest
L'opérateur rest (...) collecte les éléments restants d'un tableau ou d'un objet dans un nouveau tableau ou objet :
const numbers = [1, 2, 3, 4, 5];
const [first, ...rest] = numbers;
console.log(rest); // Output: [2, 3, 4, 5]
Opérateur Spread
L'opérateur spread utilise également ... mais sert à étendre un itérable en éléments individuels :
const numbers = [1, 2, 3];
const newArray = [...numbers, 4, 5];
console.log(newArray); // Output: [1, 2, 3, 4, 5]
Dans React, l'opérateur spread est souvent utilisé pour cloner des tableaux ou des objets, ou pour passer des props à des composants :
const person = { name: 'John', age: 30 };
const newPerson = { ...person, city: 'New York' };
console.log(newPerson); // Output: { name: 'John', age: 30, city: 'New York' }
Comprendre la déstructuration et les opérateurs rest/spread peut vous aider à écrire un code JavaScript plus concis et expressif, en particulier lorsque vous travaillez avec React.
Les ternaires au lieu des instructions if/else
Les opérateurs ternaires offrent une alternative concise et élégante aux instructions if/else traditionnelles en JavaScript. Ils sont particulièrement utiles pour les expressions conditionnelles qui retournent une valeur basée sur une condition.
Pourquoi les ternaires plutôt que if/else ?
Bien que les instructions if/else soient polyvalentes, elles peuvent parfois mener à un code verbeux, surtout pour une logique conditionnelle simple. Les opérateurs ternaires fournissent une syntaxe plus compacte et lisible, rendant votre code plus facile à comprendre et à maintenir.
Syntaxe et utilisation
La syntaxe d'un opérateur ternaire est la suivante :
condition ? expression1 : expression2
Si la condition est vraie, expression1 est évaluée et retournée. Sinon, expression2 est évaluée et retournée.
Exemple pur :
let age = 19;
const isAdult = age >= 18;
const message = isAdult ? 'You are an adult.' : 'You are a minor.';
console.log(message);
L'exemple ci-dessus retournera un message basé sur la valeur de la variable age. Pouvez-vous prédire ce qui sera affiché dans la console ?
Exemple dans React :
const MyComponent = ({ isLoggedIn }) => {
return (
<div>
{isLoggedIn ? (
<p>Welcome, user!</p>
) : (
<p>Please log in.</p>
)}
</div>
);
};
Dans ce composant React, l'opérateur ternaire affiche conditionnellement un contenu différent en fonction de la prop isLoggedIn.
Avantages des opérateurs ternaires :
Syntaxe concise : Les opérateurs ternaires offrent une manière plus compacte d'exprimer une logique conditionnelle.
Lisibilité : Ils peuvent améliorer la lisibilité du code en rendant les expressions conditionnelles plus brèves et faciles à saisir.
Efficacité : Parfois, les opérateurs ternaires sont plus efficaces que les instructions
if/else.
En incorporant des opérateurs ternaires dans votre code JavaScript, vous pouvez écrire des programmes plus élégants et performants.
Comment utiliser les fonctions fléchées
Les fonctions fléchées (arrow functions), introduites dans l'ES6, fournissent une syntaxe concise pour définir des fonctions. Elles sont particulièrement utiles dans les paradigmes de programmation fonctionnelle et peuvent considérablement améliorer la lisibilité et la maintenabilité du code.
Que sont les fonctions fléchées ?
Les fonctions fléchées sont une syntaxe raccourcie pour déclarer des fonctions. Elles ont une structure plus simple que les déclarations ou expressions de fonctions traditionnelles. Elles sont souvent utilisées pour des fonctions courtes et en ligne (inline).
Syntaxe :
const myFunction = (arg1, arg2) => {
// Corps de la fonction
};
Caractéristiques clés :
Liaison implicite du this : Les fonctions fléchées ne créent pas leur propre contexte
this. À la place, elles héritent de la valeurthisde la portée parente, ce qui est très utile dans les fonctions de rappel (callbacks) et les gestionnaires d'événements.Syntaxe concise : La syntaxe des fonctions fléchées est souvent plus courte et plus lisible que les déclarations traditionnelles.
Retour implicite : Pour les fonctions fléchées sur une seule ligne avec une instruction
return, le mot-cléreturnpeut être omis.
Exemple :
const greet = name => `Hello, ${name}!`;
console.log(greet('Akande')); // Output: Hello, Akande!
Utilisation des fonctions fléchées dans React
Les fonctions fléchées sont couramment utilisées dans les composants React pour divers usages, notamment :
- Gestionnaires d'événements :
<button onClick={() => this.handleClick()}>Click me</button>
Explication : Ici, la fonction fléchée est utilisée comme gestionnaire pour l'événement onClick. Cela garantit que le contexte this à l'intérieur du gestionnaire se réfère à l'instance du composant, vous permettant d'accéder à l'état et aux méthodes du composant.
- Map, filter et reduce :
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2);
Explication : Les fonctions fléchées sont souvent utilisées avec les méthodes de tableau comme map, filter et reduce pour effectuer des transformations sur les données. Dans cet exemple, la méthode map crée un nouveau tableau où chaque élément est doublé, en utilisant une fonction fléchée pour le callback.
Props :
const MyComponent = ({ name, onButtonClick }) => {
return (
<button onClick={onButtonClick}>Click me</button>
);
};
Explication : Les fonctions fléchées peuvent être utilisées pour définir des props qui sont des fonctions. Dans cet exemple, la prop onButtonClick est une fonction qui peut être passée au composant. Lorsque le bouton est cliqué, la fonction onButtonClick sera appelée.
En utilisant efficacement les fonctions fléchées, vous pouvez écrire un code React plus concis, lisible et facile à maintenir.
Le court-circuitage avec && , || et ??
Le court-circuitage (short-circuiting) est une technique d'évaluation en JavaScript qui peut optimiser les expressions conditionnelles. Elle consiste à arrêter l'évaluation d'une expression logique dès que le résultat final est déterminé.
Le court-circuitage dans les opérateurs logiques signifie que, dans certaines conditions, l'opérateur retournera immédiatement la première valeur sans même regarder la seconde.
On peut dire que le court-circuitage dépend des valeurs "truthy" et "falsy".
Les valeurs falsy incluent : 0, la chaîne vide (''), null, undefined.
Les valeurs truthy sont fondamentalement tout ce qui n'est pas une valeur falsy.
Quand les opérateurs logiques court-circuitent-ils ?
ET logique (&&)
L'opérateur && court-circuite lorsque le côté gauche de l'opérateur (premier opérande) est faux (c'est-à-dire qu'il retourne immédiatement la première valeur si c'est l'une des valeurs falsy). Il n'y a pas de court-circuit si le premier opérande est truthy ; il retournera alors le côté droit de l'opérateur (second opérande).
C'est ce qu'on appelle le court-circuitage vers la gauche.
Exemple :
const isLoggedIn = true;
const greeting = isLoggedIn && <p>Welcome, user!</p>;
Dans cet exemple, la variable greeting ne se verra attribuer l'élément JSX que si isLoggedIn est vrai. Si isLoggedIn est faux, l'opérateur && court-circuite, et l'élément JSX ne sera pas rendu.
OU logique (||)
L'opérateur || fonctionne dans la direction opposée à l'opérateur &&. L'opérateur || court-circuite lorsque le premier opérande est vrai. C'est-à-dire que si le côté gauche de l'opérateur || est truthy, il retourne immédiatement cette valeur.
C'est ce qu'on appelle le court-circuitage vers la droite.
Exemple :
const username = 'Akande';
const greeting = username || ‘Guest';
Ce code assignera à greeting la valeur de username si ce n'est pas une valeur falsy. Sinon, il assignera la valeur par défaut Guest.
Note : Vous devez être très prudent lors de l'utilisation de l'opérateur || dans les cas où vous souhaiteriez réellement retourner 0.
Par exemple :
let numberOfBooksRead = 0;
const hasRead = numberOfBooksRead || ‘No data’;
// hasRead = ‘’No data’
L'exemple ci-dessus retournera No data parce que le premier opérande — numberOfBooksRead — est une valeur falsy (0). Dans ce genre de situation, il est préférable d'utiliser l'opérateur de coalescence des nuls (??).
Opérateur de coalescence des nuls (??)
L'opérateur de coalescence des nuls (??) retourne l'opérande de gauche s'il n'est ni null ni undefined. Sinon, il retourne l'opérande de droite.
L'exemple précédent peut maintenant s'écrire :
let numberOfBooksRead = 0;
const hasRead = numberOfBooksRead ?? ‘No data’;
// hasRead = 0;
Chaînage optionnel (?.)
L'opérateur de chaînage optionnel (?.) offre un moyen plus sûr — dans React — d'accéder à des propriétés imbriquées sans lever d'erreur si une propriété est undefined ou null.
const user = { address: { street: '123 Main St' } };
const street = user?.address?.street;
Dans cet exemple, street recevra la valeur 123 Main St si user et user.address existent tous les deux. Si l'un des deux est null ou undefined, street sera undefined sans provoquer d'erreur.
L'utilisation efficace du court-circuitage et du chaînage optionnel vous permet d'écrire des composants React plus concis et robustes.
Comment utiliser les méthodes de tableau
Les tableaux sont des structures de données fondamentales en JavaScript qui stockent des collections d'éléments. Ils sont ordonnés et peuvent contenir des éléments de différents types de données.
Méthodes de tableau essentielles
map() : Crée un nouveau tableau en appliquant une fonction à chaque élément du tableau d'origine. Utilisez
map()pour mettre à jour des éléments existants.filter() : Crée un nouveau tableau contenant uniquement les éléments qui passent un test implémenté par une fonction fournie. Utilisez
filter()pour supprimer des éléments.reduce() : Applique une fonction à un accumulateur et à chaque élément du tableau pour le réduire à une seule valeur.
sort() : Trie les éléments d'un tableau sur place.
Méthodes de tableau avancées
flatMap() : Aplatit un tableau et applique une fonction de mappage à chaque élément.
reduceRight() : Similaire à
reduce(), mais commence par la fin du tableau.find() : Retourne le premier élément d'un tableau qui satisfait un test implémenté par une fonction fournie.
Relation entre les méthodes de tableau et React
Les méthodes de tableau sont indispensables pour travailler avec des données dans les composants React. Elles peuvent transformer, filtrer et agréger des données pour rendre des éléments d'interface utilisateur dynamiques.
Exemple utilisant map() pour mettre à jour des éléments :
const items = ['apple', 'banana', 'orange'];
const updatedItems = items.map(item => item === 'apple' ? 'grapefruit' : item);
Dans cet exemple, la méthode map() crée un nouveau tableau où l'élément 'apple' est remplacé par 'grapefruit'.
Exemple utilisant filter() pour supprimer des éléments :
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);
Dans cet exemple, la méthode filter() crée un nouveau tableau contenant uniquement les nombres pairs du tableau d'origine.
Exemple utilisant reduce() pour agréger des données :
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
Dans cet exemple, la méthode reduce() calcule la somme de tous les éléments du tableau numbers.
Exemple utilisant flatMap() pour aplatir un tableau :
const nestedArrays = [[1, 2], [3, 4]];
const flattenedArray = nestedArrays.flatMap(array => array);
Dans cet exemple, la méthode flatMap() aplatit les tableaux imbriqués en un seul tableau.
Chaînage des méthodes de tableau
Vous pouvez chaîner plusieurs méthodes de tableau pour effectuer des transformations complexes sur les données de manière concise et efficace.
Exemple :
const users = [
{ name: 'Akande', age: 30 },
{ name: 'Toheeb', age: 25 },
{ name: 'Olalekan', age: 35 }
];
const adultUsers = users
.filter(user => user.age >= 18)
.map(user => ({ name: user.name, age: user.age }));
Dans cet exemple, nous avons d'abord filtré les utilisateurs en fonction de leur âge, puis nous avons utilisé map sur le tableau filtré pour créer un nouveau tableau contenant uniquement les propriétés name et age.
En maîtrisant les méthodes de tableau, vous pouvez écrire des composants React plus efficaces et expressifs qui manipulent les données avec aisance.
Comment récupérer des données (Fetching)
Les données sont le moteur des applications web, et React ne fait pas exception. Récupérer des données (fetching) à partir de sources externes, telles que des API, est une tâche fondamentale dans le développement React. Ces données sont utilisées pour remplir les composants, mettre à jour l'interface utilisateur et offrir une expérience utilisateur dynamique.
Promises et Fetch
Les promesses (Promises) représentent l'achèvement éventuel (ou l'échec) d'une opération asynchrone. L'API fetch() est une fonction JavaScript intégrée qui retourne une Promise représentant la récupération d'une ressource.
Exemple utilisant fetch() :
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
// Manipuler les données ici
console.log(data);
})
.catch(error => {
// Gérer les erreurs ici
console.error(error);
};
Async/Await
La syntaxe async/await offre une manière plus propre de travailler avec les Promises. Elle vous permet d'écrire du code asynchrone dans un style qui ressemble davantage à du code synchrone.
Exemple utilisant async/await :
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
fetchData();
Récupération de données dans les composants React
Dans les composants React, vous récupérez généralement des données à l'intérieur de méthodes de cycle de vie comme componentDidMount ou du hook useEffect. Cela garantit que les données sont récupérées après le montage du composant et l'initialisation de l'état.
Exemple :
import React, { useEffect, useState } from 'react';
function MyComponent() {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
setData(data);
} catch (error) {
console.error(error);
}
};
fetchData();
}, []);
return (
<div>
{data ? (
<p>Data: {JSON.stringify(data)}</p>
) : (
<p>Loading...</p>
)}
</div>
);
}
Dans cet exemple, le hook useEffect est utilisé pour récupérer des données lors du montage du composant. Le hook useState est utilisé pour gérer l'état de chargement et afficher les données récupérées.
Gestion des erreurs
Il est essentiel de gérer les erreurs qui peuvent survenir lors de la récupération des données. Vous pouvez utiliser des blocs try/catch pour capturer les exceptions et fournir un retour approprié à l'utilisateur.
En comprenant les Promises, l' API Fetch, async/await, et la Gestion des erreurs, vous pourrez gérer efficacement les données dans vos applications React.
Vous pouvez commencer React maintenant
Cet article explore les concepts JavaScript essentiels qui forment la base d'un développement React réussi.
En maîtrisant les template literals, la déstructuration, les ternaires, les fonctions fléchées, le court-circuitage, les méthodes de tableau, l'API fetch et async/await, vous serez bien équipé pour relever les défis et saisir les opportunités offertes par React.
Approfondir vos connaissances
Pour approfondir votre compréhension de React, n'hésitez pas à consulter les ressources suivantes :
Create React App : Un outil populaire pour configurer rapidement des projets React.
Cours en ligne : Des plateformes comme freeCodeCamp, Udemy et Coursera proposent des cours complets sur React.
Communauté React : Échangez avec la communauté React sur les forums, les réseaux sociaux et lors de meetups pour apprendre des autres et rester à jour sur les dernières tendances.
Appel à l'action
Maintenant que vous avez une base solide en JavaScript, il est temps de plonger dans React et de construire des applications web incroyables. N'ayez pas peur d'expérimenter, de faire des erreurs et d'apprendre de vos expériences. La communauté React est accueillante et solidaire, alors n'hésitez pas à demander de l'aide en cas de besoin.
Rappelez-vous : L'apprentissage de React est un voyage continu. Restez curieux, continuez à apprendre et profitez du processus de création d'expériences web innovantes.
N'oubliez pas de partager et de recommander cet article à toute personne qui pourrait en avoir besoin.
