PC & Mobile

Création d'un projet Create React – Rees McDevitt – Medium

Création d'un projet Create React - Rees McDevitt - Medium


Donc, vous voulez créer un projet cool et branché de React? Eh bien, vous êtes au bon endroit.

Réagir (aussi connu sous le nom React.js ou ReactJS) est une bibliothèque JavaScript permettant de créer des interfaces utilisateur. Il est géré par Facebook et par une communauté de développeurs et d’entreprises. - Wikipedia (duh).

React est un excellent framework JavaScript qui s'appuie sur une communauté incroyable. Il ne cesse de croître et d’agrandir et React change la façon dont les gens du monde entier perçoivent Internet.

Dans cet article, je veux montrer comment créer une application React basique mais bien organisée, structurée et prête à l'emploi. Pour beaucoup (y compris moi-même) le résultat final de ce tutoriel peut être considéré comme un entrée, un squelette ou un passe-partout pour commencer un nouveau projet.

Prérequis et hypothèses

  • Une compréhension générale de la programmation, du développement Web et de JavaScript.
  • Dernière version de Yarn pour votre système d'exploitation.
  • Votre éditeur de texte préféré (j'utilise VS Code ou Atom, selon mon humeur).
  • Idéalement, un shell basé sur Unix (je vais utiliser iTerm2 sur Mac avec un ZSH) et une compréhension de base de son utilisation.

Création de l'application initiale

REMARQUE: Tout au long de ce tutoriel, je vous recommande de vérifier régulièrement si des erreurs sont renvoyées à la fois dans votre terminal et dans votre navigateur.

Tout d’abord, ouvrons notre shell préféré. Pour moi, j’utilise iTerm2 sur Mac. Si vous utilisez Windows, vous utiliserez peut-être Git Bash, et si vous utilisez Linux, je suppose que vous savez comment vous y retrouver. Terminal.

Depuis que nous avons installé Yarn, il est assez facile de lancer un projet de réaction. Cependant, vérifions simplement que nous avons correctement installé Yarn. Dans votre terminal, exécutez:

fil -v
1.15.2

Nous devrions voir ce qui précède, le nombre généré est la version du fil que nous avons installée. Si une erreur ou une ‘commande non trouvée’ est sortie, votre installation ou la configuration générale est perturbée.

Maintenant, commençons ce projet. Accédez à l'emplacement de votre projet et exécutez la commande:

fils créer react-app my-react-app

Cela créera le projet initial React. Lançons cette application maintenant et voyons à quoi elle ressemble. Déplacez-vous dans le dossier de projet que nous venons de créer et exécutez l'application.

cd mon-réaction-app
début de fil

Si nous allons à http: // localhost: 3000 / dans un navigateur, nous pouvons voir l’application de réaction initiale créée. Cela devrait ressembler à quelque chose comme ça.

Félicitations, nous l'avons fait! Mais cette application est ennuyeuse et nous n’avons encore rien fait pour la faire notre propre. Alors permet de jouer avec elle.

Faire une application bien structurée

Avant de commencer à creuser et à coder, organisons-nous. Notre structure de fichier actuelle ressemble probablement à ceci:

├── LISEZMOI.md
├── package.json
├── public
├── favicon.ico
├── ├── index.html
└── └── manifest.json
├── src
│ ├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
└── yarn.lock

Nous allons initialement créer trois dossiers à l’intérieur du src dossier.

  • Composants- Dans ce dossier Composants sera créé, nous pouvons définir des composants en tant que pièces d’interface utilisateur réutilisables et indépendantes.
  • des pages- Voici où nous allons créer Des pages pour cette application web, statique et dynamique. La distinction entre Composants et des pages est important. Des pages sera la vue complète qu'un utilisateur verra. Nous créons Composants il est donc plus facile de faire des pages et pour que nous ayons du code DRY. Généralement, nous utilisons des composants pour créer et organiser des pages. Notez que les pages elles-mêmes sont essentiellement des composants.
  • prestations de service- Notre dossier de service est l'endroit où nous allons créer de nombreux Prestations de service cela nous permettra d'extraire, de transformer et de stocker des données. Nous allons créer des services pour gérer différentes fonctionnalités dans notre application.

Créez ces dossiers dans votre éditeur de texte ou votre terminal. Maintenant notre src dossier devrait ressembler à ceci:

├── src
│ ├── App.css
├── App.js
├── App.test.js
├── composants
├── index.css
├── index.js
├── logo.svg
│ ├── pages
├── serviceWorker.js
└── services

Nous avons maintenant une structure de base à suivre avant de commencer à coder. Avant cela, nous ferons autre chose que nettoyer tout ce que nous avons créé à l'origine pour React.

Tout d'abord, nous pouvons supprimer le logo.svg puisque nous n’avons vraiment pas besoin d’un grand logo React. Ensuite, ouvrez App.js et voir le code à l'intérieur, il devrait ressembler à ceci:

App.js

Nous allons supprimer un tas de contenu ici pour faire sortir App.js ressemble à ca:

App.js

Si nous vérifions notre application maintenant, elle devrait ressembler à ceci.

Bien que cela soit moins stylé et animé que l’application initiale, nous pouvons maintenant commencer à créer quelque chose qui nous soit propre.

Construisons

Notre routeur

Nous allons installer et configurer le routeur pour notre application. Cela permettra aux utilisateurs de naviguer facilement dans les pages de notre application. Arrêtons notre serveur de développement et, dans le répertoire racine du projet, exécutons cette installation:

fils ajouter react-router-dom

Ce paquet est React Router, qui depuis quelques temps est devenu un standard pour React. Avec cela installé, nous pouvons le configurer dans notre application. Regardons notre index.js fichier:

index.js

Nous allons envelopper notre App composant avec un routeur, en particulier un navigateur de navigateur, vous pouvez vous pencher davantage sur les avantages d’un routeur de navigateur dans la documentation de React Router. Après avoir mis à jour index.js avec notre routeur cela devrait ressembler à ceci:

index.js

Génial! Maintenant, notre routeur est configuré pour notre application! Créons quelques composants pour rendre notre vie plus facile.

Quelques composants de base

Premièrement, nous allons créer deux composants dans notre Composants dossier:

├── composants
├── ├── En-tête
│ └── Header.js
│ └── Main
└── Main.js

Notez que j'ai créé un dossier pour chaque composant, puis ajouté le fichier JavaScript dans celui-ci. Cela sera utile plus tard.

Notre Principale composante sera où différentes pages finiront vivre, alors que notre Entête composant existera sur chaque page (au moins pour cette application).

Ici, je vais créer des composants basés sur des fonctions, car ils sont légers et rapides à créer (pour en savoir plus sur les composants basés sur les fonctions et leurs classes homologues ici).

Mais avant de créer ces composants, mettons à jour notre App.js:

App.js

Voir nous avons ajouté les deux composants à notre App composant. Créons maintenant le Entête et Principale nous n’avons donc pas d’erreurs:

composants / Header / Header.js
composant / Main / Main.js

Regardons notre application maintenant:

Cela semble plutôt bien maintenant, mais cela ne fait toujours pas grand chose. Essayons de créer des pages et de naviguer entre elles.

Création de pages

Par souci de ce tutoriel, je vais seulement créer deux pages différentes pour naviguer: un Accueil page et un Utilisateur page de modèle. Notre Accueil Cette page affiche une liste des utilisateurs que nous allons extraire de certaines API (dans ce cas, https://jsonplaceholder.typicode.com/users/). Lorsque l’un de ces utilisateurs est cliqué, nous allons naviguer vers le Utilisateur modèle de page où leurs données seront affichées.

Tout d'abord, nous allons créer la structure de base de ces pages et créer nos itinéraires pour chacune d'elles. J'ai choisi d'utiliser des composants basés sur des classes pour les pages, et j'ai tendance à utiliser des composants basés sur des classes (plutôt que sur des fonctions) pour les pages car de nombreuses pages ont souvent besoin de gérer l'état. En savoir plus sur l'état ici.

Donc, après avoir créé nos fichiers, notre structure ressemblera à ceci:

├── pages
├── ├── Accueil
│ └── Home.js
│ └── UserPage
└── UserPage.js

Remarquez à nouveau que j'ai créé des dossiers pour chaque page, à l'instar des composants précédents. Une fois que ceux-ci sont créés, ajoutons notre code initial à chaque page. Les deux seront généralement les mêmes mais noterez les légères différences entre les deux:

pages / Home / Home.js
pages / UserPage / UserPage.js

Quelques choses se passent dans ces deux pages. Nous initialisons la classe ' constructeur où nous définissons notre état initial. Ensuite, notre composantDidMount La fonction est appelée et se déclenche lorsque cette page est montée. Il enregistrera le nom de la page dans la console de notre navigateur (ainsi que l’identifiant de notre serveur). Page utilisateur). Enfin, notre rendre fonction est où notre marquage réel sera affiché. J'ai lié les définitions de chacune de ces méthodes. Veuillez les examiner pour mieux comprendre leur fonctionnement.

Enfin, mettons à jour notre Principale composant afin que nous puissions correctement acheminer nos pages.

composants / Main / Main.js

À l'intérieur de notre Principale composant, nous créons deux itinéraires, un pour notre Page d'accueil et un autre pour notre Page utilisateur (notez que ce chemin prend une variable id). Maintenant, nous pouvons créer des liens vers chaque page!

Assurez-vous qu'après tout cela votre projet se construit correctement et vérifiez vos pages (http: // localhost: 3000 / et http: // localhost: 3000 / user / 1)!

Créer un service et le mettre en œuvre

Lorsque nous avons commencé à créer des pages, nous avons dit qu’elles afficheraient des données extraites quelque part. Pour ce faire, nous allons créer un service qui gérera nos demandes, puis les reliera au sein de nos pages. Pour commencer, nous installerons Axios, un client HTTP populaire pour React.

fils ajouter axios

Redémarrez votre serveur de développement et nous pouvons maintenant créer facilement ce service. Même exploration que précédemment, créons un dossier pour le service appelé UserService et un fichier JavaScript correspondant à l'intérieur.

└── services
└── UserService
└── UserService.js

Dans ce fichier, nous pouvons créer la demande réelle pour notre application. Nous allons utiliser la documentation Axios pour voir comment leur paquet gère les requêtes, puis récupérons des données! Comme je l’ai déjà dit, nous obtiendrons des données à partir de https://jsonplaceholder.typicode.com/users/ (vous pouvez visiter ce lien pour voir la réponse que nous aurons). Ci-dessous, j'ai créé des fonctions pour effectuer des requêtes GET sur ce noeud final.

services / UserService.js

Ici, j'ai créé une classe qui contiendra toutes les fonctions concernant les utilisateurs. Deux fonctions ont été créées, une pour récupérer tous les utilisateurs et une autre pour un seul identifiant.

Maintenant, nous pouvons réellement implémenter ces méthodes dans nos pages et afficher les données récupérées. Voici notre mise à jour Page d'accueil:

pages / Home / Home.js

Voir que nous initialisons ici notre UserService dans notre constructeur, puis en récupérant tous les utilisateurs lorsque le composant est monté et en affichant chaque utilisateur de notre rendre (et renderUsers) une fonction. Notez que le renderUser fonction a été créée, j’ai fait cela pour que plus tard notre rendre la fonction est moins encombrée.

Nous pouvons mettre à jour notre UserPage aussi:

pages / UserPage / UserPage.js

Cette page est assez similaire à notre Page d'accueil mais notez quelques différences clés. Notez que notre constructeur prend en les accessoires, nous le faisons parce que nous introduisons des propriétés dans le composant tel que le paramètre URL id.

Après toutes nos modifications construites et nous nous assurons que nous n'avons aucune erreur permet de consulter notre application!

Navigation vers la page d'accueil et en cliquant sur Pages utilisateur

C'est plutôt cool! Nous avons créé une application multi-pages qui récupère les données d'un autre endroit! Et pour couronner le tout, notre code est bien organisé!

Le style préféré de tous

Bien que je ne veuille pas consacrer beaucoup de temps à la création de styles, je pense que cela a une importance pour certains pendant que nous sommes ici. Nous avons commencé par créer nos fichiers. Voici la structure de fichiers mise à jour:

├── composants
├── ├── En-tête
├── │ ├── Header.css
│ └── Header.js
│ └── Main
.C ├── Main.css
└── Main.js

J'espère que vous comprenez maintenant pourquoi nous avons initialement créé des sous-dossiers pour chaque composant. En faisant en sorte que notre application ait une portée locale, cela permet à notre application d'être encore plus organisée, en particulier lorsqu'elle évolue.

REMARQUE: il se peut que d'autres éléments soient ajoutés à ces sous-dossiers, tels que Test pour les composants, les pages ou les services.

Voici le style que j'ai ajouté:

composants / en-tête / en-tête.css
composants / Main / Main.css

Bien que cela ne soit en aucun cas idéal en termes de style et de convention CSS, le travail sera fait pour le moment. Pour réellement implémenter les styles, nous devons également importer ces fichiers dans chaque composant. Voir ci-dessous:

composants / Header / Header.js
composants / Main / Main.css

C'était assez facile! Je suis aussi allé créer une classe CSS appelée "lien" si vous avez remarqué ci-dessus. J'ai ajouté ceci aux liens dans notre Page d'accueil

pages / Home / Home.js

Hou la la! Ce n’était pas très esthétique, mais regardons notre application maintenant! Ci-dessous est notre Page d'accueil:

Et voici notre page utilisateur:

Cela a l'air génial! C'est assez simple, mais le travail est fait. Évidemment, plus de style peut être ajouté, mais pour le moment, cela ira.

Emballer

Regarde ça! Nous avons créé une application Web React simple mais complexe qui fait des choses cool! Bien que ce tutoriel ne couvre que les bases de base pour créer une application React. Mais en créant cette application comme nous l'avions fait, il est facile d'ajouter, de modifier et de supprimer des fonctionnalités au sein de nos applications. L'ajout de tests avec Jest, SCSS, TypeScript, etc. est tout ce que nous pourrions faire pour améliorer notre application que nous venons de créer (et peut-être qu'un jour, je parviendrai à créer un tutoriel pour ces applications).

Le code créé pour cette application est disponible sur mon GitHub pour votre commodité! Honnêtement, je clone ce projet pour pouvoir démarrer les projets React plus rapidement et me sentir libre de faire de même!

Show More

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Related Articles

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Close
Close