React.js : introduction à React.js

Name: React.js : introduction à React.js
Author: Tony Davydets

Dans ce cours, vous apprendrez ce qu'est React et pourquoi c'est un outil puissant pour créer des interfaces utilisateur. Vous explorerez les avantages de…

Preview the first lesson free — get full access to all 1 lessons.

Demander une démo Se connecter

Cours : à la demande

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.

Fournisseur : Tony Davydets 1 leçon · 11m en Arabe, Allemand, Anglais, Espagnol, Français, Portugais, Chinese

Description du cours

Dans ce cours, vous apprendrez ce qu'est React et pourquoi c'est un outil puissant pour créer des interfaces utilisateur. Vous explorerez les avantages de l'utilisation de React par rapport au JavaScript simple et découvrirez comment configurer un environnement de développement React à l'aide de l'utilitaire create-react-app.

L'un des principaux avantages de l'utilisation de React est sa capacité à gérer facilement des états complexes entre les états et les utilisateurs. Avec React, vous pouvez créer des composants réutilisables qui peuvent être facilement mis à jour et modifiés, ce qui le rend idéal pour créer des applications Web volumineuses et complexes. Vous explorerez les principales différences entre React et JavaScript simple, y compris les avantages de l'utilisation d'une approche basée sur les composants pour créer des interfaces utilisateur. En outre, vous découvrirez le DOM virtuel React et comment il optimise les performances en minimisant le nombre de mises à jour requises pour afficher les modifications.

Pour commencer à utiliser React, vous découvrirez comment utiliser l'utilitaire create-react-app pour configurer rapidement et facilement un nouveau projet React. Vous apprendrez à installer et configurer l'utilitaire et à l'utiliser pour créer une application React de base.

À la fin de cette section, vous aurez une solide compréhension de ce qu'est React, pourquoi c'est un outil si populaire pour le développement Web et comment créer vos propres applications React à l'aide de l'utilitaire create-react-app. Ces connaissances constitueront une base solide pour le reste du cours, à mesure que vous explorerez des sujets React plus avancés et créerez des applications de plus en plus complexes.

Ce que vous allez apprendre

Comprendre ce qu'est React et pourquoi c'est un outil puissant pour créer des interfaces utilisateur
Comparer React avec JavaScript standard et les avantages d'une approche basée sur les composants
Expliquer comment le DOM Virtuel (Virtual DOM) de React optimise les performances en minimisant les mises à jour de rendu
Configurer un environnement de développement React à l'aide de l'utilitaire create-react-app
Créer une application React de base avec create-react-app
Identifier quand utiliser React et pourquoi React a été créé

Points clés à retenir

React est un outil de création d'interfaces utilisateur et offre des avantages par rapport au JavaScript classique (plain JavaScript).
React vous permet de créer des composants réutilisables qui peuvent être facilement mis à jour et modifiés, ce qui le rend adapté aux applications web vastes et complexes.
Le DOM virtuel de React (React Virtual DOM) optimise les performances en minimisant le nombre de mises à jour nécessaires pour rendre les modifications.
L'utilitaire create-react-app vous permet de configurer rapidement et facilement un nouveau projet React.
Cette introduction constitue une base pour explorer des sujets React plus avancés et créer des applications de plus en plus complexes.

Foire aux questions

Que vais-je apprendre dans ce cours ?

Vous apprendrez ce qu'est React et pourquoi il est puissant pour créer des interfaces utilisateur, les avantages de React par rapport au JavaScript standard, l'approche par composants, le Virtual DOM de React, et comment configurer un environnement React en utilisant l'utilitaire create-react-app.

Ai-je besoin d'une expérience préalable avec JavaScript ?

Le cours explore les différences clés entre React et le JavaScript classique (plain JavaScript) et les avantages de l'utilisation de React par rapport au JavaScript classique, il est donc présenté en lien avec le développement web basé sur JavaScript.

Quels sujets les leçons couvrent-elles ?

Les leçons couvrent Qu'est-ce que React ?, Pourquoi React et Non JavaScript ?, et Créer une Application React en Utilisant l'utilitaire create-react-app.

Que serai-je capable de faire à la fin ?

À la fin, vous aurez une solide compréhension de ce qu'est React, des raisons pour lesquelles c'est un outil populaire pour le développement web et de la façon de créer vos propres applications React en utilisant l'utilitaire create-react-app.

Ce cours est-il destiné aux débutants sur React ?

Oui. Il s'agit d'une introduction qui explique pourquoi React a été créé, quand l'utiliser, et présente l'utilitaire create-react-app, constituant ainsi une base pour aborder des sujets plus avancés sur React.