Learning about gatsby

June 1st, 2019react
Learning about gatsby

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