Pour que cette pièce jointe trouve un projet de départ, ce projet de départ a été créé avec l'application Create
React, un outil créé par l'équipe React.
En fin de compte, ce qui facilite la création de nouveaux projets React et nous donne une structure de projet comme celle-ci.
Je l'ai ajusté un peu, mais en général c'est exactement la même chose que vous obtiendriez avec cet outil.
Maintenant, pourquoi avons-nous besoin d'un tel outil?
Pourquoi ne pas simplement importer un script dans notre H.
Fichier HTML et commencer?
Parce que React est un peu plus complexe que le JavaScript vanille.
En fin de compte, nous expédions du code JavaScript vanille, mais la façon dont nous écrivons dans le code est un peu plus pratique pour nous
en tant que développeur.
Nous pouvons utiliser certaines fonctionnalités qui ne fonctionneraient pas dans le navigateur et, par conséquent, cette configuration de projet
comprend quelques outils inclus qui prennent le code que nous écrivons en tant que développeur et le convertissent réellement en code
qui s'exécute dans un navigateur.
Avons-nous donc Neuroma, le code qui est exécuté dans le navigateur?
Mais nous avons plus de facilité à écrire ce code en tant que développeur.
De plus, nous obtenons un serveur de développement, qui est un simple serveur qui sert notre application frontale, donc qui
n'a pas d'arrière-plan et ne sert que cette application frontale et qui recharge ou injecte automatiquement les modifications
chaque fois que nous changeons et enregistrons quelque chose dans l'une de nos sources. fichiers de code.
De plus, ici avec REACT, nous construisons une application d'une seule page.
Ce n'est pas un must, mais c'est un choix courant dans une application d'une seule page.
Vous n'avez qu'un seul fichier H Timal, qui à la fin est renvoyé par le serveur desservant cette application.
Dans ce cas, ce fichier Timmo d'âge, qui lui-même est relativement vide.
Mais ce fichier comprendra ensuite les importations de script.
Ils seront ajoutés automatiquement par ces outils que j'ai mentionnés plus tôt, qui à la fin hébergent et
exécutent notre application React, que nous avons à notre tour ici dans le dossier source avec nos fichiers que
nous avons obtenus afin que nous ayons finalement une application Web de Front End, qui se compose d'un fichier h html
où Denn JavaScript est utilisé pour rendre quelque chose à l'écran et restituer ce quelque chose à l'écran lorsque cela
est nécessaire.
Et cela nous permet de construire des interfaces utilisateur modernes très réactives où tout se passe instantanément car JavaScript
s'exécute sur le navigateur, les choses se produisent instantanément.
Nous n'avons pas besoin d'attendre qu'un nouveau fichier en L soit téléchargé depuis un serveur.
C'est que tout est déjà là.
Ainsi, lorsqu'un utilisateur clique sur un bouton et que nous voulons afficher une boîte à l'écran en réponse à ce boom des clics,
cela se produit instantanément en raison de JavaScript.
C'est le sentiment que nous voulons donner.
Nous pouvons le faire en réagissant maintenant.
Assez parlé de la théorie.
Écrivons du code.
Comme je l'ai mentionné, nous le faisons ici dans le dossier source où nous trouvons un indexé sur son fichier
dans le fichier Chase de l'application, deux fichiers très simples.
Voyons maintenant le téléphone indexé.
Voilà, nous avons quelques importations en haut.
C'est d'ailleurs la façon dont vous importez du code sur le front-end.
Importez quelque chose, puis Śiva un chemin relatif vers votre propre fichier.
Ou s'il s'agit d'un package tiers, juste un nom de package.
Et puis ici, nous avons des importations à partir de nos propres fichiers avec un chemin d'accès relatif.
Comme je l'ai mentionné alors ici, nous exécutons une commande à la fin.
React Dom render.
Maintenant, cela vient de l'objet React Dom ici à la fin, que nous importons
de la bibliothèque React Arm, et cela rend cette chose étrange, qui n'est pas du JavaScript normal.
C'est toi.
Cela joue sur notre H. M. page.
Il s'agit de JavaScript standard.
Et ici, nous sélectionnons l'élément avec une idée de racine.
Si nous jetons un œil à notre fichier HGL unique, c'est ce Dave ici.
Donc, les données sont à la fin où notre application de page unique réagira sera hébergée à deux.
Et ils sont prêts à réagir, prendront le relais et rendront tout à cet endroit.
Voilà donc ce que nous faisons ici.
Mais quelle est cette chose étrange pour papa?
Nous devons comprendre quels sont les composants et comment fonctionne React.