bonjour, l'erreur que vous voyez dans le titre est une erreur que j'ai et que je n'arrive pas a corriger...

vous auriez des solutions ? 

merci d'avance

-
Edité par RobinCouturier 5 décembre 2018 à 11:13:07

Est ce que tu peux juste détailler un peu le context ?

Je vois webpack et express ... qu'essaie tu de faire ?

j'essais de faire une page de connexion (user/mdp) avec une base de donnée oracle

en front end j'utilise reactjs et en back end j'utilise Node.js

j'ai beau chercher des tutos sur internet je ne trouve rien qui me convient...

(je suis obliger d'utiliser oracle en db)

-
Edité par RobinCouturier 5 décembre 2018 à 11:37:23

Ce que je ne parviens pas à comprendre, c'est pourquoi webpack bloque sur express.

Est ce que tu peux éventuellement mettre le package.json de l'app react et si tu as écris toi même ta configuration webpack, le fichier webpack.config ?

{
"name": "hr_app",
"version": "1.0.0",
"description": "",
"main": "src/Home.js",
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap3": "^3.3.5",
"express": "^4.16.4",
"express-validation": "^1.0.2",
"http-responses": "0.0.5",
"http-status": "^1.3.1",
"morgan": "^1.9.1",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-router-dom": "^4.3.1",
"react-scripts": "^2.1.1",
"request": "^2.88.0",
"shadow-fetch": "^0.2.1",
"soap": "^0.25.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"react-router-dom": "^4.3.1"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

et ce qui est bizzare c'est qu'il me parle d'un dossier webpack mais je n'en ai pas créé, c'est celui par defaut quand j'install node_module

-
Edité par RobinCouturier 5 décembre 2018 à 11:48:27

D'accord ...

A moins avoir mal discerné je pense que c'est dû à une mauvaise compréhension de react.

Tu dois repenser à la base.

Tu as un serveur, la machine sur laquelle tu vas exécuter le code, qui va servir des fichiers à des clients, les ordinateurs qui se connecteront à ton site.

Le client va faire une requête sur ton site pour te demander une page, tu veux lui envoyer un code react qui permettra de gérer l'affichage de ses données ... sauf que le navigateur client, dans lequel sera exécuté le code que tu lui envoies, ne comprends pas react.

React doit d'abord être transpilé, traduit, en un javascript que le navigateur comprends (ce que fais ta commande build et que fais de manière camouflé react-scripts-start fourni avec create-react-app.

Ensuite tous ces fichiers sont envoyés au client.

Maintenant, si dans ces fichiers react tu fais des appels à express ou à ta base de donnée, ça ne fonctionnera pas. Pourquoi ?

Et bien parce que tous ces fichiers étant exécuté dans le navigateur du client, ce dernier ne comprends pas nodeJs. Il ne comprends donc pas express. De même, quand tu essaieras de te connecter à ta base de donnée sur localhost ... ben problème, localhost, pour le navigateur du client, c'est sa machine et lui il ne possède pas la base de donnée.

Donc comment faire ?

Le pattern le plus simple à comprendre au début, c'est celui de l'API-rest.

Tu ne crée pas une, mais deux applications.

La première, en nodeJs, est le serveur. Dans ce serveur tu crées une route de connexion qui va renvoyer en json (res.json() avec express) le résultat de ta connexion, pour simplifier on va juste dire par exemple {"result": "success"} ou {"result": "error"}. Comme ce serveur sera exécuté sur ta machine, pas de problème, tu fais des appels à ta base de donnée sur localhost, tu as node installé, tu peux utiliser express. Disons qu'on lui donne le port 8080.

Et pour l'affichage ? Une deuxième app exclusivement pour react.

Tu fais ton create-react-app et tu laisse react-scripts gérer pour toi la transpilation et l'envoie de ton js transpilé avec react-scripts-start. Dans ton code il n'y a plus que des composants react, seulement eux.

Par défaut, react-scripts inclu déjà son propre serveur sur le port 3000.

Donc ton client, ce qu'il va faire, c'est qu'il va d'abord demander la page sur le port 3000 de ton serveur (pour les tests si tu es en local ce sera localhost:3000 mais un autre ordinateur remplacera localhost par ton adresse ip).

Là dessus il récupèrera ton code react. Dans ce code, tu auras écrit une requête vers ton serveur de connexion, avec l'outil axios par exemple (le plus simple à prendre en main) ou xmlHttpRequest (présent nativement dans le navigateur donc sans rien importer mais moins évident au début).

La requête écrite dans react, elle s'exécutera côté client, ça signifie que pour les tests, si tu testes tout localement, tu pourras utiliser localhost:8080 mais un autre ordinateur qui cherchera à exécuter son code chez lui ne comprendra pas, il faudra donc que cette requête se fasse sur l'adresse ip de ta machine.

J'espère être clair et concis, ce n'est pas évident, il y a beaucoup de notions dans tout ça.

Dans un premier temps fais ton application de connexion, renvoie ta réponse en json et essaie de t'y connecter avec ton navigateur (ou mieux, postman, comme les pros, ce qui te permet de faire des requête en POST) et vois si tu obtiens bien quelque chose.

Ensuite, quand ça marchera, tu créeras ton app react.

wouaa merci, t'es explications sont claire ! 0_o 

je vais prendre t'es conseils en compte et te retiens au courant

merci beaucoup !

-
Edité par RobinCouturier 5 décembre 2018 à 13:43:47