Cours intensif pour débutants, partie 1

Dans cette série de didacticiels, nous allons nous intéresser de près à l'utilisation de React pour créer une application entièrement fonctionnelle qui affiche une galerie de films..

Apprendre à créer une application à partir de zéro est une excellente occasion de s'exercer à utiliser toutes les fonctionnalités clés de React tout en renforçant vos compétences en développement. Toutes les méthodes et les meilleures pratiques recommandées sont suivies, ce qui est essentiel pour la création d'applications React modernes..

Nous allons créer une toute nouvelle application React à l'aide de la créer-réagir-app développé par Facebook et couvrant en détail les sujets React suivants:

• Composants 
• JSX
• Les accessoires
• Etat
• Structurer correctement votre application
• Utilisation des fonctionnalités ES6 pour le développement d'applications modernes

Ce que nous allons construire

Pour rendre l'apprentissage du développement de React plus amusant, nous allons créer une application entièrement fonctionnelle, plutôt que de présenter des extraits de code génériques lorsque de nouveaux aspects de React sont couverts..

Ensemble, nous construirons «Movie Mojo», une application permettant d'afficher une galerie de films de bien-être. Une fois l'opération terminée, l'application charge certains films lors du chargement de la page, puis plus lorsque l'utilisateur clique sur un bouton. Enfin, vous pourrez entrer vos propres titres de film via un formulaire personnalisé qui, une fois soumis, insérera dynamiquement un nouveau film dans la galerie..

Conditions préalables

Il s’agit d’un tutoriel de niveau intermédiaire. Vous en tirerez donc de grands avantages si vous connaissez déjà les sujets suivants:

• Fonctions ES6 telles que les fonctions de flèche, les classes et les modules.
• Savoir quels sont les composants, les accessoires et l'état de React.
• Quelques expériences avec Node.js et NPM.
• Au moins un niveau de base de compétences en JavaScript.

La plupart d’entre elles sont abordées en détail au fur et à mesure, mais je vous conseillerais de mettre au point certaines zones au besoin..

Préparons-nous

Nous allons utiliser le créer-réagir-app outil pour configurer notre application React. Il est extrêmement facile à utiliser et nous permettra de nous concentrer sur le codage immédiat de notre application, sans avoir à naviguer dans un processus de configuration compliqué..

Utiliser créer-réagir-app, vous aurez besoin d'avoir Node.js et npm installée. Vous pouvez vérifier s'ils sont tous deux disponibles en tapant ce qui suit dans une fenêtre de ligne de commande:

noeud -v

Et alors:

npm -v

S'ils sont tous les deux installés, vous verrez le numéro de version actuel de chaque.

MacBook-Pro: ~ davidgwyer $ node -v v6.11.1 MacBook-Pro: ~ davidgwyer $ npm -v 5.3.0 MacBook-Pro: ~ davidgwyer $

Si vous avez besoin d'installer ou de mettre à jour Node.js et npm alors le moyen le plus simple est de télécharger Node.js de la page web officielle. Node.js est livré avec npm vous n'avez donc pas besoin d'effectuer une installation séparée.

À installer créer-réagir-app globalement, tapez ceci dans n'importe quelle fenêtre de ligne de commande:

npm installer -g créer-réagir-application

Nous pouvons maintenant aller de l'avant et utiliser créer-réagir-app échafauder notre nouvelle application React. Il créera également un dossier de niveau supérieur contenant nos fichiers de projet. Ouvrez une fenêtre de ligne de commande et accédez au dossier dans lequel vous souhaitez placer votre application (par exemple, / Bureau), puis entrez les informations suivantes:

créer-réagir-app movie-mojo

Cela prendra environ une minute, mais le cas échéant, vous devriez voir un message semblable à celui-ci:

Succès! Movie-mojo créé dans / Users / davidgwyer / Desktop / movie-mojo Dans ce répertoire, vous pouvez exécuter plusieurs commandes: yarn start Démarre le serveur de développement. Création de fils Regroupe l'application dans des fichiers statiques pour la production. test du fil Démarre le coureur de test. yarn eject Supprime cet outil et copie les dépendances de construction, les fichiers de configuration et les scripts dans le répertoire app. Si vous faites cela, vous ne pourrez plus revenir en arrière! Nous vous suggérons de commencer par taper: cd movie-mojo ytay début Happy hacking!

Un nouveau film-mojo Le dossier aura été créé avec la structure de fichier suivante:

le src Le dossier est l'endroit où vous allez modifier vos fichiers de projet. Lorsque vous déploierez votre application, ils seront regroupés et ajoutés au Publique dossier prêt à être distribué.

Pour visualiser l’exemple d’application dans votre navigateur, tirons parti du mini serveur Web inclus avec créer-réagir-app. Nous devons être dans le dossier du projet que nous venons de créer. Dans la fenêtre de ligne de commande, tapez:

cd movie-mojo

Et alors:

npm start

Cette commande simple fait trois choses principales. Ce sera:

• Compilez notre exemple d'application React.
• Ouvrez une nouvelle fenêtre de navigateur et affichez notre application..
• Surveiller les modifications apportées aux fichiers de projet.

Une fois compilé, vous verrez le résultat suivant:

Compilé avec succès! Vous pouvez maintenant voir movie-mojo dans le navigateur. Local: http: // localhost: 3000 / Sur votre réseau: http://192.168.0.15:3000/ Notez que la version de développement n'est pas optimisée. Pour créer une construction de production, utilisez la construction de fil.

Et voici l'exemple d'application en cours d'exécution dans le navigateur.

Toute modification apportée à votre application sera automatiquement recompilée et rechargée dans la fenêtre du navigateur. Ceci est une fonctionnalité vraiment cool de créer-réagir-app et vous fera gagner beaucoup de temps lors du développement!

Il vous permet également de vous concentrer sur le codage de votre application sans être dérangé par la recompilation manuelle et l'actualisation continue de la fenêtre du navigateur pour afficher les dernières modifications..

Peut-être que le meilleur flux de travail, si vous disposez de l'espace d'écran disponible, consiste à ouvrir le navigateur et l'éditeur de texte côte à côte. Ainsi, chaque fois que vous apportez une modification à l'un de vos fichiers de projet, les modifications s'affichent presque instantanément dans la fenêtre du navigateur..

Essayons de modifier notre exemple de projet.

À l'intérieur de src dossier, ouvert App.js dans votre éditeur de texte. Essayez de changer de ligne:

Pour commencer, éditez src / App.js et sauvegarder pour recharger.

à:

Bienvenue dans l'application 'Movie Mojo' React!

Dès que vous enregistrez les modifications, l'application React est automatiquement recompilée et la fenêtre du navigateur s'actualise. Si vous avez réorganisé votre espace de travail comme suggéré ci-dessus, vous verrez à quel point cela est instantané..

Structurer notre application

Configurons la structure de notre application que nous utiliserons pour la suite de ce tutoriel..

le créer-réagir-app outil fait un excellent travail d'échafaudage notre application, mais nous avons toujours la possibilité de le modifier pour répondre à nos besoins.

Premièrement, supprimons les fichiers dont nous n’avons plus besoin. src dossier. Nous n'avons pas besoin de travailleurs de service dans notre application, alors supprimez le registerServiceWorker.js fichier. Ceci est référencé dans index.js, alors ouvrez-le dans un éditeur et supprimez toutes les références afin qu'il ressemble à ceci:

importer Réagir de 'réagir'; importer ReactDOM de 'react-dom'; import './index.css'; importer l'application depuis './App'; ReactDOM.render (, document.getElementById ('root'));

Ensuite, supprimez le logo.svg déposer et éditer App.js supprimer les références. Votre fichier mis à jour devrait maintenant ressembler à ceci:

importer Réagir, Composant de 'réagir'; importer './App.css'; La classe App étend le composant render () return ( 
 
 
Bienvenue chez React
 
 
 Bienvenue dans l'application 'Movie Mojo' React! 
 
 )  export par défaut App;

Nous pouvons aussi nous débarrasser de la App.test.js fichier. Cela nous laissera les fichiers suivants dans src:

• index.js
• index.css
• App.js
• App.css

Nous allons créer plusieurs composants, alors créons un dossier dédié pour tous les stocker. src, créer un nouveau Composants dossier et ajouter le App.js fichier à elle. Notre application ne se compilera pas correctement tant que nous n'aurons pas mis à jour quelques références.

Dans index.js, mettre à jour le chemin pour importer le  composant:

importer l'application depuis './components/App';

Et en App.js, mettre à jour le chemin vers App.css:

importer '… /App.css';

Enregistrez vos modifications et assurez-vous que votre application est correctement recompilée..

Nous sommes maintenant presque prêts à commencer à coder notre application «Movie Mojo». Premièrement, familiarisons-nous avec le rendu de notre application..

Jeter un coup d'œil à index.js. C'est le fichier qui rend en réalité notre application au DOM. Il le fait via le ReactDom.render () méthode, qui prend deux arguments. Le premier argument est le composant que nous voulons rendre. Dans notre cas, c’est le  composant, qui est le composant de niveau supérieur (et actuellement uniquement) dans notre application.

Le deuxième argument spécifie l'élément cible DOM sur lequel nous souhaitons monter notre application React. Par défaut, 'create-react-app' crée cet élément automatiquement. Si vous regardez à l'intérieur du Publique dossier, il y a un index.html qui contient un