theWhiteFox design & build web apps

Code Blocks

2020 December 13th

React Components markdown

Gatsby plugin MDX

Yeah let's code!

1query PostBySlug($slug: String!) {
2  mdx(fields: {slug: {eq: $slug}}) {
3    frontmatter {
4      title
5      date(formatString: "YYYYMMDo")
6    }
7  }
8}

React Component Editor with Live Preview

Live editing React code here is the Dump component! render output

const Dump = props => (
<div
   style={{
            fontSize: 20,
            border: '1px solid #efefef',
            padding: 10,
            background: 'white',
          }}>
          {Object.entries(props).map(([key, val]) => (
            <pre key={key}>
              <strong style={{ color: 'white', background: 'red' }}>
                {key} 💩
              </strong>
              {JSON.stringify(val, '', ' ')}
            </pre>
          ))}
        </div>
      )

render(
  <>
    <h3>Render Output !</h3>
    <Dump props={['One', 'Two', 'Three', 'Four']} />
  </>
);

const Dump = props => (
<div
   style={{
            fontSize: 20,
            border: '1px solid #efefef',
            padding: 10,
            background: 'white',
          }}>
          {Object.entries(props).map(([key, val]) => (
            <pre key={key}>
              <strong style={{ color: 'white', background: 'red' }}>
                {key} 💩
              </strong>
              {JSON.stringify(val, '', ' ')}
            </pre>
          ))}
        </div>
      )
render(
  <>
    <h3>Render Output !</h3>
    <Dump props={['One', 'Two', 'Three', 'Four']} />
  </>
);

Render Output !

props 💩[
 "One",
 "Two",
 "Three",
 "Four"
]

https://github.com/mdx-js/mdx

webpack Fetch API