Tutoriel React FR — Partie 3 (Next.JS / Apollo / GraphQL / Express.js)
Partie 3 : Initialisation de la page Front
Dans cette partie, nous allons voir comment initialiser nos pages. Autrement dit, le layout persistant entre chaque page, garder des états pendant la navigation entre page, la récupération des erreurs grâce à componentDidCatch et comment injecter des données additionnelles (comme les requêtes GraphQL).
Pour ce faire nous allons créer une page nommée _app.js qui va permettre d’override l’initialisation de notre page (voir la documentation de Next.js pour plus d’informations).
Première étape : Créer son fichier _app.js dans le dossier /pages
Et commencez par importer
Import App, { Container } from ‘next/app’ ;
Attention aux majuscules bien entendu. Déclarons ensuite la classe App avec le nom que vous voulez, je vais choisir « monApp » en n’oubliant pas de l’étendre à App (que vous venons de déclarer.) Exportez ensuite la classe, au moins vous n’oublierez pas.
Comme sur la documentation, on créer une méthode render(), nous déclarons ensuite nos variables Component et pageProps provenant des props.
Et on retourne une balise Container dans laquelle nous déclarons une balise <Component /> prenant en paramètre une décomposition de « pageProps »
Le résultat est donc celui-ci :
Je me doute que la syntaxe peut ne pas parler à tout le monde. On arrive là pour les petits connaisseurs de JavaScript dans les raccourcis pris avec JavaScript ES6 incluant tous les outils de déstructuration du code.
Pour rappel :
Lorsque vous déclarez
const { nom } = this.personne
Cela revient à la même chose que de faire
const nom =this.personne.nom (mais on est d’accord que la première version est plus rapide)
et si vous souhaitez déclarer un
const prenom = this.personne.prenom en plus, cela rajoute une ligne alors qu’on pourrait très bien faire
const { nom, prenom } = this.personne
Rendez-vous maintenant sur localhost :7777 et vous devriez voir le paragraphe renseigné dans le render().
Si ce n’est pas le cas, aller sur votre console faites « CTRL+C » pour arrêter le serveur, et relancez le grâce à
npm run dev
Que ce soit sur la page d’accueil ou sur /creation vous voyez la phrase.
Ce qui devient intéressant maintenant c’est de télécharger le plugin React pour Chrome ( si vous ne travaillez pas sur Chrome j’admets ne connaitre tous les plugins des autres navigateurs..)
Une fois installé, appuyez sur F12, allez dans l’onglet « React »
Vous pouvez maintenant voir que votre Application, quel que soit la page, est englobée par une balise « MonApp » et un « Container », et dès maintenant, nous pouvons voir toute la puissance de cette utilisation, comme avoir un gestionnaire d’état « State » / « Store » qui sera toujours présent dans votre implication peu importe la route sur laquelle vous vous trouver (dans notre cas nous pourrons intégrer ici notre Client Apollo.
A partir de là, on va commencer à décomposer. Pour un souci de lisibilité.
Nous allons alimenter notre 2ème dossier le plus important qui est : /components
Dans ce dossier nous allons créer un fichier Page.js qui comme son nom l’indique représentera une page de manière générale sur toute l’application, toutes routes confondues.
Je vous invite donc à réimporter React, créer une classe, créer une méthode Render et exporter cette classe
Remarque : Sachez que vous pouvez utiliser l’une de ces deux syntaxes, en soit il n’y a aucune différence :
Nous voulons donc intégrer ce composant dans notre fichier _app.js à la place du paragraphe précédemment placé. Sauf que nous avons également une balise <Component />.
Là ça va devenir compliqué sur ce point :
Pour que celle-ci se retrouve toujours dans notre composant Page nous devons faire en sorte de pouvoir ajouter des composants enfants à notre composant « Page » (à l’intérieur des balises d’appel de l’enfant)
Par exemple si nous voulons que dans le fichier A :
<Parent>
<p> Test <strong> { maVariable } </strong> </p>
</Parent>Et que dans notre fichier ‘Enfant’ B avoir :
<p> Test </p>Si nous voulons extraire le contenu du composant A, dans le composant B nous devons simplement faire :
<Parent>
<Enfant />
</Parent>
Mais comment dire au composant B qu’il doit accepter une variable « maVariable » ?
Il suffit dans le composant parent de le spécifier à l’intérieur des balises d’appel de l’enfant :
<Parent>
<Enfant> { maVariable } </Enfant>
</Parent>Mais pour cela il faut que notre composant enfant accepter une petite variable en plus, sur laquelle je ne vous demanderai pas de réfléchir trop longtemps qui est :
<Enfant>
<p> Test <strong> { this.props.children } </strong> </p>
</Enfant>
C’est le this.props.children qui permet de faire ça.
Lorsque l’on passe quoi que ce soit dans les balises d’un enfant, ces informations sont retrouvables dans les props du composant enfant, sous la variable « Children »
Dans notre cas bien précis il suffit juste de modifier notre composant Page.js de cette façon :
Et dans le composant _app.js il faut donc modifier le code de cette manière :
Ce qui va donc être intéressant maintenant c’est de pouvoir intégrer à notre application, un menu persistant sur chaque page.
L’endroit idéal est donc dans ce composant Page.
Mais histoire que ce soit plus lisible nous allons extraire notre navigation dans un composant à part.
Généralement lorsque l’on dispose d’une barre de navigation principale celle-ci se situe en haut ou à gauche de l’écran dans la balise <Header>, ça me parait donc être un beau nom pour notre composant.
Créez donc un fichier Header.js dans le dossier /components
Nous allons donc créer un stateless component, vous allez voir que c’est quelque chose que vous allez devoir faire assez fréquemment. Un petit conseil, si vous codez sur Visual Studio Code (mon logiciel de prédilection), il existe un plugin vraiment sympa nommé « Reactjs code snippets », il permet de générer du code React facilement. Dans le cas présent lorsque dès le début de mon fichier je tape « rcc », VS Code me propose de créer un squelette de composant, si on met « rccp » il créer un squelette avec les propTypes (c’est un outil qui permet de vérifier le format des props passées au composant)
Pour rappel les props sont les variables qui permettent d’envoyer des valeurs d’un parent à son/ses enfant(s)
Créons donc notre classe de manière assez brut à base de DIV et de liens (balise <a>).
Nous allons mettre des classes pour un futur design de notre application (car oui elle sera jolie !). Sachez qu’en React vous ne codez pas en « HTML » mais en « JSX » ce qui permet d’utiliser les variables dans le code, de commenter d’une façon différente, et également de ne pas utiliser « class » pour ajouter une classe sur une balise mais vous devez utiliser « className » (attention à la casse bien entendu).
Voici la documentation sur JSX avec React pour les plus courageux : https://reactjs.org/docs/introducing-jsx.html
Grâce à cet exemple vous pouvez donc voir comment commenter son code ! (rien de folichon on est bien d’accord)
On va donc maintenant importer notre « Header » dans notre composant « Page » à la place du paragraphe que nous avions
Nous avons bien commencer à décomposer notre Header.
Cependant on a 3 DIV successives, avec une navbar, un menu, un lien, c’est pas très sexy, on va rapidement externaliser notre navbar dans un fichier à part histoire de faire quelque chose de propre, et pour s’entrainer ;)
Si vous vous sentez avec une âme d’ambitieux, créez votre navbar avant de regarder la suite du code en vous aidant de « Link » fournit par « Next.js », Sinon recopiez ce morceau de code et essayez de le comprendre, il n’y a rien de compliqué ce n’est que du déjà vu !
Il ne vous reste plus qu’à importer votre nouveau fichier « Navbar.js » dans votre composant « Header »
Vous devez vous dire, c’est cool ça fonctionne, mais attends, tu nous parles au début de Meta et tu n’en évoque pas ? C’est normal j’attendais que vous ayez une bonne compréhension de ce qu’on a fait jusque là
Si vous avez déjà fait du HTML vous devez savoir à quoi sert la balise « Head » et ce que sont les « Meta », sinon… qu’est-ce que vous faites là ? ce n’est pas normal !
En temps normal, vous décomposez votre HTML avec un HEAD et un BODY. Dans le Head vous ajoutez généralement les appels à des fichiers CSS, des Meta, …etc.
Nous allons « Override » cette balise.
Pour se faire, dans la documentation de Next.js on retrouve un élément appelé « HEAD »
La bonne pratique veut que l’on créer un fichier « Meta.js » contenant les méta data et qu’on intègre toutes nos méta data dans une balise « Head » fournit par Next.js, faisons donc cela :
Outch, beaucoup d’informations d’un coup !
Bon la structure du composant et l’import n’ont rien de nouveau pour vous, par contre ce qu’il y a entre les balises <Head> l’ai !
Mais rien de folichon, comme je l’ai dit juste avant, si vous avez déjà fait du HTML tout doit vous sembler familier : On déclare une balise Meta qui n’est rien d’autre que le respect du ratio sur téléphone, on déclare ensuite le favicon de notre application ainsi qu’une feuille CSS correspondant au CSS mis à disposition dans la première partie pour la « barre de progression/chargement »
Le dernier point est assez parlant c’est la fameuse balise « Title » que l’on dynamisera plus tard, qui permet de savoir où l’on se trouve en s’affichant sur l’onglet du navigateur.
On peut (on doit en vrai) rajouter également une balise
<Meta charSet=’utf-8’ />
pour l’encodage bien évidemment.
Avant de quitter ce fichier, n’oubliez pas de télécharger une photo (peu importe, de petite taille, renseignez-vous sur les « favicon » sur google ça fera un peu de culture !) et déposez là dans le dossier stipulé.
Il ne vous reste donc qu’à importer votre nouveau composant « Meta » dans votre fichier Page.js !
Et voila nous en avons fini avec cette partie sans retour visuel !
Dans la prochaine partie nous aborderons les Styled Components, la déclaration d’un thème global et l’import de typographie !
Et la partie 4 est déjà sortie ! Disponible ici
