Faire fonctionner React (débutant)
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
Citation:
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 :
Citation:
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:
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:
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> |
