Tutoriel React, Partie 5: Premiers pas avec une application TODO, style de base

Aujourd'hui, dans la prochaine partie de la traduction du cours de formation React, nous allons commencer à travailler sur le premier projet de formation et parler des bases du style.



→ 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 11. Atelier. Application TODO. Étape numéro 1

→ Original

Dans cette leçon, nous allons commencer à travailler sur notre premier projet de formation - l'application TODO. Des cours similaires seront encadrés comme des ateliers ordinaires. Tout d'abord, vous aurez une tâche, pour la mise en œuvre de laquelle il sera nécessaire de naviguer dans le matériel étudié précédemment, après quoi une solution sera présentée.

Nous allons travailler sur cette application pendant un certain temps, donc si vous utilisez create-react-app , il est recommandé de créer un projet distinct pour elle.

▍Emploi

• Créez une nouvelle application React.
• Affichez le composant <App /> sur la page à l'aide du fichier index.js .
• Le composant <App /> doit générer du code pour afficher 3-4 drapeaux suivis de texte. Le texte peut être formaté à l'aide de balises <p> ou <span> . Ce que vous pouvez faire devrait ressembler à une liste de tâches dans laquelle certaines entrées ont déjà été effectuées.

▍Solution

Le code du fichier index.js :

 import React from 'react' import ReactDOM from 'react-dom' import App from './App' ReactDOM.render(   <App />,   document.getElementById('root') ) 

App.js fichier App.js :

 import React from "react" function App() {   return (       <div>           <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>       </div>   ) } export default App 

Voici à quoi ressemble le projet standard create-react-app react create-react-app dans VSCode à ce stade du travail.


Projet en VSCode

C'est ce que notre application affiche désormais sur la page.


Apparence de l'application dans le navigateur

Aujourd'hui, nous avons fait le premier pas vers une application TODO. Mais ce qui affiche cette application à l'écran n'a pas l'air aussi agréable que ce qui est apparu sur les pages lors de nos expériences précédentes. Par conséquent, dans la prochaine leçon, nous nous concentrerons sur le style des éléments.

Leçon 12. Style dans React à l'aide de classes CSS

→ Original

Nous allons maintenant travailler sur l'application qui a été créée à la suite de l'atelier de la leçon 10. Voici ce que l'application a affiché à l'écran.


Page d'application dans le navigateur

Nous aimerions styliser les éléments de la page. React a de nombreuses approches de style. Nous utilisons maintenant l'approche avec les principes que vous connaissez probablement déjà. Elle consiste à appliquer des classes CSS et des règles CSS affectées à ces classes. Jetons un coup d'œil à la structure de ce projet et réfléchissons aux éléments à affecter aux classes qui seront utilisées pour les styliser.


Projet en VSCode

Le fichier index.js responsable du rendu du composant App . Le composant App affiche un élément <div> , qui contient trois autres composants - Header , MainComponent et Footer . Et chacun de ces composants affiche simplement un élément JSX avec du texte. C'est dans ces composants que nous serons engagés dans le style. Travaillons sur le composant Header - Header . Rappelons qu'à ce stade de son travail, son code ressemble à ceci:

 import React from "react" function Header() {   return (       <header>This is the header</header>   ) } export default Header 

Habituellement, lorsqu'ils travaillent avec du code HTML et souhaitent affecter une classe à un certain élément, cela se fait à l'aide de l'attribut class . Supposons que nous allons affecter un tel attribut à un élément <header> . Mais ici, nous ne devons pas oublier que nous travaillons non pas avec du code HTML, mais avec JSX. Et ici, nous ne pouvons pas utiliser l'attribut de class (en fait, vous pouvez utiliser l'attribut avec ce nom, mais ce n'est pas recommandé). À la place, un attribut nommé className . De nombreuses publications disent que cela est dû au fait que la class est un mot clé JavaScript réservé. Mais, en fait, JSX utilise l'API JavaScript standard pour fonctionner avec le DOM. Pour accéder aux éléments à l'aide de cette API, une conception familière du formulaire suivant est utilisée:

 document.getElementById("something") 

Pour ajouter une nouvelle classe à un élément, procédez comme suit:

 document.getElementById("something").className += " new-class-name" 

Dans une situation similaire, il est plus pratique d'utiliser la propriété des éléments classList , en particulier, car il dispose de méthodes pratiques pour ajouter et supprimer des classes, mais dans ce cas, cela n'a pas d'importance. Et l'important est que la propriété className soit utilisée className .

En fait, pour attribuer des classes aux éléments JSX, il nous suffit de savoir que lorsque le mot-clé class est utilisé en HTML, le mot-clé className doit être utilisé en JSX.

Attribuez la classe navbar à l' navbar <header> :

 import React from "react" function Header() {   return (       <header className="navbar">This is the header</header>   ) } export default Header 

Maintenant, dans le dossier des components , créez le fichier Header.css . Mettez-y le code suivant:

 .navbar { background-color: purple; } 

Connectez maintenant ce fichier à Header.js avec la commande import "./Header.css" (avec cette commande, étendant les capacités de la commande d' import standard, nous indiquons au bundle Webpack, qui est utilisé dans les projets créés à l'aide de create-react-app , que nous voulons utilisez Header.css dans Header.js ).

Voici à quoi cela ressemblera dans VSCode.


Fichier de style et sa connexion dans VSCode

Tout cela conduira au fait que l'apparence de la ligne supérieure affichée par l'application sur la page change.


Modifier le style de ligne supérieure

Ici, nous avons utilisé un style extrêmement simple. Header.css contenu du fichier Header.css ce qui suit:

 .navbar {   height: 100px;   background-color: #333;   color: whitesmoke;   margin-bottom: 15px;   text-align: center;   font-size: 30px;   display: flex;   justify-content: center;   align-items: center; } 

De plus, ouvrez le fichier index.css existe déjà dans le projet et mettez-y le style suivant:

 body {   margin: 0; } 

index.js ce fichier dans index.js avec la commande d' import "./index.css" . Par conséquent, la page d'application prendra la forme indiquée dans la figure suivante.


Changer le style de page

Veuillez noter que les styles spécifiés dans index.css ont affecté tous les éléments de la page. Si vous utilisez, par exemple, une sorte d'éditeur en ligne pour l'expérimentation, le travail avec les fichiers de style peut être organisé d'une manière spéciale. Par exemple, dans un tel éditeur, il peut y avoir un seul fichier de style standard qui est automatiquement connecté à la page, les règles CSS décrites dans celui-ci seront appliquées à tous les éléments de la page. Dans notre exemple simple, il serait tout à fait possible de mettre tous les styles dans index.css .

En fait, en supposant que vous êtes déjà familier avec CSS, nous pouvons dire que nous utilisons ici exactement le même code CSS qui est utilisé pour styliser les éléments HTML ordinaires. La principale chose à garder à l'esprit lors du style des éléments avec des classes dans React est qu'au lieu de l'attribut de l'élément de class utilisé en HTML, className utilisé.

De plus, il convient de noter que les classes ne peuvent être affectées qu'aux éléments React - tels que <header> , <p> ou <h1> . Si vous essayez d'attribuer un nom de classe à une instance de composant - comme <Header /> ou <MainContent /> , le système se comportera de manière très différente de ce à quoi vous pourriez vous attendre. Nous en reparlerons plus tard. En attendant, n'oubliez pas que les classes dans les applications React sont affectées à des éléments, pas à des composants.

Voici autre chose que vous pourriez trouver difficile de démarrer avec React. Nous parlons d'éléments de style qui ont différents niveaux de hiérarchie sur la page. Disons que cela se produit lorsque les technologies CSS Flexbox ou CSS Grid sont utilisées pour le style. Dans de tels cas, par exemple, lorsque vous utilisez la disposition Flex, vous devez savoir quelle entité est le conteneur flex et quelles entités sont des éléments flex. À savoir, il peut être difficile de comprendre - comment exactement les éléments de style, à quels éléments appliquer certains styles. Supposons, par exemple, que l'élément <div> de notre composant App doit être un conteneur flexible:

 import React from "react" import Header from "./components/Header" import MainContent from "./components/MainContent" import Footer from "./components/Footer" function App() {   return (       <div>           <Header />           <MainContent />           <Footer />       </div>   ) } export default App 

Dans ce cas, les éléments flexibles sont affichés au moyen des composants Header , MainContent et Footer . Jetez un œil, par exemple, au code du composant Header - Header :

 import React from "react" import "./Header.css" function Header() {   return (       <header className="navbar">           This is the header       </header>   ) } export default Header 

L'élément <header> doit être un descendant direct de l'élément <div> du composant App . Il doit être stylisé comme un élément flexible.

Afin de comprendre la stylisation de ces constructions, vous devez considérer ce que sera le code HTML généré par l'application. Nous allons ouvrir l'onglet Elements des outils de développement Chrome pour la page qui apparaît dans le navigateur lorsque vous travaillez avec un projet créé à l'aide de create-react-app .


Code de page

L'élément <div> avec la root identifiante est cet élément de la page index.html auquel nous nous référons dans la méthode ReactDOM.render() appelée dans le fichier index.js . Le balisage généré par le composant App est affiché, à savoir l'élément <div> , qui contient les éléments <header> , <main> et <footer> formés par les composants correspondants.

Autrement dit, en analysant le code de l'application React donné ci-dessus, nous pouvons supposer que la construction <Header /> dans le composant App est remplacée par la construction <header className="navbar">This is the header</header> . La compréhension de ce fait vous permet d'utiliser des schémas complexes pour styliser les éléments de page.

Ceci conclut notre première introduction aux applications de style React. Il est recommandé d'expérimenter avec ce que vous venez de découvrir. Par exemple, essayez de <MainContent /> éléments générés par les composants <MainContent /> et <Footer /> .

Résumé

Aujourd'hui, nous avons commencé à développer notre premier projet de formation - les applications TODO, et nous nous sommes également familiarisés avec le style des applications React à l'aide des classes CSS. La prochaine fois, nous parlerons des fonctionnalités de style de code auxquelles l'auteur de ce cours adhère, ainsi que de certaines choses concernant JSX et JavaScript.

Chers lecteurs! Vous avez déjà une idée d'application que vous souhaitez créer avec React?