Concepts JavaScript essentiels à apprendre avant de commencer React

React est une bibliothèque Javascript populaire utilisée pour créer des applications du monde réel. Pour devenir un développeur React compétent, il est important de comprendre certains concepts fondamentaux de Javascript. Pour beaucoup, apprendre React peut sembler difficile, mais comprendre ces concepts de base pourrait faciliter le processus d'apprentissage.
Dans cet article, je couvrirai 15 concepts essentiels que tout développeur devrait connaître avant de démarrer React. Chaque concept est expliqué avec un exemple pour montrer son importance.
Si vous débutez avec React ou si vous êtes sur le point d'explorer la bibliothèque, cet article est fait pour vous.

15 concepts JavaScript essentiels

1.Fonction de rappel
Les fonctions sont les éléments constitutifs de tout programme qui permettent d'appeler le code plusieurs fois sans répétition.
Un type de fonction est la Fonction de rappel.
Si vous souhaitez qu'un utilisateur clique sur une flèche dans le navigateur avant qu'une information ne soit affichée ou si vous souhaitez que certains codes soient exécutés juste après avoir récupéré les données de l'API, vous pouvez utiliser la puissance des rappels.
La fonction de rappel effectue sa tâche après qu'une fonction ou un événement se produit et permet de contrôler l'exécution d'une fonction.
C'est une fonction passée en argument à une autre fonction et utilisée pour spécifier ce qui doit se produire après la fin d'une opération asynchrone ou d'un événement.

Exemple

// The callback function
function showText() {
  console.log('The written text should show after 2 seconds.');
}
 function showAfterDelay(callback, delay) {
  setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);

2.Fonctions fléchées
Les fonctions fléchées ont été introduites dans ES6 et permettent d'écrire la syntaxe des fonctions de manière plus concise. La fonction flèche est largement utilisée dans React en raison de sa concision.

Exemple

const showText = () => {
  console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
  setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);

3.Méthode Array.Map()
La mutation du tableau existant est généralement déconseillée dans React car elle pourrait entraîner des bugs inutiles et des problèmes de performances. Pour cette raison, les développeurs utilisent les méthodes array. Les méthodes de tableau fonctionnel ne modifient pas le tableau d'origine mais renvoient plutôt un nouveau tableau à partir de celui existant.
L'une des méthodes de tableau fonctionnel est la méthode Array.map().
Les méthodes Array.map() bouclent sur un tableau existant et renvoient un nouveau tableau de même longueur. Des modifications peuvent être apportées au nouveau tableau sans avoir aucun effet sur celui existant.

Exemple

Const BookNumbers = [1,2,3,4];
Const DoubleNumbers = BookNumbers.map((book)=> book *2);
Console.log(DoubleNumbers);
//Output BookNumbers= [2,4,6,8]

4.Méthode Array.Filter()
La méthode Array.filter() fonctionne de manière intéressante et logique. Ces méthodes peuvent être utilisées pour filtrer certains éléments du tableau en fonction d'une condition vraie ou fausse.
Lorsqu'une déclaration est fausse, elle est automatiquement filtrée et lorsqu'elle est vraie, elle la conserve, ce qui en fait une approche appropriée pour supprimer les éléments indésirables d'un tableau.

Exemple

// The callback function
function showText() {
  console.log('The written text should show after 2 seconds.');
}
 function showAfterDelay(callback, delay) {
  setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);

5.Méthode Array.reduce()
Comme son nom l'indique, la méthode array.reduce() réduit un tableau entier à une seule valeur. C'est l'une des meilleures méthodes pour additionner ou regrouper des éléments d'un tableau.

3 mots clés importants dans la méthode de réduction

• La valeur initiale (facultatif) : Une valeur de départ pour l'accumulateur. S'il n'est pas fourni, le premier élément du tableau est utilisé comme valeur initiale et l'itération commence à partir du deuxième élément.
• Accumulateur (obligatoire) :Le résultat accumulé des itérations précédentes.
• Valeur actuelle (obligatoire) : l'élément actuel en cours de traitement.

Exemple

const showText = () => {
  console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
  setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);

6.Modèles littéraux
Les Les littéraux de modèle permettent aux chaînes de contenir des variables Javascript ou toute expression JavaScript.
Il fournit une approche simple pour créer des chaînes en JavaScript en utilisant les backticks et le dollar avec des accolades ${}.

Exemple

Const BookNumbers = [1,2,3,4];
Const DoubleNumbers = BookNumbers.map((book)=> book *2);
Console.log(DoubleNumbers);
//Output BookNumbers= [2,4,6,8]

7.Opérateurs ternaires
Les opérateurs ternaires sont des opérateurs conditionnels qui offrent un moyen simple et concis d'écrire une instruction if..else.
React ne prend pas directement en charge l'instruction if..else car elle ne convient pas à l'expression syntaxique connue sous le nom de JSX qui existe dans React.
JSX est une extension de syntaxe de JavaScript qui permet l'intégration de Javascript, CSS et React Component dans HTML.
La syntaxe React est considérée plus comme une expression que comme une instruction et le ternaire lui sert d'opérateur approprié.

Exemple

Const BookNumbers = [1,2,3,4];
Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 );
Console.log(FilteredNumbers);
// Output 1,3

8.Opérateurs de court-circuit et logiques
Les Opérateurs logiques sont utilisés pour combiner plusieurs conditions en une seule expression. Les principaux opérateurs logiques qui existent en JavaScript sont :

• AND- renvoie vrai uniquement si les deux opérandes sont vrais.
• OR- renvoie vrai si au moins un opérande est vrai.
• NON- inverser les vraies valeurs de son opérande..

Le court-circuit est un comportement qui se produit dans les opérateurs logiques où, dans des conditions spécifiques, le deuxième opérande n'est pas évalué car le résultat de l'expression entière peut être déterminé uniquement par le premier opérande.

Comment fonctionne le court-circuit

ET (&&)

• si le premier opérande est faux, l'expression entière est fausse, donc le deuxième opérande n'est pas évalué.
• Si le premier opérande est vrai, le deuxième opérande est évalué pour déterminer la valeur qui sera renvoyée.

OU (||)

• Si le premier opérande est vrai, l'expression entière est vraie, donc le deuxième opérande n'est pas évalué.
• si l'opérande est faux, le deuxième opérande est évalué pour déterminer la valeur à renvoyer.

// The callback function
function showText() {
  console.log('The written text should show after 2 seconds.');
}
 function showAfterDelay(callback, delay) {
  setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);

9.Opérateur RestSpread
Dans les cas où vous souhaitez ajouter une nouvelle propriété à un tableau existant ou fusionner un groupe de tableaux existants, l'opérateur de propagation est l'opérateur incontournable.
L'Spread Operator (...) indiqué par 3 points développe un tableau en éléments individuels et est utilisé au début d'un tableau. Il est utilisé pour :

• Fusionner le tableau

const showText = () => {
  console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
  setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);

• Copier le tableau

Const BookNumbers = [1,2,3,4];
Const DoubleNumbers = BookNumbers.map((book)=> book *2);
Console.log(DoubleNumbers);
//Output BookNumbers= [2,4,6,8]

• ajouter une nouvelle propriété à un tableau existant

Const BookNumbers = [1,2,3,4];
Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 );
Console.log(FilteredNumbers);
// Output 1,3

• passer un argument à une fonction

const BookNumbers = [1, 2, 3, 4];
const NumberSum = BookNumbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // Output: 15

Rest Operator(...) est également noté par les 3 points mais écrit à la fin d'un tableau. Il est utilisé pour collecter plusieurs propriétés à partir d'un objet/tableau déstructuré.

Exemple

Const NameValue = "Ade";
const NumValue = 5;
const TempLit= `I am ${NameValue}, a ${NumValue} year old girl `

10.Chaînage optionnel
Le chaînage facultatif gère facilement les valeurs nulles ou non définies. Il est utilisé pour accéder aux propriétés ou à toute propriété intermédiaire qui semble nulle ou non définie dans la chaîne. Il sera automatiquement court-circuité et rendu indéfini. Idéalement, sans chaînage facultatif, il renvoie une erreur.
Dans certains cas, vous n'êtes pas sûr que toutes les valeurs existent dans un objet, envisagez d'utiliser le chaînage facultatif car il s'agit d'une syntaxe qui permet de vérifier les valeurs nulles et non définies.

const BookNumbers = 4;
const result = (BookNumbers % 2 === 0) ? "Even" : "Odd";
console.log(result); 
// Output: "Even"

11.Tableau de déstructuration
Les codes peuvent devenir fastidieux lorsque plusieurs propriétés doivent être appelées simultanément à partir d'un tableau. Avec la déstructuration, cela peut être évité.
La déstructuration permet d'assembler les valeurs d'un tableau en une variable distincte.
La déstructuration peut être utilisée pour

• Passer un élément
• Éléments de nidification
• Définissez les valeurs par défaut.

Un concept essentiel à ne pas ignorer avant de démarrer React est la déstructuration.

const idVerify = true;
const displayMessage = idVerify && "Identified";

console.log(displayMessage); 
// Output: "Identified"

12.Travailler avec des tableaux immuables
Les tableaux peuvent être mutés en JavaScript, ce qui signifie que les propriétés peuvent être ajoutées, supprimées ou mises à jour dans un tableau.
Cependant, dans React, l'immuabilité est souvent préférée pour préserver l'intégrité de l'état et garantir que React puisse détecter les changements. Pour travailler avec des tableaux immuables dans React, des méthodes telles que map, filter et l'opérateur spread sont couramment utilisées pour ajouter, supprimer et mettre à jour des éléments dans des tableaux sans muter le tableau d'origine.

Exemple

• Ajout d'un élément

// The callback function
function showText() {
  console.log('The written text should show after 2 seconds.');
}
 function showAfterDelay(callback, delay) {
  setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);

• Pour supprimer un élément

const showText = () => {
  console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
  setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);

• Pour mettre à jour un élément

Const BookNumbers = [1,2,3,4];
Const DoubleNumbers = BookNumbers.map((book)=> book *2);
Console.log(DoubleNumbers);
//Output BookNumbers= [2,4,6,8]

13.Fonction asynchrone/attente
Le JavaScript asynchrone régit la façon dont les tâches qui prennent du temps sont exécutées. JavaScript est un langage synchrone, c'est-à-dire qu'il exécute un code l'un après l'autre dans un seul thread.
Dans les cas où vous récupérez des données à partir d'une base de données, certains codes peuvent devoir être chargés avant que la récupération ne soit terminée.
Avec la fonction asynchrone, le code peut être exécuté sans attendre la fin des opérations, améliorant ainsi l'expérience utilisateur et les performances globales.
Dans React, vous travaillerez fréquemment avec l'interface de programmation d'application (API), il est donc important d'avoir un aperçu du fonctionnement de cette fonction.

Exemple

Const BookNumbers = [1,2,3,4];
Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 );
Console.log(FilteredNumbers);
// Output 1,3

14.Promesses
Les promesses font référence à un objet intégré qui représente l'achèvement ou l'échec éventuel d'une opération asynchrone.
Des promesses existent dans l'un des trois états :

• En attente : État initial, ni réalisé ni rejeté.
• Réalisé : opération terminée avec succès
• Rejeté : l'opération a rencontré une erreur.

Les promesses jouent un rôle important dans JavaScript, ce qui en fait un concept important à connaître. Il vous permet d'écrire du code plus propre, de gérer systématiquement les erreurs et d'améliorer les performances globales.

15.Gestion des erreurs à l'aide de try.catch.finally
Il y a des moments où des erreurs apparaissent lors de la récupération des données, vous laissant réfléchir à la façon de trouver ou de corriger ces bugs.
Avec l'utilisation de mots-clés, la récupération des données est gérée de manière plus structurée.
Le bloc Try..catch..finally est une puissante construction de gestion des erreurs en JavaScript, qui permet de gérer avec succès les erreurs potentielles et d'exécuter des codes spécifiques, qu'une erreur se produise ou non.
La recherche de certaines erreurs dans votre code peut prendre beaucoup de temps. En utilisant ces blocs, cela devient facile.

• Try - Entoure le code qui pourrait générer une erreur.
• Catch- exécuter si une erreur est générée dans le bloc try. Reçoit les objets d'erreur comme argument.
• Enfin - Exécuter, qu'une erreur se produise ou non.

Exemple

const BookNumbers = [1, 2, 3, 4];
const NumberSum = BookNumbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // Output: 15

Conclusion

Obtenir un aperçu des concepts JavaScript essentiels expliqués ci-dessus facilitera le processus d'apprentissage et vous guidera pour devenir un développeur React compétent. Si vous n'avez pas encore appris ces concepts, faites un effort pour le faire. N'hésitez pas à partager vos suggestions dans la section commentaires !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!