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 :

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.tsx :

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')
);
Index.html :

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 :

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"
  ]
}
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
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"
        ]
    }
}
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.

Cordialement.