Ressources pour apprendre React: tout ce dont vous avez besoin pour commencer

React est une bibliothèque JavaScript créée par les développeurs Facebook pour créer des interfaces utilisateur rapides. Que vous soyez nouveau à réagir ou que votre parcours de développement de la réaction accélère, il peut être difficile de maîtriser ses bases, techniques, outils et techniques. Nous avons donc créé ce guide des ressources disponibles et de nos recommandations. Quelle que soit la phase d'apprentissage dans laquelle vous vous trouvez, voici le meilleur contenu React dont vous avez besoin - consultez-le et apprenez-le en profondeur! (Si vous pensez que nous avons manqué quelque chose, veuillez nous le faire savoir dans le formulaire ci-dessous!)

Points clés

• React est une bibliothèque JavaScript pour créer des interfaces utilisateur rapides avec un grand nombre de ressources d'apprentissage disponibles, des articles aux cours, projets et newsletters.
• Les ressources recommandées incluent le cours «React Débutant», l'article «React Beginner: Beginner’s Guide» et la newsletter «Contrôle de version».
• Avant l'apprentissage de réagir, vous devez avoir une solide compréhension de JavaScript, y compris des concepts tels que les fonctionnalités ES6, les fermetures, la programmation asynchrone et le mot clé "ce". Les connaissances HTML et CSS sont également importantes car React utilise JSX, une extension de syntaxe JavaScript similaire à HTML.

Article

Que vous envisagez l'apprentissage de réagir ou que vous recherchiez des outils et des systèmes plus avancés, voici quelques-unes des meilleures ressources écrites que nous ayons trouvées.

débutant et comparaison

• Réagir pour démarrer: Guide du débutant [SitePoint]
• débutant de JSX [SitePoint]
• REACT Tutoriel: Construire une application de calculatrice à partir de zéro [SitePoint]
• Style React Composants: 7 Méthodes Comparaison [SitePoint]
• Comment savoir si React est le meilleur pour votre prochain projet [SitePoint]
• réagir par rapport à la comparaison angulaire - en profondeur [SitePoint]
• réagir vs. Vue - "Pourquoi ai-je choisi React au lieu de Vue" [moyen / @ CinleleafShade]
• débutant de React, Guide du débutant [SitePoint]
• Explorez les nouvelles fonctionnalités de React 16 en construisant un lecteur de musique [SitePoint]
• Comment réagir améliore votre animation D3 [SitePoint]
• Facebook Official React Introduction [Facebook.github]

bases

• Tous les concepts de réaction de base sont compressés en un seul article [Medium.FreeCodeCamp]
• Préparez rapidement les projets avec Facebook Create React App [SitePoint]
• Retour aux bases - Utilisez le flux de réaction [moyen / javascript-inside]
• Comment optimiser les performances de la réaction à l'aide de composants sans état [SitePoint]
• Présentation du style de réaction - de l'utilisation de CSS externes aux composants de style [SitePoint]
• compréhension approfondie de l'animation de réaction [moyen / réaction-entraînement-entraînement]
• INTRODUCTION AU MODE DES FORDS COMPOSANT [Components médium / stylisés], ce qui facilite l'écriture de réagir extensible.
• Tout sur React Router 4 [CSS-Tricks]
• et Guide de rendu de réaction côté serveur [CSS-Tricks]
• Quatre méthodes invariantes pour gérer les états dans React [Medium / @ Housecor]
• Comment installer React REACT natif [SitePoint]
• Guide d'authentification dans React Native Applications [goshakkk.name]
• Tableau de recherche rapide React Reactarch et filtrable [ReactCheatSheet]

légèrement avancé

• comment organiser et faire de grandes applications de réaction évolutives [SitePoint]
• Suggestions: Apprenez React [Robinwieruch]
• Comment créer un système de composants réactif véritablement universel [Components moyen / stylés]
• redux vs. mobx: Quel est le meilleur? [SitePoint]
• React 16 a changé la façon dont React gère les propriétés DOM inconnues: un guide sur la façon dont ces modifications vous affectent et votre code [Facebook.github]

Course

Si vous n'aimez pas créer votre propre chemin d'apprentissage à travers des articles, ou si vous souhaitez vous assurer de maîtriser tous les concepts et techniques, nous recommandons les cours de réaction structurés suivants.

• Les débutants pour React [Reactforbeginners] sont l'étalon-or pour React Education, de React Mentor Wes Bos.
• React Express [react.express] est un guide complet pour réagir le développement.

Projet

Vous maîtrisez les bases et peut-être même plus. Voici quelques projets que vous pouvez mettre en pratique:

• Un guide pour construire étape par étape des applications réagi avec la connexion et l'authentification de l'utilisateur [SitePoint]
• Guide pour créer des applications en temps réel avec état avec React Native et Pusher [SitePoint]
• Comment ajouter une analyse pour réagir les applications natives [SitePoint]
• Créez votre première application de réaction rendue côté serveur avec Rails [Engineering.MuseFind]
• Comment construire des clones Reddit en utilisant React et Firebase [SitePoint]
• Créez une bibliothèque d'images sphériques complète 3D avec React VR [SitePoint]
• Ensuite, utilisez React, Redux, Express et MongoDB pour construire un clone Trello complet [SitePoint]
• Ensuite, utilisez React Native pour construire une application de reconnaissance faciale [SitePoint]
• Comment créer des applications Android à l'aide de React Native [SitePoint]
• Créer des jeux avec React et WebWl [SitePoint]

bibliothèques et outils

• Comment configurer VIM pour le développement de React [Drivy.Engineering]
• React-Boilerplate [github / react-boilerplate] est la base évolutive et d'abord en ligne pour le prochain projet React.
• react-vt [github / reactvt] est une bibliothèque de tests visuels pour les développeurs React.
• Mirror [github / mirrorjs] est un framework de réaction simple et puissant avec une API minimale et pas de code de passe-partout.
• réagir un matériel UI, réagir bootstrap, interface utilisateur sémantique et (quatre) plus - sept bibliothèques réagites que vous devriez connaître [readwrite]
• Les composants de l'interface utilisateur Web JetBrains sont open source [blog.JetBrains]
• GATSBY [GATSBYJS] est un générateur de sites statique convivial et super rapide.
• React Static est un générateur de sites statique React conçu pour être facile à configurer et aux données agnostiques.
• React Native Pull to Refresh [github / nadikuts] est un composant de rafraîchissement de réchauffement personnalisé pour Android.
• Lottie [Airbnb.Design] est une bibliothèque iOS, Android et React Native qui permet aux applications d'utiliser des animations aussi facilement qu'elles utilisent des images statiques.
• sketch.app [Airbnb] est un autre outil pour Airbnb qui vous permet d'écrire des composants React rendus aux documents de croquis.

newsletter

Si tout cela vous aide à entrer dans le monde de React - voici quelques newsletters qui vous aideront à obtenir les dernières informations.

• Contrôle de version [SitePoint] - Newsletter quotidien, couvrant une variété de sujets dont React, un peu comme cet article (texte et lien), écrit par moi!
• React Status [React.Staturcode] - Newsletter hebdomadaire des gens formidables de Cooperpress.
• React Newsletter [ReactJsNewSletter] - Newsletter hebdomadaire, organisé par Tyler McGinnis et Ean Platter.
• React Digest [ReactDigest] - Newsletter hebdomadaire, envoyant cinq liens React tous les lundis.

Qu'avons-nous manqué?

Enfin, si vous trouvez les excellentes ressources ou les outils de réaction qui doivent être inclus ici, veuillez nous le faire savoir dans le formulaire ci-dessous. Bonne réaction!

Les questions fréquemment posées sur l'apprentissage React

Quelles sont les prérequis de l'apprentissage React?

Avant de commencer à apprendre React, il est très important de maîtriser JavaScript, car React est une bibliothèque JavaScript. Vous devriez être familier avec des concepts tels que les fonctionnalités ES6, les fermetures, la programmation asynchrone et ces mots clés. Les connaissances HTML et CSS sont également importantes car vous utiliserez JSX, une extension de syntaxe JavaScript similaire à HTML.

Combien de temps faut-il pour apprendre à réagir?

Le temps nécessaire pour apprendre la réact varie considérablement, selon votre niveau de compétence actuel et le temps que vous pouvez consacrer à vos études. Si vous maîtrisez déjà JavaScript, vous pouvez maîtriser les bases de React en semaines d'apprentissage dédié. Cependant, il peut prendre plusieurs mois pour maîtriser React et ses écosystèmes tels que Redux et React Router.

Quelles sont les ressources pour apprendre à réagir?

Il existe de nombreuses ressources disponibles pour apprendre React. Il s'agit notamment de tutoriels en ligne, de cours vidéo, de livres et de documents. La documentation officielle de la réaction est un excellent point de départ. Des cours interactifs sont disponibles sur des sites tels que le codecademmie et le point de site. Vous pouvez également trouver de nombreux tutoriels gratuits sur YouTube et les blogs.

Pourquoi devrais-je apprendre à réagir?

React est l'une des bibliothèques JavaScript les plus populaires pour la création d'interfaces utilisateur, en particulier pour les applications d'une seule page. Il vous permet de créer des composants d'interface utilisateur réutilisables. React est maintenu par Facebook et la communauté des développeurs et des entreprises individuels et est largement utilisé dans l'industrie. Apprentissage React peut apporter de nombreuses opportunités d'emploi.

REACT Une bibliothèque ou un cadre?

React est une bibliothèque JavaScript, pas un framework. La différence est que la bibliothèque offre des fonctionnalités spécifiques et isolées que vous pouvez utiliser au besoin, tandis que le cadre fournit un ensemble complet d'outils et de fonctionnalités, mais impose également une façon spécifique de faire les choses. React se concentre sur une chose - la construction de l'interface utilisateur, et il fait un très bon travail.

Qu'est-ce que JSX et pourquoi est-il important dans React?

JSX signifie JavaScript XML. Il s'agit d'une extension de syntaxe pour JavaScript qui vous permet d'écrire du code de type HTML dans le code JavaScript. La rédaction d'une application React ne nécessite pas de JSX, mais elle est recommandée car elle rend le code plus facile à lire et à écrire.

Qu'est-ce qu'un Dom virtuel dans React?

Virtual DOM (Document Object Model) est un concept introduit par React, où la représentation virtuelle de l'interface utilisateur est conservée en mémoire et synchronisée avec le "réel" DOM ​​grâce à un processus appelé coordination. Ce processus se combine avec la capacité de créer facilement des composants pour activer une base de code haute performance et prévisible.

Quelle est la différence entre l'état et la piste dans React?

Dans React, les états et les accessoires sont des objets JavaScript. L'état est une structure de données qui commence par la valeur par défaut lorsque le composant est monté puis mute au fil du temps, ce qui est principalement le résultat d'événements utilisateur. Un accessoire (abrégé en tant qu'attribut) est une variable qui lui est transmise par son composant parent.

Qu'est-ce que Redux et comment cela a-t-il à voir avec React?

redux est un conteneur d'état prévisible pour les applications JavaScript. Il vous aide à rédiger des applications qui sont régulièrement exécutées, faciles à tester dans différents environnements (client, serveur et natif). Bien qu'il soit principalement utilisé avec React, il peut être utilisé avec n'importe quelle autre bibliothèque de vue.

Comment commencer à construire un projet avec React?

Après avoir maîtrisé les bases de React, la meilleure façon d'apprendre est de construire un projet. Commencez par des projets simples, tels qu'une liste de tâches ou une application météo. Au fur et à mesure que votre expérience se développe davantage, vous pouvez vous tourner vers des projets plus complexes. Non seulement cela vous aidera à mieux comprendre la réaction, mais il peut également créer votre portefeuille.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!