Comment créer un frontend React et un backend Node / Express et les connecter

Dans cet article, je vais vous guider à travers le processus de création d'une application React simple et de la connecter à une simple API Node / Express que nous créerons également.

Je n'entrerai pas dans les détails sur la façon de travailler avec l'une des technologies que je mentionnerai dans ce tutoriel, mais je laisserai des liens, au cas où vous voudriez en savoir plus.

Vous pouvez trouver tout le code dans ce référentiel que j'ai créé pour le tutoriel.

L'objectif ici est de vous donner un guide pratique sur la configuration et la connexion du client front-end et de l' API back-end .

Avant de nous salir les mains, assurez-vous que Node.js fonctionne sur votre machine.

Créer le répertoire principal du projet

Dans votre terminal, accédez à un répertoire dans lequel vous souhaitez enregistrer votre projet. Créez maintenant un nouveau répertoire pour votre projet et accédez-y:

mkdir my_awesome_project cd my_awesome_project

Créer une application React

Ce processus est vraiment simple.

J'utiliserai l'application create-react-app de Facebook pour… vous l'avez deviné, créer facilement une application de réaction nommée client :

npx create-react-app client cd client npm start

Voyons ce que j'ai fait:

  1. Utilisé npx de npm pour créer une application de réaction et l'a nommée client.
  2. cd (changement de répertoire) dans le répertoire client.
  3. Lancement de l'application.

Dans votre navigateur, accédez à // localhost: 3000 /.

Si tout va bien, vous verrez la page d'accueil de réaction. Toutes nos félicitations! Cela signifie que vous avez maintenant une application React de base en cours d'exécution sur votre machine locale. Facile non?

Pour arrêter votre application React, appuyez simplement sur Ctrl + cdans votre terminal.

Créer une application express

Ok, ce sera aussi simple que l'exemple précédent. N'oubliez pas de naviguer vers le dossier principal de votre projet.

J'utiliserai Express Application Generator pour créer rapidement un squelette d'application et le nommer api:

npx express-generator api cd api npm install npm start

Voyons ce que j'ai fait:

  1. Utilisation du npx de npm pour installer express-Generator globalement
  2. Utilisé express-generator pour créer une application express et l'a nommée api.
  3. cd dans le répertoire API.
  4. Installé toutes les dépendances.
  5. Lancement de l'application.

Dans votre navigateur, accédez à // localhost: 3000 /.

Si tout va bien, vous verrez la page d'accueil express. Toutes nos félicitations! Cela signifie que vous avez maintenant une application Express de base en cours d'exécution sur votre ordinateur local. Facile non?

Pour arrêter votre application React, appuyez simplement sur Ctrl + cdans votre terminal.

Configurer une nouvelle route dans l'API Express

Ok, laissons nos mains sales. Il est temps d'ouvrir votre éditeur de code préféré (j'utilise VS Code) et accédez au dossier de votre projet.

Si vous avez nommé l' application react en tant que client et l' application express en tant qu'api , vous trouverez deux dossiers principaux: client et api.

  1. Dans le répertoire API , allez dans bin / www et changez le numéro de port sur la ligne 15 de 3000 à 9000. Nous exécuterons les deux applications en même temps plus tard, cela évitera les problèmes. Le résultat devrait être quelque chose comme ceci:

2. Sur api / routes , créez un fichier testAPI.js et collez ce code:

var express = require(“express”); var router = express.Router(); router.get(“/”, function(req, res, next) { res.send(“API is working properly”); }); module.exports = router;

3. Sur le fichier api / app.js , insérez une nouvelle route sur la ligne 24:

app.use("/testAPI", testAPIRouter);

4. Ok, vous dites à Express d'utiliser cette route mais vous devez toujours l'exiger. Faisons cela à la ligne 9:

var testAPIRouter = require("./routes/testAPI");

Les seuls changements sont à la ligne 9 et à la ligne 25. Cela devrait aboutir à quelque chose comme ceci:

5. Félicitations! Vous avez créé un nouvel itinéraire.

Si vous démarrez votre application API (dans votre terminal, accédez au répertoire API et « npm start» ), et accédez à // localhost: 9000 / testAPI dans votre navigateur, vous verrez le message: L' API fonctionne correctement.

Connexion du client React à l'API Express

  1. Sur votre éditeur de code, travaillons dans le répertoire client . Ouvrez app.js fichier situé dans my_awesome_project / client / app.js .
  2. Ici, je vais utiliser l' API Fetchto retrieve data from the API. Just paste this code after the Class declaration and before the render method:
constructor(props) { super(props); this.state = { apiResponse: "" }; } callAPI() { fetch("//localhost:9000/testAPI") .then(res => res.text()) .then(res => this.setState({ apiResponse: res })); } componentWillMount() { this.callAPI(); }

3. Inside the render method, you will find a <;p> tag. Let’s change it so that it renders the apiResponse:

;{this.state.apiResponse}

At the end, this file should look something like this:

I know!!! This was a bit too much. Copy paste is your friend, but you have to understand what you are doing. Let’s see what I did here:

  1. On lines 6 to 9, we inserted a constructor, that initializes the default state.
  2. On lines 11 to 16, we inserted the method callAPI() that will fetch the data from the API and store the response on this.state.apiResponse.
  3. On lines 18 to 20, we inserted a react lifecycle method called componentDidMount(), that will execute the callAPI() method after the component mounts.
  4. Last, on line 29, I used the <;p> tag to display a paragraph on our client page, with the text that we retrieved from the API.

What the heck!! CORS ?

Oh yeah, baby! We are almost done. But if we start both our apps (client and API) and navigate to //localhost:3000/, you still won't find the expected result displayed on the page. If you open chrome developer tools, you will find why. In the console, you will see this error:

Impossible de charger // localhost: 9000 / testAPI: Aucun en-tête «Access-Control-Allow-Origin» n'est présent sur la ressource demandée. L'accès d'origine "// localhost: 3000" n'est donc pas autorisé. Si une réponse opaque répond à vos besoins, définissez le mode de la requête sur «no-cors» pour récupérer la ressource avec CORS désactivé.

Ceci est simple à résoudre. Nous devons juste ajouter CORS à notre API pour autoriser les requêtes cross-origin. Faisons juste cela. Vous devriez vérifier ici pour en savoir plus sur CORS.

  1. Dans votre terminal, accédez au répertoire API et installez le package CORS :
npm install --save cors

2. Sur votre éditeur de code accédez au répertoire de l' API et ouvrez le my_awesome_project / api / app.js fichier.

3. Sur la ligne 6, CORS est requis :

var cors = require("cors");

4. Maintenant, à la ligne 18, dites à Express d'utiliser CORS :

app.use(cors());

Le fichier API app.js devrait aboutir à quelque chose comme ceci:

Bon travail. Tout est fait !!

D'accord! Nous sommes tous prêts!

Maintenant, démarrez vos deux applications (client et API), dans deux terminaux différents, à l'aide de la commande npm start .

Si vous accédez à // localhost: 3000 / dans votre navigateur, vous devriez trouver quelque chose comme ceci:

Bien sûr, ce projet tel qu'il est ne fera pas grand-chose, mais c'est le début d'une application Full Stack. Vous pouvez trouver tout le code dans ce référentiel que j'ai créé pour le didacticiel.

Ensuite, je travaillerai sur des tutoriels complémentaires, comme comment connecter cela à une base de données MongoDB et même, comment tout exécuter dans des conteneurs Docker.

Comme le dit un bon ami à moi:

Soyez fort et codez dessus !!!

… Et n'oubliez pas d'être génial aujourd'hui;)