Lancez votre parcours React : comment créer votre première application React !

React est une bibliothèque JavaScript open source créée par Jordan Walke, ingénieur logiciel chez Meta. Il est utilisé pour créer des composants d'interface utilisateur (UI) sur des applications d'une seule page. React a été utilisé pour la première fois dans les fils d'actualité de Facebook en 2011, puis ajouté à Instagram après que Facebook a acheté l'application en 2012. Elle a été rendue publique sous une licence open source fin 2013 et a gagné en popularité. React est la bibliothèque JavaScript la plus utilisée, avec plus de 40 % des développeurs qui l'utilisent, selon une enquête Stack Overflow de l'année dernière.

Pourquoi React est-il si populaire ?

Interrogez un développeur Web sur les avantages de l'utilisation de ses services et vous obtiendrez une longue liste en réponse. Ils parlent des composants, The Virtual DOM, JSX et One-Way Data Binding. Cette chose facilite la vie des développeurs. C'est pourquoi React est si populaire parmi les développeurs Web

Configuration de l'environnement

Nous comprenons maintenant ce qu'est React et pourquoi il est si populaire.

Passons en revue le processus de configuration de l'environnement pour exécuter React sur notre machine locale.

Tout d’abord, ouvrez votre navigateur Web préféré et recherchez Node.js. Une fois que vous avez trouvé le site Web officiel de Node.js, accédez à l'onglet de téléchargement et choisissez le fichier Node.js approprié en fonction du système d'exploitation et de l'architecture de votre ordinateur (32 bits/64 bits). Après avoir téléchargé le fichier, exécutez-le et procédez à l'installation de Node.js sur votre ordinateur local. Pour vérifier que Node.js est correctement installé sur votre machine, ouvrez votre terminal et exécutez les commandes suivantes :

node -v
npm -v

S'ils donnent leur version, cela signifie que Node.js est installé avec succès.

Créer un projet React

Pour configurer un projet React, ouvrez votre navigateur Web préféré et recherchez « Vite ». Visitez le site officiel de Vite et copiez la commande "npm create vite@latest". Ensuite, collez cette commande dans votre terminal. Il vous sera demandé de fournir certaines informations telles que le nom de votre projet, votre bibliothèque et la langue préférée pour la bibliothèque React. Une fois que vous avez répondu aux questions, accédez au dossier de votre projet et ouvrez le terminal dans ce dossier. Exécutez la commande "npm i" pour télécharger les packages requis. Pour exécuter le projet, utilisez la commande "npm run dev" et le projet s'exécutera sur localhost:5137. Félicitations! Vous avez mis en place avec succès votre premier projet. ?

Comprendre la structure des fichiers

Après avoir configuré le projet React, ouvrez-le dans votre éditeur de code préféré. Une fois que vous ouvrez le projet, vous verrez quelques fichiers et dossiers. Vous trouverez le fichier index.html, qui est le fichier principal permettant de restituer votre HTML dans le navigateur Web. Dans le dossier src, vous pouvez créer des dossiers et des fichiers pour que votre application Web fonctionne et ressemble à ce que vous souhaitez. Il existe deux fichiers principaux : main.js, qui est responsable du rendu des composants dans React, et app.js, qui sert de point d'entrée pour les composants.

Conclusion

Félicitations ! Vous venez de créer votre première application React à partir de zéro. Tout au long de ce parcours, vous avez appris à configurer votre environnement, à créer un projet à l'aide de Vite et à comprendre la structure des fichiers. La flexibilité de React et sa structure basée sur des composants en font un outil puissant pour créer des applications Web modernes et dynamiques. Maintenant que vous maîtrisez les bases, vous êtes prêt à explorer des fonctionnalités plus avancées et à faire passer vos compétences React au niveau supérieur. Continuez à expérimenter, à construire et à apprendre : les possibilités avec React sont infinies !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!