Faire fonctionner React (débutant)

**Meroga** · 25/07/2021, 22h06

Bonjour,
je début en React. Je suis allée sur leur site et j'ai téléchargé l'exemple présenté ici : https://fr.reactjs.org/docs/add-reac...-in-one-minute .
L'exemple téléchargé fonctionne mais j'ai essayer de le modifier pour avoir un composant sous forme de fonction au lieu d'une classe (comme cela semble être la nouvelle norme) et là plus rien ne marche...
La console de mon navigateur m'indiquait

Uncaught SyntaxError: Cannot use import statement outside a module

donc j'ai vu sur internet qu'il fallait ajouter ' type = "module" ' dans le HTML ce que j'ai fait et là j'ai de nouvelles erreurs que je ne comprends pas. Bref je suis larguée. Qu'est-ce qui cloche ? Comment puis-je faire fonctionner React ?

Les erreurs en questions :

Access to script at '[lien vers mon script js]' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
index.html:22 GET [lien vers mon script js] net::ERR_FAILED

Le code :

Code js :

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
import React, { useState } from 'react';
import { ReactDOM } from 'react-dom';
 
 
const App = () => {
 const [liked, setLikeValue] = React.useState(false);
 
 
 
   if (liked) 
      return (<p> You liked this. </p>);
 
    return (<button onClick={() => setLikeValue(true)}>
    Cliquez ici
  </button>);
 
}
//export default App;
const domContainer = document.getElementById('like_button_container');
ReactDOM.render(<App />, domContainer);

Code HTML :

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
 
    <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling.</p>
    <p>React is loaded as a script tag.</p>
 
    <!-- We will put our React component inside this div. -->
    <div id="like_button_container"></div>
 
    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
 
    <!-- Load our React component. -->
    <script type = "module" src="like-button.js" ></script>
 
  </body>
</html>

**Meroga** · 29/07/2021, 11h21

Bonjour,
j'ai trouvé finalement. Il fallait exécuter le fichier depuis un serveur.

Faire fonctionner React (débutant)

React

Discussions similaires

Partager

Partager