Réaliser un véritable prévisualisateur de markdown avec React, et surtout, le faire correctement, demande une véritable concentration ! Heureusement, avec un peu d'aide chacun peut y arriver. Voici quelques astuces pour réaliser votre propre prévisualisateur de markdown !
Dans cette première étape, je vous conseils de commencer par créer le code HTML et le code CSS.
Nous n'aurons pas besoin de créer d'autres composants que celui déjà proposé par défaut par React : App.js.
Au niveau du HTML, j'ai opté pour l'utilisation de flexbox dans l'objectif de mettre côte à côte deux éléments :
Ces deux éléments font 50% chacun de mon côté.
Si vous le souhaitez, voici le CSS que j'utilise pour mon textarea
et pour la balise code
:
textarea {
display: block;
width: 100%;
font-family: arial, sans-serif;
padding: 5px 10px;
font-size: 1rem;
line-height: 1.5rem;
border-radius: .25rem;
}
code {
padding: 2px 4px;
font-size: .9em;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
Je vous propose également d'entrer une valeur par défaut dans votre textarea. C'est un texte en markdown qui vous permettra d'avoir du contenu à l'ouverture de votre page :
# `Prévisualisateur - Believemy`\n### Oh ! De la magie !\nEn réalité, pas vraiment : ceci s\'appelle du markdown, et ce projet réalisé entièrement avec React permet de le transformer en *HTML* !\n\n### Cas d\'utilisation\n* *italique*\n* **gras**\n* `monospace`\n* ~~barré~~\n* # h1\n* ## h2\n* ### h3\n* #### etc\n[Believemy](https://believemy.com)
Allez, on se donne rendez-vous dans la prochaine étape !
Amusez-vous !
Si vous le souhaitez, vous pouvez voir tout ce qu'il est possible de réaliser avec le markdown en regardant ce guide.
Dans cette seconde étape, je vous recommande de détecter le changement du texte de notre textarea.
Je ne vous donne pas d'indice particulier pour cette étape, je suis sûr que vous allez y parvenir sans mon aide.
Pour pouvoir transformer notre markdown en HTML, nous allons pouvoir profiter de l'excellente librairie Marked.
Vous pouvez l'installer en tapant la commande suivante :
npm install --save marked
Il vous suffit ensuite d'importer Marked depuis la librairie Marked, comme ce que nous avons l'habitude de faire avec React depuis le début.
Pour finir ce projet, nous allons devoir transformer le markdown en HTML.
Nous avons normalement déjà réussi à détecter le changement du texte par notre utilisateur, je suis sûr que vous réussirez à récupérer le texte en lui-même. Si ce n'est pas le cas, vous pouvez consulter la fin de cette étape pour découvrir quelques précieux indices.
Pour transformer notre code markdown en HTML, nous avons installé dans l'étape précédente la librairie Marked. Voici comment ça fonctionne :
Marked(texte); // Va renvoyer le texte en markdown sous forme de HTML
En sachant cela, il vous suffit de trouver un moyen d'ajouter le code HTML généré directement dans notre élément de droite (dans notre prévisualisateur). Il y a une astuce à mettre en place, je vous laisse voir par vous-même. Vous pouvez également regarder l'indice B ci-dessous si vous le désirez.
Si vous avez du mal à récupérer le texte tapé par l'utilisateur, sachez que React n'est que du JavaScript. Vous pouvez récupérer le texte entré par votre utilisateur depuis l'événement créé par JavaScript.
event.target.value
Il vous suffit de détecter cet événement en le passant en paramètre via une fonction anonyme fléchée de la même manière que nous avons réussi à changer le nom de notre étudiant en passant "Elon" en paramètre.
Si vous avez du mal à intégrer votre code HTML directement avec React : c'est normal. Il s'agit d'une sécurité de React qu nous empêche d'entrer du HTML dans du JSX. Pour la désactiver, nous pouvons utiliser l'attribut dangerouslySetInnerHTML
.
Voici comment l'activer (c'est très simple) : https://fr.reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
Ce projet est votre tout premier projet avec React. Il n'est pas très difficile mais il n'est pas non plus très facile. Je sais que vous pouvez y arriver, prenez votre temps, respirez, buvez un chocolat chaud ou un café et n'hésitez pas à effectuer quelques recherches sur internet plutôt que de regarder immédiatement la correction : c'est le meilleur moyen d'apprendre. Toute ce dont vous avez besoin a été vu ensemble.
Je crois en vous !
Attention, vous êtes sur le point de consulter la correction. Arrêtez-vous ici et essayez vraiment de réaliser votre petit prévisualisateur de markdown par vous-même, vous en êtes capable. Il n'y a rien de plus satisfaisant que de réussir un projet, même lorsque nous devons vraiment chercher longtemps.
Voici le lien vers la vidéo de correction complète : https://www.youtube.com/watch?v=RA1zlN3roJI
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble votre projet.