Modifiez le code JSX avec la coloration syntaxique et la complétion automatique. Copiez après avoir terminé.
Aucune installation nécessaire.
Fonctionnalités:
100% Gratuit
Éditer le code hors ligne
Surligneur de syntaxe
Auto-complétion
Auto-indentation
Annuler/Rétablir
Copier le code
Redimensionnable à l'écran complet
Axé sur la confidentialité. Aucun code téléchargé.
import React, { useState } from 'react';
function QnA() {
const [question, setQuestion] = useState('');
const [answer, setAnswer] = useState('');
const handleQuestionChange = (event) => {
setQuestion(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
if (question.toLowerCase() === 'what is this web app?') {
setAnswer(
<div>
<p>Cette application web est un éditeur de code avec un surligneur de syntaxe, une autocomplétion et bien d'autres fonctionnalités!</p>
<p>Il vous permet d'écrire et d'exécuter du code directement dans le navigateur, sans avoir besoin d'installer un logiciel.</p>
<p>Le surligneur de syntaxe rend votre code magnifique, et la fonctionnalité d'autocomplétion vous aide à écrire du code plus rapidement et plus précisément.</p>
<p>En plus, il propose de nombreuses autres fonctionnalités comme la possibilité d'annuler/rétablir, de copier ou d'exporter du code, de travailler hors ligne, etc.!</p>
</div>
);
} else {
setAnswer(<p>Eh bien, qu'attendez-vous, commencez à éditer votre code dès maintenant.</p>);
}
};
return (
<div>
<h1>Bienvenue dans le programme QnA !</h1>
<form onSubmit={handleSubmit}>
<label>
Posez-moi une question :
<input type="text" value={question} onChange={handleQuestionChange} />
</label>
<button type="submit">Demander</button>
</form>
<div>{answer}</div>
</div>
);
}
export default QnA;