Cours de formation React, partie 28: fonctionnalités modernes React, idées de projets, conclusion

Aujourd'hui, dans la dernière partie de la traduction du cours React, nous parlerons des capacités modernes de React et discuterons des idées des applications React, en créant ce que vous pouvez répéter ce que vous avez appris en suivant ce cours et en apprendre beaucoup.



→ 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
→ Partie 28: fonctionnalités React actuelles, idées de projets, conclusion
→ La fin!

Leçon 46. Développement d'applications React modernes

→ Original

De nombreux programmeurs sur Facebook travaillent sur la bibliothèque React, et des membres de la grande communauté autour de React contribuent au projet. Tout cela conduit au fait que React se développe très rapidement. Par exemple, si vous, en étudiant React au début de 2019, avez regardé des documents sur cette bibliothèque, disons, il y a deux ans, vous ne pouviez pas vous empêcher de remarquer les changements qui se sont produits dans React depuis la publication de ces documents. Par exemple, dans React 16.3, de nouvelles méthodes de cycle de vie des composants sont apparues et certaines méthodes ont été dépréciées. Et, disons, dans React 16.6, il y a encore plus de nouvelles fonctionnalités. Un grand nombre d'innovations sont attendues dans React 17.0 et dans les futures versions de cette bibliothèque.

Nous allons maintenant parler de certaines fonctionnalités modernes de React.

Beaucoup de ces fonctionnalités dépendent de la version de la spécification ECMAScript prise en charge par les outils utilisés pour développer le projet React. Supposons que si vous utilisez le transporteur Babel, cela signifie que vous disposez des dernières fonctionnalités JavaScript. Il convient de noter que lorsque vous utilisez des fonctionnalités JavaScript dans des projets qui ne sont pas encore inclus dans la norme, vous pouvez rencontrer le fait que, s'ils sont inclus dans la norme, ils peuvent changer.

L'une des fonctionnalités JavaScript modernes que vous pouvez utiliser lors du développement d'applications React est la possibilité de déclarer des méthodes de classe à l'aide de la syntaxe de la fonction flèche.

Voici le code du composant App qui affiche le champ de texte:

 import React, {Component} from "react" class App extends Component {   //        constructor() {       super()       this.state = {           firstName: ""       }       this.handleChange = this.handleChange.bind(this)   }     //        handleChange(event) {       const { name, value } = event.target       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       type="text"                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />               </form>               <h1>{this.state.firstName}</h1>           </main>       )   } } export default App 

Voici à quoi ressemble la page de cette application dans un navigateur.


Application dans le navigateur

Nous handleChange() méthode handleChange() comme une fonction de flèche, apportant le code du composant à la forme suivante:

 import React, {Component} from "react" class App extends Component {   //        constructor() {       super()       this.state = {           firstName: ""       }   }     //        handleChange = (event) => {       const { name, value } = event.target       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       type="text"                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />               </form>               <h1>{this.state.firstName}</h1>           </main>       )   } } export default App 

Au cours de cette conversion, de petites modifications ont été apportées au code, mais ces modifications ont un impact sérieux sur le fonctionnement de la méthode. Le this dans les fonctions flèches indique la portée lexicale dans laquelle elles se trouvent. Ces fonctions ne prennent pas en charge this liaison. Cette caractéristique des fonctions fléchées conduit au fait que les méthodes déclarées les utilisant n'ont pas besoin d'être liées à this dans le constructeur de classe.

Une autre possibilité que nous considérerons ici est d'utiliser des propriétés de classe. Maintenant, lors de l'initialisation de l'état dans le constructeur, nous utilisons l' this.state . Nous créons donc une propriété d'instance de la classe. Désormais, les propriétés peuvent être créées en dehors du constructeur. Par conséquent, vous pouvez convertir le code comme suit:

 import React, {Component} from "react" class App extends Component {   //        state = { firstName: "" }     //        handleChange = (event) => {       const { name, value } = event.target       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       type="text"                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />               </form>               <h1>{this.state.firstName}</h1>           </main>       )   } } export default App 

Veuillez noter qu'ici, nous nous sommes débarrassés du constructeur en initialisant l'état lors de la déclaration de la propriété correspondante. Tout indique que cette fonctionnalité JS sera incluse dans la norme dans un avenir prévisible.

Voici une liste des fonctionnalités de React.

• API de contexte Il peut être utilisé à la place de Redux, bien que cela ne signifie pas que la bibliothèque Redux a perdu sa pertinence.
• Limites des erreurs .
• Modèle d'accessoires de rendu .
• Composants d'ordre supérieur .
• React Router .
• Faites réagir les crochets .
• Nouvelles fonctionnalités de React 16.6 .

En général, on peut noter que, puisque React se développe très rapidement, il est recommandé que toutes les personnes impliquées dans le développement de React surveillent constamment les innovations de cette bibliothèque .

Leçon 47. Réagir aux idées de projet

→ Original

Pendant le développement de React, vous et moi avons créé quelques projets - une application Todo et un générateur de memes. Il est possible que vous sachiez déjà ce que vous souhaitez créer à l'aide de React. Vous développez peut-être déjà votre propre application. Si vous n'avez pas encore fait de choix, et étant donné que la pratique est le meilleur moyen d'apprendre la technologie informatique, ici et là il y a du matériel où vous trouverez tout un tas d'idées d'applications Web qui peuvent être créées en utilisant React.

Leçon 48. Conclusion

→ Original

Félicitations! Vous venez de terminer un cours sur la bibliothèque React. Vous vous êtes familiarisé avec les blocs de construction de base des applications React, que vous pouvez déjà utiliser pour créer vos propres projets. Certes, si vous voulez créer quelque chose à l'aide de React, préparez-vous au fait que vous avez encore beaucoup à apprendre.

Passons en revue les concepts de base que vous avez appris pendant le développement de ce cours.

• JSX. JSX vous permet de décrire les interfaces utilisateur en utilisant une syntaxe très similaire au code HTML standard.
• Deux approches pour le développement de composants. Composants basés sur la classe et fonctionnels.
• Différentes façons de styliser les applications React.
• Passer des propriétés des composants parents aux composants enfants.
• Utilisation de l'état des composants pour stocker et utiliser des données.
• Rendu conditionnel.
• Travaillez avec des formulaires dans React.

Merci de votre attention!

Chers lecteurs! Nous vous demandons de partager vos impressions sur ce cours et de nous dire ce que vous souhaitez développer (ou développez déjà) à l'aide de React.