Utiliser React

Utilisation de JSX dans Markdown

Docusaurus a un support intégré pour MDX, ceci vous permet d'écrire du JSX dans vos fichiers Markdown et de les rendre sous forme de composants React.

remarque

Bien que les fichiers .md et .mdx soient analysés à l'aide de MDX, certaines syntaxes sont traitées de manière légèrement différente. Pour une analyse syntaxique plus précise et un meilleur support des éditeurs, nous recommandons d'utiliser l'extension .mdx pour les fichiers contenant de la syntaxe MDX.

Essayez ce bloc ici :

export const Highlight = ({children, color}) => (  <span    style={{      backgroundColor: color,      borderRadius: '2px',      color: '#fff',      padding: '0.2rem',    }}>    {children}  </span>);
<Highlight color="#25c2a0">Docusaurus en vert</Highlight> et <Highlight color="#1877F2">Facebook en bleu</Highlight> sont mes couleurs préférées.
Je peux écrire en **Markdown** a côté de mon _JSX_ !

Remarquez comment il rend à la fois le balisage de votre composant React et la syntaxe Markdown :

http://localhost:3000

Docusaurus en vert and Facebook en bleu sont mes couleurs préférées.

Je peux écrire en Markdown a côté de mon JSX !

Vous pouvez également importer vos propres composants définis dans d'autres fichiers ou composants tiers installés via npm ! Consultez les docs MDX pour voir ce que vous pouvez faire avec MDX.

caution

Comme tous les fichiers doc sont analysés à l'aide de MDX, tout HTML est interprété comme du JSX. Par conséquent, si vous devez donner un style en ligne à un composant, suivez le modèle JSX et fournissez des objets de style. Ce comportement est différent de Docusaurus 1. Consulter aussi la Migration de v1 vers v2.

Importation d'extraits de code

Vous pouvez non seulement importer un fichier contenant une définition de composant, mais aussi importer n'importe quel fichier de code sous forme de texte brut, puis l'insérer dans un bloc de code, grâce à Webpack raw-loader.

myMarkdownFile.mdx

import CodeBlock from '@theme/CodeBlock';import MyComponentSource from '!!raw-loader!./myComponent';
<CodeBlock className="language-jsx">{MyComponentSource}</CodeBlock>;

http://localhost:3000

/** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */
import React, {useState} from 'react';
export default function MyComponent() {  const [bool, setBool] = useState(false);  return (    <div>      <p>MyComponent rendered !</p>      <p>bool={bool ? 'true' : 'false'}</p>      <p>        <button onClick={() => setBool((b) => !b)}>toggle bool</button>      </p>    </div>  );}

remarque

Vous devez utiliser <CodeBlock> plutôt que le triptyque Markdown ```, car ce dernier expédiera tout son contenu tel quel, mais vous voulez que JSX insère le texte importé ici.

avertissement

Cette fonctionnalité est expérimentale et pourrait faire l'objet de modifications de l'API à l'avenir.

Importation de Markdown

Vous pouvez utiliser des fichiers Markdown comme composants et les importer ailleurs, soit dans des fichiers Markdown, soit dans des pages React. Ci-dessous, nous importons depuis un autre fichier et l'insérons en tant que composant.

import Intro from './markdown-features-intro.mdx';
<Intro />;

http://localhost:3000

La documentation est l'une des interactions entre votre produit et vos utilisateurs. Un ensemble de documents bien écrit et bien organisé aide vos utilisateurs à comprendre rapidement votre produit. Notre objectif est ici d'aider vos utilisateurs à trouver et à comprendre les informations dont ils ont besoin, le plus rapidement possible.

Docusaurus 2 utilise des outils modernes pour vous aider à composer facilement vos documentations interactives. Vous pouvez intégrer des composants React, ou construire des blocs de codage en ligne dans lesquels vos utilisateurs peuvent jouer avec le code sur place. Commencez à partager vos moments de créativité avec le code dont votre public ne peut se passer. C'est peut-être le moyen le plus efficace d'attirer des utilisateurs potentiels.

Dans cette section, nous aimerions vous présenter les outils que nous avons choisis qui, selon nous, vous aideront à construire une documentation puissante. Laissez-nous vous guider avec un exemple.

Markdown est une syntaxe vous permettant d'écrire du contenu formaté dans une syntaxe lisible.

La syntaxe standard Markdown est supporté et nous utilisons MDX comme moteur d'analyse, qui peut faire bien plus que simplement l'analyse de Markdown, tel que le rendu des composantes React dans vos documents.

important

Cette section suppose que vous utilisez les plugins officiels de contenu Docusaurus.

De cette façon, vous pouvez réutiliser le contenu entre plusieurs pages et éviter de dupliquer le contenu.

caution

La table des matières ne contient pas actuellement les titres Markdown importés. Il s'agit d'une limitation technique que nous essayons de résoudre (issue).