30 Days Of React
1.0.0
Apprenez avec Asabeneh en rejoignant le prochain bootcamp de codage
Auteur: Asabeneh YEAYEH
Octobre 2020
Jour 1 >>
| # Jour | Sujets |
|---|---|
| 00 | Introduction Comment utiliser Repo Exigences Installation |
| 01 | Rafraîchissement JavaScript |
| 02 | Pour commencer, réagir |
| 03 | Mise en place |
| 04 | Composants |
| 05 | Accessoires |
| 06 | Liste, carte et clés |
| 07 | Composants de classe |
| 08 | États |
| 09 | Rendu conditionnel |
| 10 | REACT STRUCTURE DES DOSSIERS PROJET |
| 11 | Événements |
| 12 | Formes |
| 13 | Composant contrôlé et incontrôlé |
| 14 | Cycles de vie des composants |
| 15 | Forfaits tiers |
| 16 | Composants d'ordre supérieur |
| 17 | Routeur de réact |
| 18 | Récupérer versus axios |
| 19 | Projets |
| 20 | Projets |
| 21 | Crochets |
| 22 | Formulaires à l'aide de crochet |
| 23 | Rechercher des données à l'aide de crochets |
| 24 | Projet en utilisant des crochets |
| 25 | Crochets personnalisés |
| 26 | Contexte |
| 27 | Référence |
| 28 | projet |
| 29 | Explorer |
| 30 | Conclusions |
??? Codage heureux ???
Félicitations pour avoir décidé de participer à 30 jours de défi de programmation React. Dans ce défi, vous apprendrez tout ce que vous devez utiliser pour développer une application React. À la fin du défi, vous obtiendrez un certificat d'achèvement du défi de programmation de 30 jours. Si vous avez besoin d'aide ou si vous souhaitez aider les autres, vous pouvez rejoindre le groupe Telegram.
Un défi de 30 jours de la réact est un guide pour les débutants et les développeurs avancés JavaScript et React. Bienvenue dans 30 jours de réact. React est une bibliothèque JavaScript. J'aime utiliser et enseigner la réaction et j'espère que vous le ferez aussi. Dans ce défi React 30 jours étape par étape, vous apprendrez React qui est l'une des bibliothèques JavaScript d'interface utilisateur les plus populaires. React peut faire tout ce que JavaScript peut faire. React peut être utilisé pour ajouter de l'interactivité aux sites Web, pour développer des applications mobiles, des applications de bureau, des jeux . Je crois que vous en apprendrez beaucoup au cours des 30 prochains jours et que vos compétences en programmation et en résolution de problèmes seront également considérablement améliorées.
J'utiliserai l'anglais conversationnel et moins de jargons pour rédiger ce défi. Le contenu sera constamment mis à jour. Si vous trouvez une faute de frappe ou de grammaire, ne soyez pas surpris car je ne fais aucune preuve de lecture avant de la publier. Je vous recommande de vous concentrer sur le message principal du défi au lieu de l'anglais et de quelques erreurs mineures. J'apprécie vraiment si vous m'envoyez des demandes d'amélioration de traction et n'oubliez pas de tirer d'abord de Master avant d'envoyer des demandes de traction. La plupart des images que j'ai utilisées dans ce défi proviennent du défi de 30 joursofjavascript, vous devrez peut-être renommer les noms de fichiers et les dossiers 30Daysofreact. Si vous êtes bon dans les tableaux, les boucles, les fonctions, les objets, la programmation fonctionnelle, la destructeur et la propagation et la classe, vous pourrez suivre correctement le défi. Sinon, je vous recommande fortement de consulter 30DaysOfJavaScript.
Avant de plonger dans ce cours, vous pouvez vérifier l'examen de 30 jours de réaction.
Ce défi est facile à lire, écrit en anglais conversationnel, engageant, motivant et en même temps, il est très exigeant. Vous devez allouer beaucoup de temps pour terminer ce défi. Si vous êtes un apprenant visuel, vous pouvez obtenir la leçon vidéo sur la chaîne YouTube Washera. Abonnez-vous à la chaîne, commentez et posez des questions sur les vides YouTube et soyez proactif, l'auteur finira par vous remarquer.
L'auteur aime entendre votre opinion sur le défi, partagez vos réflexions sur le défi de 30 jours de même. Vous pouvez laisser votre témoignage sur ce lien
Apprenez avec Asabeneh en rejoignant le prochain bootcamp de codage
Pour vous entendre avec le défi dont vous avez besoin pour avoir ce qui suit:
Mettez en vedette ce dépôt pour soutenir ce travail et débourser le dépôt pour créer votre propre copie à partir du travail.
Vous devez toujours travailler directement à partir de votre copie fourchue.
# note that an `ssh` link is used here, but an `https` link will work the same
git clone [email protected]:username/30-Days-Of-React.git
cd 30-Days-Of-ReactPour terminer les exercices quotidiens, ma suggestion est de créer une branche séparée pour abriter votre dossier d'exercice ou tout autre changement que vous apportez. Cela gardera votre branche maître propre à tout moment, ce qui signifie que votre maître sera toujours similaire au maître d'origine.
git checkout -b exercise-solutions # `-b` creates the branch if it does not existDans votre nouvelle branche, vous pouvez utiliser des fichiers / dossiers pour structurer vos solutions aux exercices quotidiens
mkdir -p solutions/day-01 # `-p` helps create nested directories
touch solutions/day-01/level1.js # touch creates a fileEngagez vos solutions à votre fourchette
git add solutions/day-01/level1.js
git commit -m " chore: exercise level1 complete "
git push origin exercise-solutions # branch `exercise-solutions` was created earlierCe dépôt sera mis à jour quotidiennement tout au long du mois. Lorsque le contenu d'une nouvelle journée devient disponible, vous pouvez mettre à jour votre copie fourchue avec les étapes ci-dessous.
# 1. switch to master branch
git checkout master
# 2. check if your local copy has a link to original `...Asabeneh/30-Days-Of-React.git`
git remote -v
# 3. if not, add a link to original, you can choose any name for the link or use `upstream`
git remote add upstream [email protected]:Asabeneh/30-Days-Of-React.git
# 4. check again to confirm link added
git remote -v
# 5. now you can fetch updates from original repo, assuming you named this `upstream`
git fetch upstream
# 6. merge the updates to your local master branch
git merge upstream/master master
# 7. push the merged updates to your Forked copy on GitHub
git push origin masterNotez que les mises à jour ne sont appliquées qu'à la branche principale. Si vous souhaitez mettre à jour une autre branche, répétez les étapes 6-7 avec le nom de la branche. Voir l'extrait ci-dessous pour la branche
exercise-solutions
git merge upstream/master exercise-solutions
git push origin exercise-solutionsJe crois que vous avez la motivation et un fort désir d'être un développeur, un ordinateur et Internet. En plus de ce niveau de base à intermédiaire HTML, CSS et JS. Si vous en avez, vous avez tout pour commencer.
Vous n'avez peut-être pas besoin de node.js pour le moment, mais vous en aurez peut-être besoin pour plus tard. Installez Node.js.
Après avoir téléchargé le double clic et l'installation
Nous pouvons vérifier si le nœud est installé sur notre machine locale en ouvrant notre borne de périphérique ou notre invite de commande.
asabeneh $ node -v
v12.14.0Lors de la réalisation de ce tutoriel, j'utilisais Node version 12.14.0, mais maintenant la version recommandée de Node.js pour le téléchargement est de 12.17.0.
Il existe de nombreux navigateurs. Cependant, je recommande fortement Google Chrome.
Installez Google Chrome si vous n'en avez pas encore. Nous pouvons écrire un petit code JavaScript sur la console du navigateur, mais nous n'utilisons pas la console du navigateur pour développer des applications.
Vous pouvez ouvrir Google Chrome Console soit en cliquant sur trois points dans le coin supérieur droit du navigateur, en sélectionnant plus d'outils -> des outils de développeur ou à l'aide d'un raccourci clavier. Je préfère utiliser les raccourcis.
Pour ouvrir la console Chrome à l'aide d'un raccourci clavier. Il est bon de connaître le raccourci aussi en tant que développeur JavaScript et réagi, vous passerez beaucoup de temps sur une console de navigateur et ne soyez pas paresseux pour l'ouvrir pendant le développement.
Mac
Command+Option+J
Windows/Linux:
Ctl+Shift+J
Après avoir ouvert la console Google Chrome, essayez d'explorer les boutons marqués. Nous passerons la plupart du temps sur la console. La console est l'endroit où va votre code JavaScript. Le moteur Google Console V8 modifie votre code JavaScript en code machine. Écrivons un code JavaScript sur la console Google Chrome:
Nous pouvons écrire n'importe quel code JavaScript sur la console Google ou n'importe quelle console de navigateur. Cependant, pour ce défi, nous nous concentrons uniquement sur la console Google Chrome. Ouvrez la console en utilisant:
Mac
Command+Option+I
Windows:
Ctl+Shift+IPour écrire notre premier code JavaScript, nous avons utilisé une fonction de fonction intégrée.log () . Nous avons passé un argument en tant que données d'entrée et la fonction affiche la sortie. Nous avons passé «Hello, World» en tant que données d'entrée ou argument dans la fonction console.log ().
console . log ( 'Hello, World!' ) La fonction Console.log () peut prendre plusieurs paramètres séparés par la virgule. La syntaxe ressemble à ce qui suit: Console.log (param1, param2, param3)
console . log ( 'Hello' , 'World' , '!' )
console . log ( 'HAPPY' , 'NEW' , 'YEAR' , 2020 )
console . log ( 'Welcome' , 'to' , 30 , 'Days' , 'Of' , 'JavaScript' )Comme vous pouvez le voir dans le code d'extrait ci-dessus, Console.log () peut prendre plusieurs arguments. Il est recommandé d'utiliser autant d'impressions Console.log () pour vérifier ce qui se passe dans votre code, mais ne gardez pas tous les tests Console.log () sur votre code pour toujours. Rendez votre vie facile en gardant la console du navigateur ouvert.
Nous ajoutons des commentaires à notre code. Les commentaires sont très importants pour rendre le code plus lisible et pour laisser des remarques dans notre code. JavaScript n'exécute pas la partie de commentaire de notre code.in javascript, toute ligne de texte commençant par // en javascript est un commentaire, et tout ce qui est enfermé comme celui-ci / * * / est également un commentaire.
Exemple: commentaire à ligne unique
// c'est le premier commentaire
// c'est le deuxième commentaire
// je suis un commentaire à ligne unique
Exemple: commentaire multiligne
/ * Ceci est un commentaire multiligne
Les commentaires multilines peuvent prendre plusieurs lignes
JavaScript est la langue du Web
* /
Les langages de programmation sont similaires aux langages humains. L'anglais ou bien d'autres langues utilisent des mots, des phrases, des phrases, des phrases composées et autres pour transmettre un message significatif. La signification anglaise de la syntaxe est la disposition des mots et des phrases pour créer des phrases bien formées dans une langue . La définition technique de la syntaxe est la structure des instructions dans un langage informatique. Les langages de programmation ont une syntaxe. JavaScript est un langage de programmation et, comme les autres langages de programmation, il a sa propre syntaxe. Si nous n'écrivons pas une syntaxe que JavaScript comprend, elle augmentera différents types d'erreurs. Nous explorerons différents types d'erreurs JavaScript plus tard. Pour l'instant, voyons les erreurs de syntaxe.
J'ai fait une erreur délibérée. En conséquence, la console augmente les erreurs de syntaxe. En fait, la syntaxe est très informative. Il informe le type d'erreur. En lisant la directive de rétroaction des erreurs, nous pouvons corriger la syntaxe et résoudre le problème. Le processus d'identification et de suppression des erreurs d'un programme est appelé débogage. Corrigeons les erreurs:
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' )Jusqu'à présent, nous avons vu comment afficher du texte à l'aide de la console.log () . Si nous imprimons du texte ou de la chaîne à l'aide de Console.log () , le texte doit être à l'intérieur des citations simples, des citations doubles ou des citations de backtic. Exemple:
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' )
console . log ( `Hello, World!` ) Maintenant, pratiquons plus d'écriture de codes JavaScript à l'aide de console.log () sur Google Chrome Console pour les types de données numériques. En plus du texte, nous pouvons également effectuer des calculs mathématiques à l'aide de JavaScript. Faisons les calculs simples suivants. La console peut prendre directement des arguments sans la fonction console.log () . Cependant, il est inclus dans cette introduction, car la plupart de ce défi aurait lieu dans un éditeur de texte où l'utilisation de la fonction serait obligatoire. Vous pouvez jouer directement avec des instructions sur la console.
console . log ( 2 + 3 ) // Addition
console . log ( 3 - 2 ) // Subtraction
console . log ( 2 * 3 ) // Multiplication
console . log ( 3 / 2 ) // Division
console . log ( 3 % 2 ) // Modulus - finding remainder
console . log ( 3 ** 2 ) // Exponentiation 3 ** 2 == 3 * 3Nous pouvons écrire nos codes sur la console du navigateur, mais cela ne fera pas de plus gros projets. Dans un environnement de travail réel, les développeurs utilisent différents éditeurs de code pour écrire leurs codes. Dans ce défi JavaScript de 30 jours, nous utiliserons Visual Studio Code.
Visual Studio Code est un éditeur de texte open source très populaire. Je recommanderais de télécharger Visual Studio Code, mais si vous êtes en faveur d'autres éditeurs, n'hésitez pas à suivre ce que vous avez.
Si vous avez installé Visual Studio Code, commençons à l'utiliser.
Ouvrez le code Visual Studio en double-cliquant sur son icône. Lorsque vous l'ouvrez, vous obtiendrez ce type d'interface. Essayez d'interagir avec les icônes étiquetées.
Félicitations! Vous avez terminé la configuration dont vous avez besoin pour démarrer avec React, mais avant de plonger dans React, faisons un rafraîchissement JavaScript. Si vous êtes très à l'aise avec JavaScript, vous pouvez sauter un rafraîchissement JavaScript du jour 1. La section de rafraîchissement JavaScript est vaste et cela peut prendre plus d'une journée. D'après mon expérience, les gens sont généralement coincés dans React, car leurs connaissances JavaScript sont très superficielles donc pour combler cet écart toutes les fonctionnalités JavaScript nécessaires qui peuvent être utilisées dans React sont couvertes dans la section de rafraîchissement JavaScript. Il y a beaucoup d'exercices mais vous n'êtes pas tenu de les résoudre. Cliquez ici si vous souhaitez sauter JavaScript et sautez directement dans React.
? Félicitations! ?
Jour 1 >>
