Installer MarkedJS pour un Projet Markdown React est une étape essentielle pour tout développeur souhaitant intégrer une solution de rendu Markdown dans une application React. MarkedJS est une bibliothèque rapide et flexible permettant de convertir du texte Markdown en HTML de façon efficace. Dans ce tutoriel, nous allons découvrir comment installer et utiliser MarkedJS dans un projet React, avec des instructions pas-à-pas et des exemples de code concrets.
Introduction à MarkedJS pour React
MarkedJS est une bibliothèque JavaScript permettant de convertir des fichiers Markdown en HTML. Dans un projet React, cela s’avère très pratique pour afficher du contenu généré dynamiquement ou intégré par l’utilisateur. Les sections suivantes expliquent comment installer et configurer MarkedJS dans un projet React, en intégrant également des Modules CSS pour améliorer la présentation des composants générés.
Créer un Projet React et Installer MarkedJS
Pour commencer, nous devons créer un projet React. Vous pouvez facilement le faire en utilisant create-react-app. Ensuite, nous allons installer MarkedJS en tant que dépendance. Vous pouvez suivre notre tutoriel détaillé sur comment créer une première application React pour plus d’informations.
// Créer un nouveau projet React
npx create-react-app my-markdown-app
// Se déplacer dans le répertoire du projet
cd my-markdown-app
// Installer MarkedJS
npm install marked --save
Intégrer MarkedJS dans un Composant React
Maintenant que nous avons installé MarkedJS, voyons comment l’intégrer dans un composant React pour convertir et afficher du texte Markdown.
import React, { useState } from 'react';
import marked from 'marked';
const MarkdownEditor = () => {
const [markdown, setMarkdown] = useState('');
const handleChange = (event) => {
setMarkdown(event.target.value);
};
const getMarkdownText = () => {
const rawMarkup = marked(markdown, { sanitize: true });
return { __html: rawMarkup };
};
return (
);
};
export default MarkdownEditor;
Ajouter du Style au Composant Markdown
Pour améliorer l’interface utilisateur, ajoutons quelques styles de base à notre composant MarkdownEditor. Vous pouvez trouver d’autres astuces de design dans notre article sur créer des interfaces attrayantes avec HTML et CSS.
.markdown-editor {
display: flex;
flex-direction: column;
width: 50%;
margin: 0 auto;
}
textarea {
width: 100%;
height: 200px;
margin-bottom: 20px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
resize: vertical;
}
.preview {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
background-color: #f8f8f8;
}
Utiliser MarkedJS avec des Options Avancées
MarkedJS propose de nombreuses options de configuration pour personnaliser la conversion Markdown. Par exemple, nous pouvons activer les options définies dans les balises Markdown, modifier le rendu des liens, etc. Pour une compréhension plus approfondie des fonctionnalités, consultez notre article sur les différents états du cycle de vie React.
import React, { useState } from 'react';
import marked from 'marked';
const MarkdownEditor = () => {
const [markdown, setMarkdown] = useState('');
const handleChange = (event) => {
setMarkdown(event.target.value);
};
const getMarkdownText = () => {
const renderer = new marked.Renderer();
// Custom options
renderer.link = (href, title, text) => {
return `${text}`;
};
const rawMarkup = marked(markdown, {
renderer: renderer,
gfm: true,
breaks: true,
sanitize: true
});
return { __html: rawMarkup };
};
return (
);
};
export default MarkdownEditor;
Tester et Déployer Votre Projet
Maintenant que notre composant MarkdownEditor est prêt, il est temps de tester et de déployer notre application. Utilisez les commandes suivantes pour démarrer et tester votre application localement. Une fois satisfait des résultats, vous pouvez déployer votre application sur une plateforme de votre choix comme Vercel ou Netlify. Vous pouvez également consulter notre guide pour ajouter de nouveaux composants à votre projet React.
// Démarrer l'application en mode développement
npm start
// Construire l'application pour la production
npm run build
Conclusion
Installer et utiliser MarkedJS dans un projet Markdown React est une tâche relativement simple mais puissante pour les développeurs souhaitant incorporer le rendu Markdown dans leurs applications. Avec MarkedJS, vous pouvez configurer et personnaliser le comportement de rendu selon vos besoins spécifiques. Continuez à explorer les différentes options offertes par MarkedJS et améliorez votre application pour qu’elle réponde à toutes vos attentes. Pour plus de tutoriels sur React et les bibliothèques frontend, consultez notre catégorisation avancée sur la différence entre les applications single-page et multi-page dans React.
Voici quelques ressources externes utiles pour approfondir vos connaissances :
