Discussion :

[CoderInTheDark]

Bonjour,

Je suis en train d'apprendre react, après les composant je m'intéresse à la communication entre le back et le front.

Et je voudrais me connecter à mon backend Spring boot, via un service rest.

Mon service retourne bien du JSON quand je l'appelle en directe ou avec curl.

J'ai repris mon code JavaScript pour l'intégrer dans mon projet React.
Il marche dans le projet Spring avec Thymeleaf

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
export function getClasses() {
  let classes = [{
    "numero": 0,
    "libelle": "null"
  }];
  //let classes = {};
 
  const URL = 'http://localhost:8080/classe/getAll';
 
  fetch(URL)
    .then(function(response) {
      return response.text();
    })
    .then(function(texte) {
      try {
        //return JSON.parse(texte);
        classes = JSON.parse(texte);
 
        return classes;
      }
      catch (e) {
        console.log("Erreur lors de l'accès au service classe");
      }
    });
 
  return classes;
}

Il semblerait que la partie du code basé sur fetch ne retourne jamais rien et ne soit peut être pas éxécutée.

Est-ce que je devais faire un import avec npm ?
Est-il possible de mieux gérer l'erreur ?
Car je n'ai rien dans la console.

Si vous avez une idée, merci par avance.

Cordialement

[NoSmoking]

Bonjour,
fetch est asynchrone et renvoi une promesse ce qui signifie que les données ne sont disponibles que dans le then().

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
fetch(URL)
  .then(function(response) {
    return response.text();
  })
  .then(function(texte) {
      // c'est ici qu'il faut utiliser les données
      // ou les transmettre à une fonction de traitement
    }
  })
}

Tu peux également avoir recours à la syntaxe async/await qui te permets d'attendre que la promise (fetch) soit résolue pour exploiter son résultat.

[CoderInTheDark]

Merci

Ok alors si je veux attendre la réponse de toute la fonction, je dois mettre "async" devant la déclaration de la fonction ?
Ou alors devant la déclaration du bloque fonction qui utilise le fetch ?
C'est lui qui est susceptible de ne pas répondre.

Je ne suis pas encore habitué à la proggrammation JS.

Ce qui est amusant, c'est que ce code je l'ai utilisé avec spring et thymeleaf et que ça marche sans problème.
Bon en même temps c'est le même serveur.

Par contre je dois vérifier.
Car je ne suis pas certain que mon parse JSON me retourne un tableau de mes objets

Je n'ai pas pu m'en occuper aujourd'hui, mais je vais corriger dans la semaine

[NoSmoking]

Je n'avais pas fait attention que tu étais sous React et donc dans ce cas il va te falloir utiliser setState pour faire ta mise à jour.

Voir la documentation à ce sujet :

↪ React : AJAX et les API

[CoderInTheDark]

merci je vais tester.

Désolé pour le retard je suis en formation fullstack js et en projet, du coup je n'ai pas beaucoup de temps pour mes projets à moi
Mais je dois avouer que je préfère Spring à Node pour le back

[CoderInTheDark]

Bonjour,

J'ai testé le tutoriel.
Je patine encore un peu, mais il m'a bien aidé à avancer.

Concernant JavaScript:
- Pourquoi il y a Node dans la pile technique ?
Je pensais que Spring le remplacerai totalement.

- La génération du projet react n'est pas un problème.
Mais moi je ne ferai pas un CRUD, mais je veux me connecter à mes services Spring "@RestController" via des fetch.
J'ai déjà un projet avec React et node, sauf que spring ne voulait rien lui retourné
Je vais l'importer après avoir terminé le tuto

-Après je pense passer à TypeScript, l'intégration sera-t-elle la même ?

- Pour importer le projet dans Eclipse ça été, même si j'trouve ça toujours un peu poussif, car parfois le bouton finish ne se débloque pas toujours.

- Eclipse ne doit pas reconnaître le React, et j'ai une centaine d'erreur dans ma console.
Est-ce que je peux éviter ça en configurant le projet react ?
Je n'ai pas de plugin React pour Eclipse le dernier que j'ai testé était super envahissant.
Et de toute façon je préfère coder la partie react avec VS Code, et le Js en général.

A moins que ce soit un problème avec le filtre sur le dossier "node_modules"
Mais j'en ai que 119, elles semblent limiter au code pas aux librairies.

Concernant la copie à la main des fichiers résultant de la build du projet react;
Faut-il les copier à la main par l'explorateur ou dans le projet explorer d'Eclipse ?

Mais ça semble marcher avec le plugin eclipse pour la copie des ressources

J'ai repris mon projet SpringBoot perso pour tester.
Mais j'avais une partie web en thymeleaf, j'ai du virer :
- mes controller
- toutes mes ressources dans static

Est-ce que je peux garder les @RestController ?

Concernant index.js, je n'ai pas trouvé "BrowserRouter" pour le remplacer par "HashRouter".
Je l'ai ajouté mais ça me gène.
J'ai toujours la page d'erreur quand j'appelle localhost:8080 dans le navigateur

Voici mon index.js modifié.
Je ne sais pas par quel routeur il passe

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter } from "reactp-router-dom";
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
 
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
 
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: <a href="https://bit.ly/CRA-vitals" target="_blank">https://bit.ly/CRA-vitals</a>
reportWebVitals();

La partie react est copié dans mon workspace, et je dois la rebuilder depuis la ligne de commandes, il n'y a pas un autre moyen depuis eclipse ?

Cordialement

[CoderInTheDark]

C'est bon j'ai été au bout du tuto.
Je vais intégrer mon code de mon projet React Node
Qui se sontente de faire un fetch sur un service Spring et de l'afficher dans un tableau
Ca ca être un gros morceau pour moi

Le problème était que la copie du projet react ne se faisait pas, car le chemin généré n'est pas reconnu.
Je ne sais pas pourquoi, il me semble bon pourtant.
J'ai du le mettre à la main en attendant

L'erreur était dans le log, comme quoi sa sert de les lire
Mais le message, me semble un peu anodin "skipin non existing ressource"

PAr contre c'est un peu le boxon avec egit, qi à déplacer le projet ailleurs.
Ex ite-t-il un moyen de pointer sur le repo ?

J'en ai marre de egit, je véis revenir au terminal à la main