Tutoriel React Intermédiaire : 3 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:06

Tutoriel Intermédiaire React

Voir le produit fini ici.

Qu'allez-vous apprendre ?

Vous créerez une liste de tâches simple avec React.js et découvrirez les parties les plus compliquées de React. Les prérequis (fortement recommandés) complètent le guide de démarrage de react.js. Une connaissance du HTMLUne connaissance des commandes CSS de baseConnaissance correcte de JavaScript

Fournitures

Tous les logiciels seront couverts dans le tutoriel.

Vous aurez besoin d'un ordinateur avec les logiciels suivants installés:

• npm/fil
• Un IDE qui prend en charge js
• Un navigateur Internet

Étape 1: Tutoriel React Intermediate

Commencer

Pourquoi React.js ?

Avec React.js, il s'agit de réutiliser le code. Par exemple, supposons que vous ayez une barre de navigation sur 100 pages. Si vous devez ajouter une nouvelle page, vous devez modifier la barre de navigation sur chaque page, ce qui signifie que vous devez faire la même chose pour 100 pages. Même avec des macros, cela devient très fastidieux.

Installation des logiciels/packages requis

Tu auras besoin de:

npm/fil

Comment installer:

1. Allez installer le dernier LTS de Node.js
2. FACULTATIF: si vous préférez fil comme gestionnaire de paquets, installez fil en tapant dans powershell npm install -g fil
3. Ouvrez powershell/cmd.exe
4. Accédez au répertoire dans lequel vous souhaitez créer votre projet
5. Tapez npx create-react-app.

Vous avez terminé la phase de configuration. pour le tester, ouvrez powershell, accédez au répertoire de votre projet et tapez npm start. vous devriez obtenir une page Web chargée sur votre navigateur par défaut.

Étape 2: Étape 1: Mise en route

Pour commencer, supprimez les fichiers suivants de votre répertoire /src:

• App.test.js
• index.css
• logo.svg
• serviceWorker.js
• setupTests.js

Nous n'avons pas besoin de ces fichiers.

Organisons également notre système de fichiers. Créez ces répertoires dans /src/:

• js
• css

placez App.js dans le répertoire js et App.css dans le répertoire css.

Ensuite, réorganisons les dépendances.

dans index.js, supprimez les importations pour serviceWorker et index.css. Supprimez serviceWorker.register(). Reroutez les chemins pour App.

dans App.js, supprimez l'importation de logo.svg, car nous n'en avons plus besoin. Rediriger App.css. supprimez la fonction App() et l'export pour App.

Dans React, nous avons 2 façons de définir des éléments. Nous avons des fonctions et des classes. les fonctions sont pour les éléments moins compliqués, et les classes sont généralement pour les composants plus compliqués. Parce qu'une liste de tâches est plus compliquée qu'un tas de HTML, nous utiliserons la syntaxe de classe.

Ajoutez ceci à votre code:

pastebin.com/nGXeCpaH

le html ira dans les 2 divs.

définissons l'élément.

pastebin.com/amjd0jnb

remarquez comment nous avons défini la valeur dans l'état. Nous en aurons besoin plus tard.

dans la fonction de rendu, remplacez hi par {this.state.value}

nous rendons la valeur transmise à partir de l'état que nous avons défini.

alors testons-le !

dans la fonction de rendu de l'App, remplacez-le par ceci:

pastebin.com/aGLX4jVE

il doit afficher une valeur: "test".

voyons si nous pouvons rendre plusieurs tâches !

au lieu de faire en sorte que React restitue un seul élément, nous pouvons créer un tableau de et dire à réagir de restituer le tableau à la place.

changez la fonction de rendu de par ceci:

pastebin.com/05nqsw71

cela devrait rendre 10 tâches différentes. Remarquez comment nous avons ajouté des clés. Ces clés sont utilisées comme identifiants pour réagir et nous, si nous en avons besoin.

Maintenant que notre liste de tâches fonctionne, nous trouvons un moyen de charger les tâches. C'est là qu'intervient notre État.

ajoutons un constructeur à notre.

pastebin.com/9jHAz2AS

Dans ce constructeur, nous avons déplacé le taskArray de la fonction de rendu vers l'état. supprimez le taskArray et la boucle for dans la fonction de rendu. changez le taskArray dans le div en this.state.taskArray.

À présent, votre code App.js devrait ressembler à ceci:

pastebin.com/1iNtUnE6

Étape 3: Ajout d'un moyen d'ajouter et de supprimer des objets

Ajoutons un moyen d'ajouter et de supprimer des objets. Planifions-le.

De quoi avons nous besoin?

• Un moyen pour l'utilisateur d'ajouter des objets
• Un endroit pour stocker des objets
• Un moyen de récupérer les objets

Qu'allons-nous utiliser ?

• Un élément
• L'API de stockage local avec JSON

Commençons par l'élément input.

ci-dessous {this.state.taskArray}, ajoutez une entrée et un bouton à votre code

Ajouter

Il devrait y avoir une entrée de texte et un bouton Ajouter maintenant.

Cela ne fait rien pour le moment, ajoutons donc 6 méthodes à notre méthode App.

Nous avons besoin d'une méthode pour quand le bouton est cliqué, et aussi quand quelqu'un tape l'entrée. Nous avons également besoin d'un moyen de générer le tableau des tâches, ainsi que d'enregistrer, de charger et de supprimer des tâches.

ajoutons ces 6 méthodes:

boutonClic()

inputTyped(evt)

generateTaskArray()

enregistrerTâches(tâches)

getTasks()

removeTask(id)

ajoutons également cette variable à notre état:

saisir

Nous devons également lier nos fonctions à cela.

pastebin.com/syx465hD

Commençons par ajouter des fonctionnalités.

ajoutez 2 attributs au like ainsi:

cela fait en sorte que lorsque l'utilisateur tape quelque chose dans l'entrée, il exécute la fonction.

ajoutez un attribut onClick à l'ajout comme ceci:

Ajouter

lorsque l'utilisateur clique sur le bouton, la fonction s'exécute.

maintenant que la partie html est terminée, passons aux fonctionnalités.

J'ai déjà pré-écrit l'interface API localStorage, alors remplacez les fonctions saveTasks, getTasks et removeTask par ceci:

pastebin.com/G02cMPbi

commençons par la fonction inputTyped.

lorsque l'utilisateur tape, nous devons modifier la valeur interne de l'entrée.

faisons cela en utilisant la fonction setState fournie avec react.

this.setState({entrée: evt.target.value});

de cette façon, nous pouvons obtenir la valeur de l'entrée.

une fois cela fait, nous pouvons travailler sur la fonction buttonClick.

nous devons ajouter une tâche à la liste des tâches. nous extrayons d'abord la liste des tâches de localStorage, la modifions, puis l'enregistrons. Nous appelons ensuite un rendu de la taskList pour la mettre à jour.

var taskList = this.getTasks();

taskList.tasks.push(this.state.input);

this.saveTasks(taskList);

this.generateTaskArray();

nous obtenons les tâches, poussons la valeur d'entrée dans les tâches, puis l'enregistrons. Nous générons ensuite le tableau des tâches.

maintenant, travaillons sur la fonction generateTaskArray().

nous devons le faire:

• obtenir des tâches
• créer un tableau de composants de tâche
• passer les composants de la tâche à rendre

nous pouvons obtenir les tâches et les stocker dans une variable avec getTasks()

var tâches = getTasks().tasks

nous devons ensuite créer un tableau et le remplir.

pastebin.com/9gNXvNWe

ça devrait fonctionner maintenant.

CODE SOURCE:

github.com/bluninja1234/todo_list_instructables

IDÉES SUPPLÉMENTAIRES:

Fonction de suppression (très simple, ajoutez un onclick et supprimez en utilisant removeTask de l'index clé)

CSS (aussi simple, écrivez le vôtre ou utilisez bootstrap)