search

mdx-js / mdx

Markdown for the component era
https://mdxjs.com
MIT License
17.43k stars 1.14k forks source link

What's MDX on earth? #567

Closed xiayulu closed 5 years ago

xiayulu commented 5 years ago

The following code blocks are coped from mdxjs.com, and I add some //comments for them. You will look back when you are reading the questions below.

import React, { lazy, Component, Suspense } from 'react'; import { importMDX } from 'mdx.macro'; const Content = lazy(() => importMDX('./Content.mdx')); class App extends Component { render() { return (

Loading...
}> 
);

} } export default App;

- At page: https://mdxjs.com/advanced/api

```js
// example2.js

var mdx = require("@mdx-js/mdx")
const {read, write} = require('to-vfile')

const content =   = await read('./input1.mdx')
const transpile = async () => {
  const jsx = await mdx(content)
  return jsx
}
transpile().then(console.log)
// Except log jsx, how can I use it like a component?
// input1.mdx

import TomatoBox from 'tomato-box'
export author = "Fred Flintstone"
export default = props => <main {...props} />

# Hello, world!
Here is a paragraph
<TomatoBox />
// output1.jsx

import TomatoBox from 'tomato-box'

const MDXLayout = props => <main {...props} />
const layoutProps = {
  author: "Fred Flintstone"
}
export default function MDXContent(props) {
  return (
    <div name="wrapper" components={components}>
      <MDXLayout {...layoutProps} {...props}>
        <h1>{`Hello, world!`}</h1>
        <p>{`Here is a paragraph`}</p>
        <TomatoBox />
      </MDXLayout>
    </div>
  );
}
MDXContent.isMDXComponent = true;

import React from 'react' import { MDXProvider } from '@mdx-js/react' import { Heading, Text, Pre, Code, Table } from './components'

// Will this be ok? import MDXContent from './input1.mdx'

const components = { h1: Heading.H1, h2: Heading.H2, // … p: Text, code: Pre, inlineCode: Code } export default props =>

// I can't understand the`main` element below:
// Can I use output1.jsx like a normal component? 


# Question 1:  How can I take advantage of  `jsx` returned in `example2.js`?

- Can you give some real world usecases, thanks.

# Question 2: How can I provide some MDX content to MDXProvider?

- See `example3.js` for a close sight. As we can see, the usage in `example1.js` is excellent, but is it *only*  for create-react-app?
wooorm commented 5 years ago

You seem to be asking several questions all at once, so I think it’s good to start by reading the Getting Started doc!

Question 1

A real world use case is our loader.

Before answering more questions: what is your actual problem? What do you want to do? I feel like this is an XY problem (wikipedia, stackoverflow)

johno commented 5 years ago

👋 @xiayulu

I'm going to try and answer your questions. If we don't address everything please feel free to reach out on Spectrum.

As @wooorm stated, the best real world use case of the JSX is the loader. This is typically how MDX will be incorporated into a project. Just like how loaders work for .js files, our loader turns an .mdx file into a vanilla React/JSX string that can be used like a component elsewhere in an app.

// Can I use output1.jsx like a normal component?

Yep 😸

// I can't understand themain element below:

The main element is nothing more than a wrapper since context providers can only have one child element. This isn't something that is necessary.

but is it only for create-react-app?

MDX can work in any React project. Most popular frameworks have built plugins/solutions so you can use MDX in Gatsby, Next.js, Razzle, React Static, or any other framework that gives you access to the webpack config.