react exercise
1.0.0
Cet exercice est destiné à vous familiariser avec les concepts REACT fondamentaux d'une manière interactive, ainsi que pour que vous vous développiez dans un environnement Node.js moderne. Ce projet sera décomposé en plusieurs parties. Chaque partie couvrira un concept de réact / frontend fondamental.
Le Guide du débutant React et le Guide du débutant de React seront très bénéfiques à passer pour obtenir une compréhension complète des fondamentaux React. Il sera également avantageux de se plonger à l'aise dans React Docs et JavaScript Docs dans le cadre de cet exercice.
Installez le nœud et le npm ici.
Vérifiez si vous avez les versions correctes en exécutant les commandes suivantes dans votre terminal:
node -v
npm -v
Installez le React Devtools pour déboguer facilement et voir ce qui se passe dans votre application React.
Votre éditeur de texte peut ne pas prendre en charge nativement la syntaxe JSX qui est utilisée dans ce projet, mais il peut y avoir des plugins pour obtenir une mise en évidence de syntaxe appropriée. Par exemple, le texte sublime utilise le plugin Babel .
Tout d'abord, fourchez ce référentiel. Le bouton de la fourche en haut à droite. Ce que cela fait, c'est copier ce référentiel sur votre compte. Vous devriez maintenant avoir un référentiel avec le nom <yourusername>/react-exercise .
Cela devrait ressembler à ceci (mon nom d'utilisateur est Davidachang): 
Ensuite, clonez ce référentiel (cliquez sur le bouton vert disant "cloner ou télécharger", choisissez HTTP et copiez et collez-le à l'emplacement <url> ) et entrez-y:
$ git clone <url>
$ cd react-exercise
Installez les dépendances du projet:
npm install
Après cela, exécutez ceci pour démarrer le développement:
npm start
Cela commencera à exécuter l'application et à l'ouvrir automatiquement sur http: // localhost: 3000. Chaque fois que vous modifiez et enregistrez le code, il rechargera automatiquement! Cela restera un processus en cours d'exécution dans votre terminal, vous devrez donc ouvrir un nouvel onglet ou une nouvelle fenêtre pour exécuter d'autres commandes.
Plus joli est un outil qui reformate automatiquement votre code pour suivre un certain ensemble de directives de style de codage. Il est configuré pour s'exécuter automatiquement avant chaque engagement. Cela garantit que tout notre code suit les mêmes styles de code, appliquant de bonnes pratiques et minimisant les conflits.
Ce n'est certainement pas nécessaire pour cet exercice, mais il y a des plugins plus jolis que vous pouvez installer pour votre éditeur. Voir les instructions ici.
Objectif: familiarisez-vous avec la syntaxe JSX, la structure des composants et les accessoires de passage
Tâches:
shouldDisplayImage dans le composant Instructions qui détermine s'il faut afficher ou non l'astuce du logo H4I Objectif: familiarisez-vous avec les listes de rendu et les fonctions de tableau JavaScript
Tâches:
items dans le composant Instructions qui contient une liste de chaînesitemsfor ou while les bouclesObjectif: familiarisez-vous avec l'état des composants
Tâches:
Countercount initial sur 0Objectif: familiarisez-vous avec la saisie de l'utilisateur
Tâches:
App.js , faites une entrée et un bouton de soumission qui définit un état initialCountinitialCount en tant qu'hélice dans le composant Counter et utilisez cette valeur comme count initial dans le Counter . Assurez-vous de surveiller les types lorsque vous faites cela, car la saisie de l'utilisateur est une String et nous voulons envoyer un Number .<button type="button" ... Objectif: Comprendre la communication de l'État / des accessoires entre les composants frères et sœurs
Tâches:
input et de soumission dans son propre composant appelé InitialCountForm qui est un enfant du composant AppObjectif: familiarisez-vous avec CSS / SCSS et style
Tâches: Rien de spécifique, jouez avec le style!
Remarque: Vous pouvez créer des fichiers SCSS, et ils seront automatiquement compilés sur des fichiers CSS lorsque vous enregistrez, mais vous devez importer le fichier CSS dans votre composant.
Quelques ressources liées au style:
Le guide du débutant React
MDN - une réintroduction de JavaScript
Le guide du débutant pour réagir
Réagir les documents
Guide de style JavaScript d'Airbnb
Guide de style React d'Airbnb
Guide de style CSS d'Airbnb
Lorsque vous avez terminé avec toutes les étapes, appuyez vos modifications à votre dépôt GitHub!
Avant de pouvoir soumettre un PR, vous devrez pousser votre branche vers une branche éloignée (celle qui est sur Github, pas local).
Vérifiez que vous êtes sur votre succursale:
git branch
Si vous voulez vous assurer que tous vos commits sont dans:
git log
Appuyez sur Q pour quitter l'écran git log .
Poussez vos engagements vers votre branche éloignée:
git push
La première fois que vous faites cela, vous pourriez obtenir une erreur car votre branche distante n'existe pas encore. Habituellement, il vous dira la bonne commande à utiliser:
git push --set-upstream origin <YOUR_BRANCH_NAME>
Remarque: cela ne doit être fait que la première fois que vous poussez une nouvelle branche. Vous pouvez utiliser juste git push par la suite.
Une fois cela fait, veuillez envoyer un e-mail à [email protected] avec le lien vers votre référentiel fourchu et votre nom de branche. Nous aurons besoin de ces deux choses pour voir votre soumission.
H A C K 4 I M P A C T
H A C K 4 I M P A C T
H A C K 4 I M P A C T
H A C K 4 I M P A C T
H A C K 4 I M P A C T
