Fourth Post For Blog

May 8th, 2019reactnode
Fourth Post For Blog

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):

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;
reactnode