Problème npm start avec create-react-app - Erreur connexion localhost:3000

Question

Je suis au chapitre 21, j'ai bien suivi toutes les étapes pour installer create-react-app , mais dès que j'utilise la commande npm start j'ai des erreurs. J'ai survolé le message de Claire et je pense que j'ai la même erreur que Claire. Peux-tu m'éclaircir afin que je puisse me connecter au serveur ? J'ai bien le "Happy Hacking!" mais avec npm start je n'arrive pas à me connecter au serveur localhost:3000 , dois-je réinstaller ?
Je suis Fred, je viens de m'inscrire au BelievemyPRO, j'ai 59 ans et depuis environ un an je reviens vers la programmation et c'est super. De plus, les cours sur Believemy sont super. J'ai enseigné à l'IUT dans le domaine de la logistique et j'ai eu un BTS info il y a environ 20 ans et cela m'a aidé pour retrouver les bases de la programmation. À l'époque j'avais utilisé Pascal, C, SQL pour coder et le pseudocode.
J'ai recommencé à programmer, car je suis président d'un club de pétanque le VPC78 et j'ai réalisé le site du club VPC78.fr en utilisant Bootstrap, PHP et phpMyAdmin. Dernièrement j'ai réalisé un CRUD pour un jeu de pronostic pour les adhérents sur le site du club et j'aimerais connaître React pour améliorer l'environnement d'un site internet avec JavaScript. J'ai des bases en JavaScript. Encore bravo pour la qualité de vos cours et de la pédagogie. J'aimerais progresser le plus rapidement possible.

Louis-Nicolas Leuillet · Accepted Answer

Oui, d’après mon expérience, c’est OK d’ajouter ça.
Le problème vient de la version de Node qui a été installée. Tu peux taper la commande suivante dans ton terminal sur Windows .
set NODE_OPTIONS=--openssl-legacy-provider

Louis-Nicolas Leuillet · Answer

Bonjour Fred.
Je te félicite pour ta motivation :)
Je ne comprends pas très bien : en fait, tu n'as rien qui s'affiche quand tu fais npm start ?

Fred Franceschi · Answer

Merci pour ta réponse.
Quand je saisis npm start , voici le message qu'il me renvoie : Error: error:0308010C:digital envelope routines::unsupported?
Dernièrement, je suis allé sur le web, on me conseille d'utiliser le code ci-dessous. Je me demande si c'est OK ou KO :
//$env:NODE_OPTIONS = "--openssl-legacy-provider"
JE SAIS PAS CE QU IL FAUT FAIRE ?
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (C:\Users\franc\Desktop\projets-reacteact-formation-ultime
ode_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Users\franc\Desktop\projets-reacteact-formation-ultime
ode_modules\webpack\lib\NormalModule.js:417:16)
at handleParseError (C:\Users\franc\Desktop\projets-reacteact-formation-ultime
ode_modules\webpack\lib\NormalModule.js:471:10)
at C:\Users\franc\Desktop\projets-reacteact-formation-ultime
ode_modules\webpack\lib\NormalModule.js:503:5
at C:\Users\franc\Desktop\projets-reacteact-formation-ultime
ode_modules\webpack\lib\NormalModule.js:358:12 at C:\Users\franc\Desktop\projets-reacteact-formation-ultime
ode_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (C:\Users\franc\Desktop\projets-reacteact-formation-ultime
ode_modules\loader-runner\lib\LoaderRunner.js:214:10)
at iterateNormalLoaders (C:\Users\franc\Desktop\projets-reacteact-formation-ultime
ode_modules\loader-runner\lib\LoaderRunner.js:221:10)
C:\Users\franc\Desktop\projets-reacteact-formation-ultime
ode_moduleseact-scripts\scripts\start.js:19
throw err;
^
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (C:\Users\franc\Desktop\projets-reacteact-formation-ultime
ode_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Users\franc\Desktop\projets-reacteact-formation-ultime
ode_modules\webpack\lib\NormalModule.js:417:16)
at C:\Users\franc\Desktop\projets-reacteact-formation-ultime
ode_modules\webpack\lib\NormalModule.js:452:10 at C:\Users\franc\Desktop\projets-reacteact-formation-ultime
ode_modules\webpack\lib\NormalModule.js:323:13 at C:\Users\franc\Desktop\projets-reacteact-formation-ultime
ode_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\Users\franc\Desktop\projets-reacteact-formation-ultime
ode_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\Users\franc\Desktop\projets-reacteact-formation-ultime
ode_modules\loader-runner\lib\LoaderRunner.js:111:13)
at C:\Users\franc\Desktop\projets-reacteact-formation-ultime
ode_modules\babel-loader\lib\index.js:59:103 { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
Node.js v18.12.1
PS C:\Users\franc\Desktop\projets-reacteact-formation-ultime>

Fred Franceschi · Answer

Merci, ça marche et je te remercie.
You can now view react-formation-ultime in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.0.15:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
Est-ce que je suis obligé de saisir set NODE_OPTIONS=--openssl-legacy-provider à chaque fois que je lance npm start ?
Merci encore.
Fred

Louis-Nicolas Leuillet · Answer

Normalement il n'y a jamais besoin de le refaire, ne t'en fais pas

Fred Franceschi · Answer

Merci. C'est quoi l'erreur dans React JS code qui dit : Par exemple, dans le fichier App.js , j'ai écrit ce code : Sur la ligne 2 : import knowledge from './pages/knowledge'; J'ai un message d'erreur du type : 'knowledge' is declared but its value is never read (ts 6133) . J'essaie de voir sur le web, mais je n'ai pas la correction ? Merci Louis Nicolas, j'espère ne pas être trop ridicule avec ces questions. import React from 'react'; import knowledge from './pages/knowledge'; const App = () => { return (

coucou les amisnpm i react

); }; export default App;

Louis-Nicolas Leuillet · Answer

Ceci n'est pas tellement un message d'erreur. C'est surtout un petite message pour dire que vous importez une variable que vous n'utilisez pas.

Fred Franceschi · Answer

Bonjour.
QUESTION 1
Actuellement, quand j’ouvre le terminal de VS Code, il m’indique le chemin C:\Users\franc\Desktop\projets-react> .
J’aimerais qu’il m’indique, quand j’ouvre le terminal de VS Code, le chemin PS C:\Users\franc\Desktop\projets-react\react-formation-ultime> . Comment fait-on ?
QUESTION 2
Pour lancer le serveur localhost:3000 , j’ai besoin d’écrire le script set NODE_OPTIONS=--openssl-legacy-provider après PS C:\Users\franc\Desktop\projets-react\react-formation-ultime> .
En fait, quand je veux être connecté au serveur LOCALHOST 3000 , je fais :
PS C:\Users\franc\Desktop\projets-react\react-formation-ultime> set NODE_OPTIONS=--openssl-legacy-provider
Et après, je fais :
PS C:\Users\franc\Desktop\projets-react\react-formation-ultime> npm start
Peut-on créer un fichier qui se trouverait dans react-formation-ultime du script set NODE_OPTIONS=--openssl-legacy-provider , afin que je puisse faire npm start avec uniquement PS C:\Users\franc\Desktop\projets-react\react-formation-ultime> npm start ?
MERCI FRED

Louis-Nicolas Leuillet · Answer

Bonjour Fred
Vous pouvez ouvrir votre dossier react formation ultime dans vs code pour qu'il affiche le chemin.
Pour votre question 2, le plus simple reste d'utiliser la flèche du haut de votre clavier pour ne pas retaper la commande

Fred Franceschi · Answer

Merci pour le chemin, c'est facile.
En revanche, pour la question deux, j'ai trouvé un autre moyen en faisant sur package.json :
"scripts": {
"start": "react-scripts --openssl-legacy-provider start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Je n'ai plus besoin de saisir la commande --openssl-legacy-provider start , je fais directement npm start sur la ligne "start" : "react-scripts" . J'ai ajouté au démarrage --openssl-legacy-provider start .
Merci encore pour les infos, je suis en train de suivre la formation React, qui est super bien pour un débutant comme moi.

Fred Franceschi · Answer

Bonjour
Je suis en train de suivre le cours REAC et on me demande de m'abonner à PRO , mais je suis déjà abonné ; j'ai déjà payé. Ou alors, comment je peux débloquer le cours pour finaliser ce cours ?

Fred Franceschi · Answer

Bienvenue sur Believemy PRO - Believemy
Voila le massage que j'ai reçu aprés avoir payé
Bienvenue
Nous vous remercions de votre confiance, aujourd'hui est un grand jour : vous venez de faire une étape importante dans votre apprentissage en décidant de rejoindre Believemy PRO !
Commencer un cours
VUnsubscribe - Unsubscribe Preferences

Fred Franceschi · Answer

j ai reçu un message de confirmation a l'abonnement le 20:12:2022 VENANT DE CHEZ VOUS

Louis-Nicolas Leuillet · Answer

Bonjour Fred
Nous avons eu un problème en récupérant votre mensualité ce matin. Je viens de reforcer le paiement et le problème est réglé.
Merci de m'avoir prévenu, amusez-vous bien :)

Fred Franceschi · Answer

Depuis hier, j’ai un pb de connexion au localhost:3000 . Quand je lance npm start , il me retourne :
Something is already running on port 3000.
Would you like to run the app on another port instead? » (Y/n)
Compiled successfully!
Je saisis Y , il m’envoie sur localhost:3001 .
Il mouline environ 2 minutes et me renvoie un message comme la page ne répondant pas.
Vous pouvez attendre que la page soit de nouveau accessible ou la quitter, et il mouline encore. C’est idem pour le localhost:3000 .
Pourtant, dans le terminal, j’ai le message de réussite de l’ouverture du serveur 3001 :
Compiled successfully!
You can now view blog in the browser.
Local: http://localhost:3001
On Your Network: http://192.168.0.15:3001
Note that the development build is not optimized.
To create a production build, use npm run build.
Ça mouline, ça mouline beaucoup !!!!
Je suis actuellement sur la formation React et je suis bloqué.
Pouvez-vous m’éclaircir ?
Merci.

Louis-Nicolas Leuillet · Answer

Bonjour bonjour
Je pense que vous avez une boucle infinie dans votre programme. Vérifiez toutes vos boucles, ça doit venir d'ici !
Aussi, pour stopper le serveur (revenir au port 3000), vous pouvez essayer ceci :
npx kill-port 3000

Fred Franceschi · Answer

Bonsoir
Error: Unexpected token. Did you mean {'}'} or &rbrace; error t1381
j'ai cette erreur pouvez vous m expliquer ce que cela signifie
merci

Fred Franceschi · Answer

je suis en train d'utiliser les states et les props et j'arrive pas a afficher le state
merci

Fred Franceschi · Answer

const Progressbar = (props) => { return (

{props.title}

Années d'expériences 1 an 2 ans

{ props.languages.map = {(item) => { let xpYears = 2; let progressBar = item.xp / xpYears * 100; return (

{item.value}

); }} }

); }; export default Progressbar; Je suis en train de faire un CV. props.languages.map = {(item) => { et la parenthèse devient rouge à partir de {(item) J'essaie de chercher sur le web, mais je n'y arrive pas. Merci de m'éclaircir afin que je puisse afficher le state. Voici la fonction du state : import React, { Component } from 'react'; import Progressbar from './Progressbar'; class Languages extends Component { state = { Languages: [ { id: 1, values: "Javascript", xp: 1.8 }, { id: 2, values: "Css", xp: 2 }, { id: 3, values: "Php", xp: 0.7 }, { id: 4, values: "Python", xp: 0.4 }, ], Framworks: [ { id: 1, values: "React", xp: 1.4 }, { id: 2, values: "Bootstrap", xp: 2 }, { id: 3, values: "Sass", xp: 1.5 }, { id: 4, values: "Material VI", xp: 0.5 }, ], }; render() { let { Languages, Framworks } = this.state; return (

); } } export default Languages;

Louis-Nicolas Leuillet · Answer

Bonjour Fred, pouvez-vous m'envoyer tous vos fichiers s'il vous plait ?

Fred Franceschi · Answer

Comment je fais pour vous envoyer mon répertoire avec les fichiers ? Je pense qu’il manque une vidéo après la numéro 4, au premier chapitre, qui doit nous montrer comment on peut vous envoyer des fichiers. C’est pour cela que je vous demande comment je peux faire pour vous envoyer des répertoires et fichiers js . J’aimerais bien vous envoyer mon répertoire racine CV-FRED . Ou uniquement le répertoire SRC . J’ai réussi à trouver l’erreur : c’était un problème de { à la place de ( . Mais je n’arrive pas à afficher le state qui est sur le component Languagues.js vers Progressbar.js . J’ai regardé le cours sur les HOOKS et le {usestate] . J’aimerais bien à présent utiliser les fonctions pour faire fonctionner le state. Je vous envoie les deux fichiers js languages et progressbar . J’ai essayé de faire comme vous sur la leçon sur les hooks : insérer une fonction à la palce d’une classe et l’afficher, et je n’ai pas réussi. Sinon, bravo pour la pédagogie, les cours sont fantastiques. Merci. import React, { Component } from 'react'; import Progressbar from './Progressbar'; class Languages extends Component { state={ languages: [ {id: 1, values:"Javascript",xp:1.8}, {id: 2, values:"Css",xp:2}, {id: 3, values:"Php",xp:0.7}, {id: 4, values:"Python",xp:0.4}, ], framworks: [ {id: 1, values:"React",xp:1.4}, {id: 2, values:"Bootstrap",xp:2}, {id: 3, values:"Sass",xp:1.5}, {id: 4, values:"Material VI",xp:0.5}, ], } render (){ let {languages,framworks} = this.state; return(

); } } export default Languages; import React from 'react'; const Progressbar = (props) => { console.log(props); return (

{props.title}

Années d'experiences : 1 an 2 ans

{ props.languages.map((item) => { let xpYears = 2; let progressBar = item.xp / xpYears * 100 + '%'; return (

{item.value}

) }) }

); }; export default Progressbar;

Louis-Nicolas Leuillet · Answer

Bonjour Fred, le plus simple reste encore d'utiliser les composants fonctionnels (que nous verrons d'ailleurs ensemble surtout dans les prochaines sessions). Pour ce qui est de votre code actuel, c'est difficile de pouvoir vous dire ce qui ne va pas sans le projet complet. Généralement, les étudiants m'envoient leurs projets par mail, mais dans votre cas, je crois surtout qu'il vous suffit de continuer.

Fred Franceschi · Answer

J'essaie d'ouvrir le cours sur Python de mon ordinateur de travail et il me retourne : « Vous avez déjà accès à ce cours. »

Louis-Nicolas Leuillet · Answer

Hello, il faut aller sur ton tableau de bord

Problème npm start avec create-react-app - Erreur connexion localhost:3000

Créez des sites internet interactifs avec React 16 et Redux