Fermer

mars 18, 2023

Quoi de neuf dans les documents React mis à jour

Quoi de neuf dans les documents React mis à jour


Après des années de travail et de raffinement, les anciens React Docs Beta sont désormais la documentation officielle de React ! Nous allons jeter un coup d’oeil!

Des nouvelles passionnantes dans le monde React : Après des années de travail acharné et de raffinement, l’ancien React Docs Beta a été promu à la documentation officielle de React et est maintenant en ligne sur réagir.dev! Avec cela, les documents d’origine ont été rétrogradés à l’héritage, bien qu’ils soient toujours accessibles sur legacy.rectjs.org.

Historique du projet bêta React Docs

Le projet React Docs Beta a été publié pour la première fois fin octobre 2021, dirigé par Rachel Nabours et Et Abramov, dans le but de mettre à jour la documentation React existante afin de refléter les nouvelles manières d’écrire React. Cela était principalement axé sur l’utilisation de Hooks (qui ont été introduits dans le cadre de React 16.8, publié en février 2019) et le changement associé pour favoriser les composants fonctionnels au lieu des composants de classe.

Auparavant, la documentation officielle de React était un composant de classe, car c’était le seul moyen d’écrire des composants avec état. Cependant, l’introduction de React Hooks – le useState() hook, en particulier, permettait aux composants fonctionnels de gérer également l’état. Depuis, il y a eu abondance de débat sur la question de savoir si Hooks était la bonne décision et s’ils avaient atteint ou non l’objectif de simplifier la gestion de l’État et de l’État.

Quoi qu’il en soit, l’introduction de Hooks a radicalement changé la façon dont nous avons écrit React. Pour faire la différence entre l’avant et l’après de ce développement, de nombreux tutoriels et articles React (y compris l’introduction aux nouveaux documents officiels React) font généralement référence à l’ère post-Hooks comme Réaction « moderne ».

Cependant, cela a mis les nouveaux apprenants React dans une position difficile. Il y avait une abondance d’écrits et de conseils sur la migration des composants de classe et de la gestion d’état traditionnelle vers les composants fonctionnels et les crochets. Cependant, les personnes qui apprennent React pour la toute première fois ont découvert qu’il n’y avait pas de documentation solide enseignant Hooks à partir de zéro. Au fil du temps, les documents officiels de React sont devenus plus obsolètes et difficiles à utiliser.

Quoi de neuf?

Crochets et composants fonctionnels par défaut

Le plus grand changement dans la nouvelle documentation est le changement d’opinion vers l’utilisation de Hooks et l’enseignement de composants fonctionnels comme approche standard pour écrire React moderne, à la rare exception des quelques cas d’utilisation restants où les composants de classe sont toujours nécessaires. Sinon, les composants de classe (bien qu’ils soient toujours pris en charge) ont été officiellement désignés comme « hérités ».

Démos interactives et défis

Les nouveaux documents ont considérablement augmenté le nombre d’exemples de code interactifs, ainsi que de nouveaux défis pour vous permettre de mettre en pratique ce que vous venez d’apprendre et de tester vos connaissances. Il existe plus de 600 nouveaux exemples de code interactifs, bacs à sable et démos, qui peuvent tous être forkés pour s’ouvrir dans codesandbox.io pour des changements plus importants et plus étendus ou pour être facilement adapté pour une utilisation dans votre propre travail. Ceci, ainsi que l’ajout de plus d’illustrations et de diagrammes, a été fait dans l’espoir de rendre les documents React plus conviviaux et faciles à comprendre.

Créer une application React n’est plus la norme

L’un des changements les plus remarqués dans la documentation est la suppression de Créer une application React (CRA)l’outil de configuration rapide officiel de React géré par Facebook, dans la section Installation de la nouvelle documentation. Les anciens documents avaient recommandé l’ARC comme « la meilleure façon de commencer à créer une nouvelle application d’une seule page dans React ».

Il y a eu plusieurs appels récemment pour supprimer la recommandation de l’ARC, peut-être plus particulièrement de la part d’un utilisateur populaire de Twitter et YouTuber Théo (t3.gg)dont pull request sur le projet reactjs recommandant le remplacement de CRA par Vite attiré beaucoup d’attention. Cela a suscité de vives critiques à l’égard de CRA, notamment son manque perçu de fonctionnalités (telles que la prise en charge native de TypeScript ou de la bibliothèque CSS populaire Tailwind), de sa taille, de ses performances, etc.

En fin de compte, cependant, il y a un fait décisif à propos de l’ARC qui ne peut être ignoré : il n’est plus activement maintenu. Avec 1 500 problèmes actuels non résolus, plus de 400 RP ouvertes et la dernière version datant de plus d’un an, vous pouvez appeler en toute sécurité ARC un projet mort.

Les cadres sont la recommandation officielle

Pour les utilisateurs qui créent de nouvelles applications ou de nouveaux sites entièrement dans React, les docs mises à jour recommande maintenant les frameworks React y compris Next.js, Remix, Gatsby et Expo pour React Native. Dans une section « Deep Dive » cliquable pour s’étendre, ils sont officiellement d’avis que l’utilisation d’un framework est la meilleure façon de construire avec React. Ils notent cependant que des options telles que Vite ou Parcel existent pour ceux qui « aiment rouler [their] propre configuration personnalisée, nous ne pouvons pas vous arrêter, allez-y !

Il s’agit d’une différence notable par rapport aux documents hérités, qui offraient une phrase de description rapide chacun pour Next.js et Gatsby, mais se concentraient fortement sur l’ARC comme approche recommandée.

Nouveau nom de domaine

La documentation désormais héritée se trouvait à l’origine sur reactjs.org; cela redirige maintenant vers le tout nouveau réagir.dev domaine. Lorsque les nouveaux documents étaient encore en version bêta, ils étaient hébergés sur beta.reactjs.orgqui redirige désormais également vers réagir.dev. La documentation originale peut encore être trouvée, pour ceux qui en ont besoin, à legacy.reactjs.org. Cela a été fait pour prendre un nouveau départ et établir une séparation claire entre la documentation actuelle et l’ancienne.

Nouvelle couleur de marque ?

Une mise à jour moins cruciale (mais toujours intéressante) : un utilisateur de Twitter aux yeux vifs (@borekb) a noté que la couleur sarcelle emblématique qui est historiquement associée à React a légèrement changé dans la nouvelle documentation. Les documents (maintenant) hérités utilisaient auparavant le légèrement plus lumineux #61dafbalors que cet utilisateur a noté que la nouvelle documentation utilise #0a7ea4. Cependant, j’ai aussi creusé un peu, et il semble y avoir un peu plus que ça!

En plus de #0a7ea4les nouveaux documents aussi utiliser #149eca comme « React blue » – une nuance de sarcelle légèrement plus brillante qui est plus proche de l’original. Lequel de ces éléments est utilisé dépend du fait que le site est en mode clair ou sombre, comme nous pouvons le voir dans cet extrait que j’ai extrait de leur CSS via l’outil d’inspection.

Une capture d'écran du code montrant les différences en bleu en fonction du mode clair ou sombre du site Web.

Sur la base de ces informations (sans connaître la raison réelle), je suppose que les couleurs ont été légèrement ajustées à des fins d’accessibilité. La couleur d’arrière-plan principale du mode sombre est #23272F, par rapport auquel la couleur la plus claire passera une vérification du contraste des couleurs, contrairement à la couleur la plus foncée. D’autre part, la sarcelle plus foncée passe un contrôle de contraste de couleur sur un fond blanc, contrairement à la couleur plus claire. Sur cette base, je suppose que les couleurs ont été modifiées par rapport à l’original pour être aussi accessibles que possible dans les nouveaux documents. Bravo à l’équipe React pour son attention à l’accessibilité !

Avoir hâte de

Comme pour tous les documents, la documentation de React évolue et se développe constamment. Le Article de blog « Présentation de react.dev » répertorie plusieurs nouvelles fonctionnalités que nous pouvons attendre avec impatience dans un proche avenir, y compris des exemples TypeScript, un guide d’accessibilité mis à jour, des traductions étendues et plus encore.

Partagez vos commentaires

Vous avez un avis sur la nouvelle doc ? L’équipe React a plusieurs façons d’offrir des commentaires :

  • Remplissez un enquête pour offrir une rétroaction générale.
  • Connectez-vous un problème pour documenter les problèmes, bogues, erreurs, etc.

Un avenir passionnant

Je suis d’avis personnel que ces nouveaux documents sont un énorme triomphe pour l’équipe React et une amélioration massive par rapport aux offres héritées. Ils sont bien conçus, faciles à lire et généralement incroyablement conviviaux. C’est dommage qu’il leur ait fallu si longtemps pour se sentir à l’aise de supprimer la balise bêta et de faire la transition de cette excellente nouvelle ressource vers la documentation officielle de React, mais mieux vaut tard que jamais !

Le blog d’introduction déclare : « Nous pensons qu’il n’y a jamais eu de meilleur moment pour apprendre React » – je suis enclin à être d’accord ! J’espère que ces nouveaux documents fantastiques apporteront avec eux une rafale d’apprenants nouveaux et enthousiastes. Voici encore 10 ans de React !



Le meilleur outil 2023 pour ta croissance Instagram !



Source link