Tutoriel React Partie 6: Quelques fonctionnalités du cours, JSX et JavaScript

Nous publions aujourd'hui la suite de la formation React. Ici, nous parlerons de certaines fonctionnalités du cours, en particulier en ce qui concerne le style du code. Ici, nous parlons plus en détail de la relation entre JSX et JavaScript.



→ Partie 1: aperçu du cours, raisons de la popularité de React, ReactDOM et JSX
→ Partie 2: composants fonctionnels
→ Partie 3: fichiers composants, structure du projet
→ Partie 4: composants parent et enfant
→ Partie 5: début des travaux sur une application TODO, les bases du style
→ Partie 6: sur certaines fonctionnalités du cours, JSX et JavaScript
→ Partie 7: styles en ligne
→ Partie 8: poursuite des travaux sur l'application TODO, familiarité avec les propriétés des composants
→ Partie 9: propriétés des composants
→ Partie 10: Atelier sur l'utilisation des propriétés et du style des composants
→ Partie 11: génération de balisage dynamique et méthode des tableaux de cartes
→ Partie 12: atelier, troisième étape de travail sur une application TODO
→ Partie 13: composants basés sur les classes
→ Partie 14: atelier sur les composants basés sur les classes, état des composants
→ Partie 15: ateliers santé composante
→ Partie 16: quatrième étape de travail sur une application TODO, gestion d'événements
→ Partie 17: cinquième étape de travail sur une application TODO, modifiant l'état des composants
→ Partie 18: la sixième étape de travail sur une application TODO
→ Partie 19: méthodes du cycle de vie des composants
Partie 20: la première leçon de rendu conditionnel
→ Partie 21: deuxième leçon et atelier sur le rendu conditionnel
→ Partie 22: la septième étape des travaux sur une application TODO, téléchargement de données depuis des sources externes
→ Partie 23: première leçon sur l'utilisation des formulaires
→ Partie 24: Deuxième leçon sur les formulaires
→ Partie 25: Atelier sur l'utilisation des formulaires
→ Partie 26: architecture d'application, modèle de conteneur / composant
→ Partie 27: projet de cours

Leçon 13. À propos de certaines fonctionnalités du cours

→ Original

Avant de continuer, je voudrais parler un peu de certaines des fonctionnalités du code que je démontre dans ce cours. Vous avez peut-être remarqué que les points-virgules ne sont généralement pas utilisés dans le code. Par exemple, comme vous pouvez le voir, dans des exemples comme ceux-ci, ils ne le sont pas:

import React from "react" import ReactDOM from "react-dom" function App() {    return (       <h1>Hello world!</h1>    ) } ReactDOM.render(<App />, document.getElementById("root")) 

Vous pouvez être habitué aux points-virgules dans la mesure du possible. Ensuite, par exemple, les deux premières lignes du fragment de code précédent ressembleraient à ceci:

 import React from "react"; import ReactDOM from "react-dom"; 

J'ai récemment décidé que je m'en passerais, par conséquent, j'obtiens le code que vous voyez dans les exemples. Bien sûr, il existe des constructions en JavaScript qui ne peuvent pas se passer de points-virgules. Disons, lors de la description d'une boucle for , dont la syntaxe ressemble à ceci:

 for ([]; []; [ ]) 

Mais dans la plupart des cas, vous pouvez vous passer de points-virgules à la fin des lignes. Et leur absence dans le code n'interférera pas avec son travail. En fait, la question de l'utilisation des points-virgules dans le code est une question de préférences personnelles du programmeur.

Une autre caractéristique du code que j'écris est que même si ES6 vous permet techniquement d'utiliser les fonctions fléchées dans les cas où les fonctions sont déclarées à l'aide du mot clé function , je ne l'utilise pas.

Par exemple, le code ci-dessus peut être réécrit comme ceci:

 import React from "react" import ReactDOM from "react-dom" const App = () => <h1>Hello world!</h1> ReactDOM.render(<App />, document.getElementById("root")) 

Mais je n'y suis pas habitué. Je crois que les fonctions fléchées sont extrêmement utiles dans certains cas où les caractéristiques de ces fonctions n'interfèrent pas avec le bon fonctionnement du code. Par exemple, lorsqu'ils utilisent généralement des fonctions anonymes ou lorsqu'ils écrivent des méthodes de classe. Mais je préfère utiliser les fonctionnalités traditionnelles. Beaucoup, lors de la description des composants fonctionnels, utilisent des fonctions fléchées. Je suis d'accord que cette approche présente des avantages par rapport à l'utilisation de conceptions traditionnelles. En même temps, je ne cherche pas à imposer une manière particulière de déclarer des composants fonctionnels.

Leçon 14. JSX et JavaScript

→ Original

Dans la prochaine leçon, nous parlerons des styles intégrés. Avant de passer à ces rubriques, nous devons clarifier certaines caractéristiques de l'interaction entre JavaScript et JSX. Vous savez déjà qu'en utilisant les capacités de React, nous pouvons, à partir du code JavaScript ordinaire, renvoyer des constructions qui ressemblent au balisage HTML normal, mais qui sont du code JSX. Cela se produit, par exemple, dans le code des composants fonctionnels.

Que faire s'il existe une certaine variable dont la valeur doit être substituée dans le code JSX renvoyé par le composant fonctionnel?

Supposons que nous ayons un code comme celui-ci:

 import React from "react" import ReactDOM from "react-dom" function App() { return (   <h1>Hello world!</h1> ) } ReactDOM.render(<App />, document.getElementById("root")) 

Ajoutez au composant fonctionnel quelques variables contenant le prénom et le nom de l'utilisateur.

 function App() { const firstName = "Bob" const lastName = "Ziroll" return (   <h1>Hello world!</h1> ) } 

Maintenant, nous voulons que ce que le composant fonctionnel renvoie ne soit pas un en-tête de premier niveau avec le texte Hello world! et un en-tête contenant un Hello Bob Ziroll! accueil comme Hello Bob Ziroll! qui est formé en utilisant les variables disponibles dans le composant.

Essayons de réécrire ce que le composant retourne, comme ceci:

 <h1>Hello firstName + " " + lastName!</h1> 

Si vous regardez ce qui apparaît sur la page après avoir traité un tel code, il s'avère que cela ne ressemble pas à ce dont nous avons besoin. A savoir, le texte Hello firstName + " " + lastName! . Dans le même temps, si le projet standard créé par les outils create-react-app est utilisé pour exécuter l'exemple, nous serons avertis que les constantes firstName et lastName attribuer des valeurs qui ne sont utilisées nulle part. Certes, cela n'empêchera pas l'apparition sur la page de texte qui est exactement ce qui a été retourné par le composant fonctionnel, sans substituer à la place de ce qui nous semblait les noms des variables, leurs valeurs. Le système considère que les noms de variables dans ce formulaire sont en texte brut.

Nous vous demanderons comment tirer parti de JavaScript dans le code JSX. En fait, cela est assez simple. Dans notre cas, il suffit de mettre ce qui doit être interprété comme du code JavaScript entre accolades. Par conséquent, à quoi ressemblera le composant:

 <h1>Hello {firstName + " " + lastName}!</h1> 

Dans le même temps, le texte Hello Bob Ziroll! . Vous pouvez utiliser des constructions JavaScript régulières dans ces morceaux de code JSX, mis en évidence avec des accolades. Voici ce que le code affichera dans le navigateur:


Une page avec un balisage généré par JSX et JavaScript

Étant donné que lorsque vous travaillez avec des chaînes dans des conditions modernes, les fonctionnalités ES6 sont principalement utilisées, nous réécrivons le code en les utilisant. À savoir, nous parlons de littéraux de modèle dessinés à l'aide de backticks ( ` ` ). Ces chaînes peuvent contenir des constructions de la forme ${} . Le comportement standard des littéraux de modèle implique le calcul des expressions contenues dans les accolades et la conversion de ce qui arrive à une chaîne. Dans notre cas, cela ressemblera à ceci:

 <h1>Hello {`${firstName} ${lastName}`}!</h1> 

Veuillez noter que le prénom et le nom sont séparés par un espace, qui est interprété ici comme un caractère régulier. Le résultat de l'exécution de ce code sera le même que celui indiqué ci-dessus. En général, la chose la plus importante que vous devez comprendre maintenant est que ce qui est placé entre des accolades bouclés situés dans le code JSX est un JS ordinaire.

Prenons un autre exemple. A savoir, nous réécrivons notre code pour que s'il est appelé le matin, il afficherait le texte Good morning , si l'après-midi - Good afternoon et si le soir - Good night . Pour commencer, nous allons écrire un programme qui indique l'heure qu'il est. Voici le code du composant fonctionnel App qui résout ce problème:

 function App() { const date = new Date() return (   <h1>It is currently about {date.getHours() % 12} o'clock!</h1> ) } 

Ici, une nouvelle instance de l'objet Date est créée. JSX utilise du code JavaScript, grâce auquel nous le découvrons en appelant la méthode date.getHours() , qui est maintenant une heure, après quoi, en calculant le reste de la division de ce nombre par 12 , nous convertissons l'heure au format 12 heures. De la même manière, en vérifiant l'heure, nous pouvons former la ligne dont nous avons besoin. Par exemple, cela pourrait ressembler à ceci:

 function App() { const date = new Date() const hours = date.getHours() let timeOfDay if (hours < 12) {   timeOfDay = "morning" } else if (hours >= 12 && hours < 17) {   timeOfDay = "afternoon" } else {   timeOfDay = "night" } return (   <h1>Good {timeOfDay}!</h1> ) } 

Il existe une variable timeOfDay , et en analysant l'heure actuelle à l'aide de la construction if , nous trouvons l'heure de la journée et l'écrivons dans cette variable. Après cela, nous utilisons la variable dans le composant renvoyé par le code JSX.

Comme d'habitude, il est recommandé d'expérimenter ce que nous avons appris aujourd'hui.

Résumé

Dans cette leçon, nous avons parlé de certaines des fonctionnalités de style de code utilisées dans ce cours, ainsi que de l'interaction de JSX et JavaScript. L'utilisation du code JavaScript dans JSX ouvre de grandes opportunités, dont nous ressentirons l'utilité pratique dans la prochaine leçon, lorsque nous traiterons des styles intégrés.

Chers lecteurs! Utilisez-vous des points-virgules dans votre code JavaScript?