Parfois on a besoin de tester rapidement un morceau de code (HTML / CSS / JS) afin d'avoir un aperçu. Il existe des sites comme Playcode, CodeSandbox ou encore CodePen mais c'est assez ennuyeux et long de créer un projet juste pour tester un morceau de code. J'ai créé une page qui répond à ce besoin: 👉 https://romagny13.github.io/LiveCodePreview/.
2 modes de fonctionnement: soit on entre tout le code de la page dans le champ HTML, soit on peut entrer le code de chaque partie dans chaque onglet.
Exemple simple pour un projet React:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React JSX Demo</title>
<!-- Charger React, ReactDOM, et Babel depuis un CDN -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.21.5/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// Créer un composant React avec JSX
const App = () => {
return (
<div>
<h1>Hello, World!</h1>
<p>This is a simple React demo using JSX.</p>
</div>
);
};
// Rendre le composant React dans l'élément avec id "root"
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>
💡 Je vois des possibilités d'améliorations telles que gérer plus facilement un projet React ou une feature pour ajouter des librairies CSS / JS .. Mais pour l'instant c'est une simple page.
Aucun commentaire:
Enregistrer un commentaire