React.js : introduction à React.js

Bonjour, je m'appelle Tony et je suis entré. Ces leçons vous apprendront pourquoi choisir React plutôt que Plain JavaScript en HTML et créez une nouvelle application React à l'aide de Create Utilitaire d'application React. Dans cette leçon, nous verrons ce qu'est réellement React. et comment c'est arrivé. React est une bibliothèque JavaScript. C'est open source, ce qui signifie que c'est source. Le code peut être consulté et consulté par n’importe qui. Et il a été créé par Facebook avec. L’intention d’unifier le Web également. En tant que conception d’interface utilisateur mobile sous un même toit commun. En fait, cela existe depuis un bon moment avec le premier version de. Réagissez en étant présenté au public en tant que. Dès 2013. Cependant, depuis 2018 environ, il a connu une croissance fulgurante. menant à d'autres frameworks avancés tels que NextJS en utilisant réellement React comme base et en construisant par-dessus. De ses capacités déjà impressionnantes et complètes. React est principalement utilisé pour les applications dynamiques. Cela signifie que leur contenu change au fur et à mesure des données. Derrière l'interface change. Maintenant avec le site Web standard de la vieille école. Ce n’était pas le cas. Donc, à chaque fois, un utilisateur y allait. Vers une nouvelle URL associée à un. Application, une nouvelle requête Http devrait être émise et tout du contenu qui compose la page. Donc chaque graphique, tout pour les frais généraux le menu, la barre latérale, le pied de page. Doit être récupéré à partir de zéro et restitué le temps et encore une fois. Si vous pouvez l’imaginer, ce n’est pas le cas. Très efficace et React résout ce problème. Grâce à l’utilisation du rendu partiel et de l’hydratation des données. Cela signifie qu'une fois notre modèle chargé dans le navigateur, seulement le . Les données qui diffèrent de l'état actuellement affiché sont mises à jour. Contrairement au site de la vieille école sur lequel on s'appuyait. Le modèle client-serveur à l’ancienne. Ce que cela signifie, c'est que les seules pièces. Ce changement sur l'écran de l'utilisateur est celui qui diffère de l'état actuellement affiché. Ainsi, la navigation de page en page ne provoque plus un affichage complet rendu de chaque chose qu'un utilisateur voit. Cela conduit à un débit de données beaucoup plus efficace stratégie car moins de données doivent être transmises depuis le serveur au client. De plus, une autre fonctionnalité utilisée par React pour obtenir un L'amélioration des performances est l'utilisation de Shadow Dom. À présent, vous êtes très probablement familier. Avec notre Dom standard, mais juste pour. Assurez-vous que nous sommes tous connectés. Sur la même page, dom est un acronyme. Ce qui signifie Document Object Module. Lorsque notre page Web, autrement appelée document, est chargé dans le navigateur, son contenu est analysé et tout les informations sur l'objet, son. La structure ainsi que toutes ses parties constituantes sont chargées dans la mémoire. Du client ou du navigateur. Mais malheureusement pour nous, avec tout ce qui concerne à notre application, d'autres choses s'y retrouvent également et. Ils concernent les fonctionnalités de base du navigateur. Cela ne nous est pas très utile. Et c'est là que Shadow Dom entre en jeu. Shadow Dom est un sous-ensemble de Dom ordinaire, et son principal avantage est. Que la seule information qu'il conserve est celle qui concerne notre application et absolument rien d'autre. Avoir moins de trucs dans notre ombre Dom. Than Dom est bien sûr bénéfique. Et avoir tout cela appliqué à notre application signifie seulement que nous pouvons. Stockez, extrayez et manipulez uniquement les pièces dont nous avons besoin. Cela conduit à une amélioration significative des performances. React est basé sur des composants, ce qui signifie que c'est le cas. Pour atteindre les résultats que nous recherchons, nous briserons notre application dans une série de composants pour encapsuler chacun partie visuelle de l’interface utilisateur. Cela nous donne la possibilité de réutiliser. Notre composant sur tout le site, accélérant notre efforts de développement. Et en plus, cela conduit à une uniformité. L'application, permettant ainsi une utilisation plus fluide, moins déroutante et une expérience utilisateur plus complète, depuis. Les composants utilisés pour des choses similaires seront utilisés dans un de la même manière tout au long de la demande. Enfin, pour ceux qui connaissent d’autres JavaScript frameworks, React fournit une liaison de données unidirectionnelle. Cela signifie que les données qu'il contient. Notre candidature circule dans une seule direction, dans une seule direction uniquement, du parent supérieur. Vers le composant enfant du bas. Dans notre prochaine leçon, nous verrons pourquoi nous utiliserions Réagissez avec du JavaScript simple en HTML. Merci d'avoir regardé. Au revoir.