Comment apprendre React - Une feuille de route du débutant au avancé

Hé les gens!

Ce guide est destiné aux personnes qui commencent avec React. J'ai soigneusement sélectionné les meilleures vidéos et articles de chaque section pour faciliter l'apprentissage.

Remarque: je ne suis associé à aucun des sites Web mentionnés ci-dessous. C'est purement mon avis.

Conditions préalables

  1. Connaissance de base de HTML, CSS et JavaScript.
  2. Compréhension de base des fonctionnalités ES6. Voici mon article expliquant certaines des fonctionnalités de l'ES6.

    Pour commencer, vous devez au moins connaître les fonctionnalités suivantes:

    1. Laissez

    2. Const

    3. Fonctions fléchées

    4. Importations et exportations

    5. Classes

  3. Compréhension de base de l'utilisation de npm.

Commencer

Vous pouvez utiliser des éditeurs de code en ligne pour vous entraîner, ou vous pouvez utiliser Create React App.

J'ai mis en place un environnement de développement dans JSFiddle et Codepen.

Pour comprendre tous les principes de base de React, vous pouvez commencer par les tutoriels suivants:

Documentation officielle React par React

Guide du débutant à React par Kent C. Dodds

Fondamentaux de React par Samer Buna

À présent, vous devriez avoir une idée de base des principes fondamentaux de React. Il suffit de commencer à développer des applications Web simples dans React.

Maintenant, jetez un œil au tutoriel officiel de React:

Tutoriel officiel React par React

C'est un article bien écrit couvrant les principes fondamentaux de React. Et il explique également très clairement les sujets spécifiques.

Dernier point mais non le moindre, découvrez comment vous connecter aux API avec les applications React:

Récupération d'API avec React.js par Ethan Jarrell

Commencez à construire des projets

  1. Application todo simple
  2. Application de calcul simple
  3. Construire un panier
  4. Afficher les statistiques utilisateur de GitHub à l'aide de l'API GitHub

Routeur React

React Router vous aide à créer des itinéraires vers vos applications à page unique. Il est très puissant et facile à utiliser avec votre application React.

Pour commencer:

Tutoriel React Router par Paul Sherman

React Router et introduction à SPA par Learn Code Academy

Routage des applications React par Scotch.io

Ces articles sont plus que suffisants pour vous familiariser avec le routage React.

Projets

  1. Une application CURD simple
  2. Clone de Hacker News

Si vous souhaitez vraiment en savoir plus sur le routeur, consultez le guide suivant:

Guide complet du React Router par React Training

Webpack

Webpack est un célèbre bundler de modules JavaScript. Webpack vous aide à maintenir les dépendances en tant que fichiers statiques pour votre projet afin que les développeurs n'aient pas à le faire.

Webpack est également livré avec des chargeurs. Les chargeurs aident à exécuter des tâches spécifiques autour de votre projet.

Pour en savoir plus sur Webpack, suivez les didacticiels suivants.

Quand et pourquoi utiliser Webpack par Andrew Ray

Tutoriel Webpack par Learn Code Academy

Pour configurer votre environnement React local à l'aide de Webpack, vous pouvez vous référer au référentiel GitHub suivant:

Modèle React SPA par Hanif Roshan

Je pense que les tutoriels ci-dessus sont suffisants pour démarrer avec Webpack. Cependant, pour obtenir des connaissances approfondies, vous pouvez vous référer aux guides suivants:

Introduction au Webpack par SurviveJS

Documents officiels Webpack

Rendu serveur

Le rendu sur serveur est l'une des fonctionnalités les plus intéressantes de React. Il peut être utilisé avec toutes les technologies dorsales.

Le rendu côté serveur (SSR) dans React vous aide à créer des composants sur le serveur et à les rendre au format HTML dans votre navigateur. Et lorsque tous les modules JavaScript sont téléchargés dans le navigateur, React entre en scène. Facile!

Tout d'abord, jetez un œil à l'API React-DOM:

API React-DOM par React

Et suivez les tutoriels ci-dessous pour acquérir des connaissances approfondies:

Rendu du serveur React par Tyler McGinnis

Rendu du serveur de routeur React par Roilan Salinas

Guide de rendu côté React Server par Dennis Brotzky

Redux

Redux est une bibliothèque JavaScript développée pour maintenir les états des applications. Lorsque vous créez une application complexe, cela ajoute une surcharge pour gérer les états entre les composants. Redux vous aide à stocker tous vos états dans une seule source. Et bien sûr, React joue bien avec Redux :)

Pour commencer:

Tutoriel Reduxpar Learn Code Academy

Tutoriel Redux pour les débutants par Valentino Gagliardi

Réagir Redux par CSS Tricks

Ces tutoriels sont plus que suffisants pour démarrer avec Redux. Cependant, je ne peux pas m'empêcher de mentionner le tutoriel ci-dessous. Ça en vaut la peine :)

Premiers pas avec Redux par Dan Abramov

Ressources

Réagir génial

Si vous aimez l'article, n'oubliez pas de le partager :)