Share
React est une bibliothèque JavaScript permettant de créer des interfaces utilisateur. Il est maintenu et développé par Facebook et est l'un des outils les plus populaires pour créer des applications Web aujourd'hui..
Cependant, créer une application React, en particulier pour les débutants, a la réputation d'être très convivial. Le problème provient du moment où React est devenu populaire et la méthode standard de création d'une application React impliquait la configuration manuelle complexe d'une multitude de fichiers de configuration..
De nombreux tutoriels destinés à aider les débutants à démarrer avec React ont présenté différentes approches et outils pour configurer une application fonctionnelle. Même avec des différences subtiles entre les méthodes de construction suggérées, la confusion était inévitable.
Pour pouvoir configurer une application React avec succès via une configuration manuelle, vous devez bien comprendre plusieurs technologies différentes..
Cette flexibilité dans la configuration est réellement une bonne chose. Vous avez toute liberté pour choisir les outils spécifiques pour construire votre application React et les configurer exactement comme vous le souhaitez.
Une fois à l'aise avec ces outils, vous aurez la confiance nécessaire pour les exploiter au mieux et créer des applications complexes en profondeur. Jusque-là, il reste encore un obstacle à l'entrée pour beaucoup de développeurs qui n'ont pas nécessairement l'expérience des outils de ligne de commande nécessaires pour créer des applications React..
Pour atténuer cette frustration, cette série de didacticiels décrit différentes méthodes de configuration des applications React. Nous allons commencer par l’approche la plus élémentaire pour ensuite passer à des configurations plus complexes. Commençons par clarifier plus en détail les types de configuration de React que nous allons couvrir..
À la fin de cette série de didacticiels, vous pourrez configurer les applications React de quatre manières principales:
La première méthode montre comment utiliser un éditeur de code en ligne tel que CodePen pour configurer très rapidement une application React. En utilisant cette méthode, vous coderez votre première application littéralement en quelques secondes.!
Ensuite, nous passerons à la configuration de React dans un environnement de développement local, en commençant par ajouter directement des scripts à un fichier HTML sans aucun outil de construction. Les deux méthodes de configuration suivantes traitent de la configuration d'une application React typique dans votre développement quotidien..
Comme vous le verrez, l'utilisation de l'outil create-react-app facilite énormément la création d'applications React en une seule commande! Enfin, nous expliquons comment configurer une application React via la ligne de commande complètement à partir de rien, à l'ancienne.
Chaque méthode de configuration a sa place, et il n'y a pas d'approche unique «meilleure», juste des alternatives en fonction de vos besoins.
React est une bibliothèque fantastique pour créer des applications Web, et c'est aussi très amusant! Examinons maintenant les conditions préalables du didacticiel pour vous assurer que vous êtes à jour.
La méthode la plus simple pour configurer une application React ne nécessite rien de plus qu'une connexion Internet. Cependant, au fur et à mesure que nous évoluerons vers des configurations plus complexes, nous commencerons par configurer une application React complètement à partir de zéro. Par conséquent, une certaine connaissance des sujets suivants est recommandée.
Windows, macOS et Linux fournissent tous un accès aux outils de ligne de commande. Celles-ci sont largement utilisées dans le développement Web moderne pour la réalisation rapide et efficace de tâches complexes. Si vous n'avez aucune expérience de la ligne de commande pour effectuer des opérations telles que la gestion de fichiers / dossiers, l'installation d'outils, l'exécution de scripts, etc., vous devriez au moins perdre du temps à apprendre les bases..
Si vous faites du développement Web depuis un certain temps, il est probable que vous ayez au moins entendu parler de Node.js et de npm. Node.js a été créé à l'origine pour exécuter JavaScript sur le serveur, mais il est maintenant largement utilisé pour développer des applications Web, simplifier et automatiser des tâches courantes, le tout dans un seul environnement..
Il existe littéralement des centaines de milliers de modules Node.js disponibles, et npm a été présenté en tant que gestionnaire de packages dédié pour vous aider à installer, organiser et gérer tous les différents modules de votre application Web. Puisque npm est fourni avec Node.js, il vous suffit d'installer la dernière version de Node.js sur votre système pour le rendre disponible via votre ligne de commande..
Un niveau raisonnable de JavaScript est requis pour configurer et développer les applications React. Sinon, vous aurez certainement du mal à créer des applications React de toute profondeur ou complexité. Cela inclut certaines fonctionnalités de ES6 telles que les fonctions de flèche, les classes et les modules. Je vous recommande de mettre à jour vos compétences en JavaScript si nécessaire avant de développer une application React..
Cette série de didacticiels se concentre sur la configuration d'applications React plutôt que sur leur développement. Nous n'allons donc pas approfondir les sujets spécifiques à React, tels que les composants, les accessoires et l'état. Cependant, il est judicieux de disposer de connaissances de base sur ces éléments. Dans la section suivante, nous aborderons les fonctionnalités de base de React et étudierons comment toutes les parties s'emboîtent pour former une application opérationnelle..
Avant de plonger dans notre première méthode de configuration, faisons un tour rapide de React lui-même..
À la base, React comporte trois caractéristiques fondamentales qui composent la plupart des applications. Ceux-ci sont:
Ce sont les fonctionnalités clés que vous devez maîtriser pour écrire des applications React efficaces. Une fois que vous avez atteint ce stade, vous serez très bien préparé pour plonger beaucoup plus profondément dans React et développer des applications plus complexes..
Vous pourriez être agréablement surpris de constater que les composants, les accessoires et l'état de React ne sont pas si difficiles à comprendre. Mon expérience personnelle a été que le processus d'installation de React était plus difficile que d'apprendre React lui-même!
Les blocs de construction de toute application React sont des composants. Considérez-les comme des blocs de code réutilisables qui encapsulent les balises, le comportement et les styles. Ils peuvent également être imbriqués les uns dans les autres, ce qui les rend hautement réutilisables. Par exemple, vous pourriez avoir un
Pour faciliter la construction de composants, JSX a été créé pour donner aux composants une structure similaire à HTML. Si vous êtes familier avec HTML ou XML, vous maîtriserez JSX pour créer des composants. Il convient de noter que vous n'êtes pas obligé d'utiliser JSX dans React, mais il est désormais devenu le moyen standard accepté de définir des composants..
Les accessoires vous permettent de transmettre des informations entre les composants. Et dans React, les informations ne peuvent être transmises que par les accessoires des composants parents aux composants enfants..
Si vous choisissez d'utiliser JSX dans vos définitions de composant (et je vous le recommande vivement), la définition d'accessoires sur un composant est remarquablement similaire à l'ajout d'attributs HTML. C'est l'une des raisons pour lesquelles JSX est si populaire! La possibilité d'utiliser une syntaxe de type HTML pour les composants et les accessoires de React facilite très rapidement l'échafaudage de votre application..
Regardons de plus près notre
D'abord, voici le
la classe BookIndex étend React.Component render () return ()Liste de tous les livres
Ensuite, à l'intérieur de chaque
La classe Book étend React.Component render () return ()this.props.title
Auteur: this.props.author
Publié: this.props.published
Si la syntaxe ci-dessus pour la création de composants React semble étrange, ne vous inquiétez pas, c'est assez simple. Une classe ES6 étend la classe de composant de base, puis une méthode de rendu (obligatoire) gère la sortie du composant..
State nous permet de garder une trace de toutes les données dans une application React. Nous devons être en mesure de mettre à jour l'interface utilisateur chaque fois que quelque chose change, et state le gère pour nous. À chaque changement d'état, React est suffisamment intelligent pour savoir quelles parties de votre application nécessitent une mise à jour. Cela rend React très rapide car il ne fera que mettre à jour les pièces qui ont changé.
L'état est généralement appliqué au composant de niveau supérieur de votre application React, de sorte qu'il est disponible pour chaque composant enfant afin de consommer les données d'état selon les besoins..
Voilà pour notre visite éclair de React. Il est loin d'être exhaustif et vous devez en apprendre beaucoup plus avant de pouvoir créer des applications complexes à part entière, mais la compréhension des composants, des accessoires et de l'état vous donnera une solide longueur d'avance..
Dans ce tutoriel, nous avons jeté les bases pour apprendre à configurer un environnement React. Le reste de cette série de didacticiels se concentre sur les méthodes spécifiques nécessaires à cette fin. Nous couvrirons les méthodes d'installation allant des méthodes les plus simples aux plus complexes nécessitant une configuration manuelle..
Dans le prochain didacticiel, nous allons commencer par examiner l'utilisation de CodePen, un éditeur de code en ligne, pour configurer une application React en quelques clics de souris. C’est de loin le moyen le plus simple et le plus rapide d’obtenir du code dans React.!
Accentsconagua