# JK into the mdx react stuff

some links i'm looking at, not knowing yet if they are cool:
* https://auth0.com/blog/how-to-build-an-app-with-react-and-mdx/
* [a compilation of cool components and component libraries](https://github.com/brillout/awesome-react-components) that we should check out.
* https://www.gatsbyjs.com/starters/?

## links shared with me at some point in time.
* [accessibility reading LD shared](https://www.a11yproject.com/checklist/)
## COMPONENTS TO ADD TO THE LL INVENTORY

* react-compare-two-images [demo](https://react-compare-image.yuuniworks.com/?path=/story/basic--basic-usage)
* [google-map-react](https://github.com/google-map-react/google-map-react)
* [emoji-picker](https://github.com/milesj/interweave/tree/master/packages/emoji-picker)
* [intense image](https://github.com/brycedorn/react-intense) [demo](https://bryce.io/react-intense) ...so the slickness of this...
* with the function of this: [svg image zoomer](https://github.com/chrvadala/react-svg-pan-zoom)
* [if not this, then some sort of dialog box thing](http://yuanyan.github.io/boron/)
* there are sticky components, but we should build our own
* charts
* [draw with phone](https://github.com/dulnan/drawmote)
* [i like the sticky stack scroll the best](https://github.com/captivationsoftware/react-sticky)
* [custom theme ui generator](https://theme-ui.com/customize/)

## my codeblocks and attempts as learning through them:

ok, so i used mk's starter script! woohoo! i started a new gatsby site hosted by netlify again, "artist-statements." I created a new .mdx page in my pages folder and wrote up the prompt in markdown, "prompt.mdx", and then created a mdx-layout.js file in my components folder. I got an error about the config file so i compared the config.js file in artist-statements to the config file in firstby and saw a few lines that seemed to be relevant-namely:

`gatsby-remark-images`,
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        defaultLayouts: {
          default: require.resolve("./src/components/mdx-layout.js"),
        },
        extensions: [`.md`, `.mdx`],
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 960,
            },
          },
        ],
      },

so I tried adding those lines into my config.js file in the artists-statements, and thne the localhost page had a pop-up informing me that gatsby needed to restart, and then i got this for a really long time:
so there's something i'm missing to get the .mdx plug-in to work...
I went back to [this site](https://www.gatsbyjs.com/docs/how-to/routing/migrate-remark-to-mdx/) where we originally got the

        extensions: [`.md`, `.mdx`],

and from reading more wondered if i needed to make sure I had the mdx plugin installed.

i checked by

which gatsby-plugin-mdx

and terminal responded: "not found" so i

npm install gatsby-plugin-mdx

well it still has that same gatsby restarting message, so i [ctrl c] the dev server and got this message:

> Couldn't find the "gatsby-remark-images" plugin declared in "/Users/jordankoffman/Development/artist-statements/gatsby-config.js".

ok, so now I don't know what that plug in does actually. So before installing it, i'll google it and see!

...

[ok!](https://www.npmjs.com/package/gatsby-remark-images)
> Processes images in markdown so they can be used in the production build.

alright, that seems like something i'd want, so i'll go ahead and install it!

npm install gatsby-remark-images

annnnd we are back to the beginning again with this message in the localhost page:
> Create a React.js component in your site directory at src/pages/prompt.js and this page will automatically refresh to show the new page component you created.

so it's still grumpy about my .mdx file.