MDX = Markdown avec du JSX dedans

Ce billet est écrit en MDX. D'ailleurs tout ce site est écrit en MDX, grace au génial Gatsby qui fera peut être l'objet d'un futur billet.

Explications pour MDX:

Markdown

Le markdown est une idée simple de 2004 qui consiste à utiliser des conventions de formatage encodées dans le corps même du texte qui soient lisibles même sans formatage. Quelques exemples:

- ** mot ** → mot en gras
- * mot * → mot en italique
- ## Titre → Titre en h2
- * espace → liste de points
- 1. espace → liste numéroté
- [] → checkbox
- tab → quote
- …

Le texte reste lisible tel quel et peut être transformé en html automatiquement.

JSX est le javascript de React

Le JSX est une extension de javascript dont la syntaxe est de style html et qui permet de définir et d'appeler des composants React.

Comment ça marche ?

Le texte suivant dans un billet markdown

import Barchart from './barchart'
<Barchart data={[1, 2, 3, 7, 1, 3]} width={600} height={400} />

Un compteur simple

import Wave from './wave';
<Wave />

Un compteur plus complexe

import Counter from './counter';
<Counter />

par iFrame

Invocation d'une iframe:

... conclusion et retour à l'accueil