MDX Example Bar

July 13, 2017

Foo Showcasing how MDX for Gatsby.js works ... The Counter component is imported explicitly, but since we are using MDXProvider, we can also define global components which don't need to be imported (e.g. Link, YouTube).

A React component in Markdown (imported component):

3

Code Snippet

import React from 'react';
const Counter = initialCounter => {
  const [counter, setCounter] = React.useState(initialCounter);  const onIncrement = () => {    setCounter(c => c + 1);
  };

  const onIncrement = () => {
    setCounter(c => c - 1);
  };

  return (
    <div>
      {counter}

      <div>
        <button onClick={onIncrement} type="button">
          Increment
        </button>
        <button onClick={onDecrement} type="button">
          Decrement
        </button>
      </div>
    </div>
  );
};

export default Counter;

An external Link:

Find out more about it

An Image:

Some Cover Image

YouTube (global component)

That's it.

Categories:
Previous The Road to learn React