Tutoriel React FR -Partie 2 (Next.JS / Apollo / GraphQL / Express.js)
Partie 2 : Création des premières pages et lien entre elles
La partie 1 est disponible ici
Index.js
Commençons par créer notre index.js qui sera notre première page d’application, représentant l’URL localhost:7777.
Pour le remplir, cela va être simple, on importe « React », on déclare une classe (qui est notre composant), qu’on oublie pas d’étendre de React.Component.
Pour qu’un composant soit visible dans le DOM, chaque classe doit avoir une méthode render() qui doit pour faire simple, retourner le contenu HTML souhaiter (ici, un paragraphe)
Et il ne faut pas oublier d’exporter cette classe pour qu’elle soit accessible
Démarrons donc notre front
npm run dev
sur le dossier /frontend
Et allons sur l’url localhost :7777 (qui est visualisée grâce à l’index.js)
Je ne pense pas utiliser les nouvelles HOOKS de React dans ce tutoriel d’un point de vue visibilité et compréhension pour les débutants.
Mais je pense qu’il est très intéressant d’apprendre que des composants simples comme celui-ci ne nécessite pas de classe. Nous pouvons utiliser les stateless components, vous pouvez avoir plus d’informations ici : https://reactjs.org/docs/components-and-props.html#rendering-a-component
On ne déclare plus une classe mais une simple variables (const) qui est une fonction fléchée (JavaScript ES6) prenant un paramètre « props » que nous verrons juste après.
Le code ci-dessous permet également de faire la même chose
Après avoir modifier le code, faites un CTRL+S pour sauvegarder votre code, le HOT RELOAD permet de rafraîchir automatiquement l’interface sans aucune autre action de votre part !
Vous savez quoi ? Même plus besoin d’importer React non plus !
On va vouloir créer une autre page, par exemple creation.js qui va permettre de créer un article.
Faites un copier-coller de votre code, et modifiez juste le nom de la variable et l’export par « Creation »
Si vous allez sur l’url localhost :7777/creation , vous arrivez sur votre nouvelle page !
Pour la suite, je vous invite vivement à ouvrir un onglet sur la doc de Next.js pour comprendre pourquoi nous allons procéder ainsi https://github.com/zeit/next.js/ pour arranger notre page (notamment en ajoutant les liens, meta data…etc)
Pour l’instant essayons tout simplement de créer un lien entre nos deux pages. Comme vous le savez on pourrait faire tout simplement un lien
<a href=’/creation’> lien vers creation </a>
Mais cela rafraîchirai entièrement l’application, alors que nous voulons juste rafraîchir uniquement les composants qui en ont besoin.
Pour ça, Next.js nous fournit LINK
Commençons donc par importer Link
Import Link from ‘next/link’ ;
Pour garder cette notion de « lien » il faut englober notre balise <a> </a> d’une balise Link qui héritera de l’attribut « href » de ce premier
Voici le code en question :
C’est tout pour cette partie, le but était d’avoir une introduction à la logique de page et de routing de Next.js. Dans la prochaine partie nous verrons comment modifier la configuration de notre page avec par exemple _app.js et _document.js => Et ça tombe bien elle est déjà sortie ici
