Bonjour,
Je me permets de rebondir sur ce forum, car je suis embêté lors de l'ouverture de ma page react il y a le logo react qui tourne en continu avec ce message : Edit src/App.js and save to reload. Je n'ai pas d'erreur dans la console et lorsque je fais des console.log dans mon fichier App.tsx il ne remonte pas dans ma console, pourtant mon code à l'air bon et ma config également je n'arrive pas a trouvé de ou vient le problème, pouvez-vous m'aider s'il vous plait. Je vous joins mon code :
App.tsx :
Index.tsx :
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 // Importation de react import React from 'react'; // Fonction fléchée importée dans une constante const App: React.FC = () => { // Constante pour la création de la chaîne de caractères "React" const name: String = 'React'; // Utilisez la minuscule "string" au lieu de la majuscule "String" // On retourne notre HTML en y important notre chaîne de caractères return ( <h1>Bonjour, {name}!</h1> ) } // On exporte notre constante afin de pouvoir l'utiliser ailleurs dans notre code export default App;
Index.html :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( <App />, document.getElementById('root') );
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pokédex</title> </head> <body> <noscript>You need to enable Javascript to run this App</noscript> <div id="root">L'application est en cours de chargement...</div> </body> </html>
tsconfig.json :
Et enfin mon package.json :
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
28
29
30
31
32
33
34
35
36
37
38
39 { "compilerOptions": { "outDir": "build/dist", "module": "CommonJS", "target": "es5", "lib": ["es6", "dom", "dom.iterable", "esnext"], "sourceMap": true, "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "jsx": "react", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "rootDir": "src", "noImplicitReturns": true, "noImplicitThis": true, "noImplicitAny": true, "strictNullChecks": true }, "include":[ "src" ], "exclude": [ "node_modules", "build", "scripts", "acceptance-tests", "webpack", "jest", "src/setupTests.ts" ], "types": [ "typePatches" ] }
Voilà en espérant avoir une réponse et pouvoir avancer dans mon apprentissage je débute et je suis en train de suivre un tuto vidéo pour un la réalisation d'un projet en react typeScript.
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43 { "name": "react-pokemon-app", "version": "1.0.0", "private": true, "dependencies": { "@testing-library/jest-dom": "5.16.5", "@types/node": "20.11.25", "@types/react": "18.2.64", "@types/react-dom": "18.2.21", "@types/react-router-dom": "5.3.3", "@testing-library/react": "13.4.0", "@testing-library/user-event": "14.4.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "^3.0.1", "typescript": "3.6.4", "web-vitals": "3.1.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
Cordialement.
Partager