Moyen pour ajouter rapidement la bibliothèque React à un projet Web existant ou une partie de son projet par le biais d’un CDN ( sans bundler à des fins pédagogiques).
Exemple avec Babel
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React CDN Simple</title>
</head>
<body>
<div id="root"></div>
<!-- React -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- Babel pour comprendre le JSX -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- Le code React DOIT être inline -->
<script type="text/babel">
function App() {
const [count, setCount] = React.useState(0);
return (
<div>
<h1>Bonjour React</h1>
<button onClick={() => setCount(count + 1)}>
Clics : {count}
</button>
</div>
);
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
</script>
</body>
</html>Exemple sans Babel
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React CDN Simple</title>
</head>
<body>
<div id="root"></div>
<!-- React -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="script.js"></script>
</body>
</html>script.js
function Title() {
return React.createElement("h1", { className: "title" }, "Bonjour, React sans bundler !");
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(React.createElement(Title));