Téléchargement modern js - Téléchargement du code source modern js

modern js

Autre code source

1.0.0

Télécharger

Route vers JavaScript moderne et réagir

Le but de ce guide est de fournir une liste de plusieurs Ressources gratuites (articles, livres, vidéos?) Qui vous aidera à apprendre le JavaScript moderne et la bibliothèque React.

️ Ce guide n'est pas destiné à énumérer tout ce que vous devez savoir sur JavaScript ou React. J'ai essayé d'énumérer ce qui pourrait être utile si vous étiez totalement nouveau dans ce monde en fonction de mon expérience et des personnes que j'ai rencontrées. Si votre truc préféré n'y est pas répertorié, cela ne signifie pas que je ne l'aime pas ou que je le désapprouve. Par exemple, TypeScript ou GraphQL sont super, mais je ne pense pas qu'il soit obligatoire d'apprendre cela d'abord en tant que débutant .

1) JavaScript moderne?

Tutoriels qui couvrent tout:

Le développement Web Learn vous apprendra également HTML et CSS.
Eloquent JavaScript est parfait pour apprendre JS et les concepts de programmation générale.
Le tutoriel JavaScript moderne comment c'est fait maintenant. Des bases aux sujets avancés avec des explications simples mais détaillées.
Apprendre ES6 (ECMAScript 2015)? Si vous écriviez JavaScript il y a quelque temps et que vous vouliez rattraper les syntaxes modernes.

Articles et vidéos que j'aimais:

Le JavaScript moderne a expliqué pour les dinosaures, vous apprendrez des bases sur NPM, Babel, WebPack, etc. et l'histoire derrière.
Comprendre le hisser en JavaScript Si vous venez d'un autre langage de programmation, vous pourriez vous sentir mal à l'aise avec la façon dont nous pouvons déclarer des variables dans JS. Cet article vous aidera à vous sentir mieux!
Debug JavaScript? Firefox ou Edge a également leur propre Devtools, mais je préfère personnellement utiliser des chrome lors du codage.
Programmation fonctionnelle en javascript? Ces vidéos sont réalisées par un ancien développeur Spotify JS. Il vous apprendra des concepts essentiels comme les promesses, les fermetures ou les fonctions d'ordre supérieur. Ces choses sont essentielles dans la réaction.
Composition sur l'héritage? À l'école, je devais faire beaucoup de programmation orientée objet. Cette vidéo m'a aidé à comprendre pourquoi elle n'est pas toujours nécessaire.

Documentation

Parfois, vous devrez rechercher la documentation, par exemple si vous ne connaissez pas de mot-clé spécifique dans une base de code ou si vous souhaitez apprendre à utiliser une fonction native. Bien sûr, vous pouvez utiliser n'importe quel moteur de recherche ou StackOverflow, mais je recommanderais d'utiliser les documents Web MDN.

2) Réagir ⚛️

Qu'est-ce que React: une introduction visuelle pour les débutants
JavaScript à savoir pour React
Le doc officiel est le meilleur endroit pour apprendre React.
Le guide du débutant pour réagir?
Conseils de réaction progressifs pour fabriquer votre site réactif. Web.dev propose également de nombreux articles comme ça.
Modèles d'apprentissage Modèles pour créer des applications Web puissantes avec JavaScript Vanilla et réagir.

Crochets? Composants de classe

Les crochets sont très spécifiques à React, je vous suggère de vérifier pourquoi réagir les crochets? ? Afin d'en savoir plus sur React History et / pourquoi nous utilisons maintenant des crochets. Vous voudrez peut-être également en savoir plus sur les composants de classe et certains modèles utilisés pour partager la logique entre les composants (avant l'arrivée des crochets) car il y a encore dans de nombreuses bases de code:

Comparez le schéma de débit de crochet avec le diagramme des méthodes de cycle de vie des composants de classe
Composants d'ordre supérieur: un modèle de conception d'application React
Rendre des accessoires

Gestion de l'État et autres bibliothèques

À un moment donné, vous pourriez penser qu'il serait bien d'avoir accès à une sorte d'état global dans n'importe quel composant React afin d'éviter de transmettre des accessoires encore et encore ... Les gens pourraient vous dire d'utiliser Redux ou Mobx ou Apollo ou XState ou [insérer le nom de la bibliothèque populaire] pour y parvenir, mais cela peut être surévalué! Je recommanderais de lire les bibliothèques de gestion de l'État React React et comment choisir d'obtenir un bel aperçu. Les bibliothèques React pour 2023 abordent également ce sujet et bien d'autres!

3) Quelle est la prochaine étape !? ?

Restez à jour et découvrez de nouvelles choses avec React Newsletter et Newsletter;
Pratiquez réagir avec Create-React-App ou directement dans votre navigateur sur codes et boîte
Créez des applications Ready Ready avec: Vite, Next.js, Gatsby, React Native via Expo;

Et le style? ?

Certaines bases

Apprenez CSS un cours CSS à feuilles persistantes et référence à la hausse de votre expertise de style Web.
CSS moderne expliqué pour les dinosaures
CSS-in-JS ou CSS-and-JS
Styling et CSS OFFICIEL REACT Doc

Bibliothèques somne que vous pouvez utiliser pour gérer votre style:

Vent arrière
Modules CSS
vanilla
Émotion
Composants stylisés, je pense qu'ils sont les meilleurs entre le choix pour ceux qui sont utilisés pour écrire des CSS "classiques" et qui veulent profiter de le mélange avec JavaScript.

Systèmes de conception

Peut-être que vous voulez simplement créer une application et éviter de passer beaucoup de temps à écrire CSS et HTML. Je vous suggère d'utiliser des bibliothèques telles que le matériau-UI, la conception de fourmi ou les polaris. Si vous souhaitez construire votre propre système de conception, je vous suggère de lire la conception atomique.

Qu'en est-il des tests? ?

Mais vraiment, qu'est-ce qu'un test JavaScript?
Comment utiliser React Testing Library Tutorial Comprendre la plaisanterie et appris à rédiger des tests automatisés via React Testing Library (il y a d'autres bibliothèques de test, mais RTL est excellente recommandée par le DOC officiel).
Comprendre la moquerie de plaisanterie de plaisanterie est une technique pour isoler les sujets de test en remplaçant les dépendances par des objets que vous pouvez contrôler et inspecter.
Pourquoi cyprès? ? une bibliothèque pour rédiger des tests de bout en bout et plus encore;

D'autres outils que je par défaut

Éditeur de code: vs code;
Formateur de code automatique: plus joli;
Linter: Eslint;
Gérer Git via une interface utilisateur au lieu de commandes: SourceTree ou Code vs;
Créez et déploiez votre application: Netlify;
Intégration continue: Travis CI;
Acheter le nom de domaine: Google Domains;

Autres bibliothèques, je suis par défaut

Routage: React-Router;
Internationalisation: Linguijs;
Développez vos composants isolément et partagez-les avec votre équipe via Storybook. Déployez votre livre de contes et exécutez des tests de capture d'écran sur chaque histoire via chromatique;
API Mocking Lors du test: Mock Service Worker;