https://markdoc.dev/_next/static/chunks/pages/docs/examples/react-4282351696cb7460.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[745],{5952:function(n,e,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/examples/react",function(){return t(7639)}])},7639:function(n,e,t){"use strict";t.r(e),t.d(e,{__N_SSG:function(){return f},default:function(){return g},markdoc:function(){return k}});var r=t(7294),a=t(1272),o=t(4211),s=t(4266),c=t(9266),d=t(8057),i=t(3695);let p={tags:(0,s.w)(c),nodes:(0,s.w)(d),functions:(0,s.w)(i),...(0,s.w)({})},l=new o.ZP.Tokenizer({allowComments:!0}).tokenize("---\ntitle: Using Markdoc with React\n---\n\n# {% $markdoc.frontmatter.title %}\n\nMarkdoc supports [rendering Markdoc syntax with React](/docs/render#react) out-of-the-box.\n\nTo get started with React, check out [this example repo](https://github.com/markdoc/docs/tree/main/examples/react-nodejs) for how to use Markdoc with [`create-react-app`](https://create-react-app.dev/) and [`express`](https://expressjs.com/).\n\n## Setup\n\nFollow these steps to build a Markdoc app with [`create-react-app`](https://create-react-app.dev/) and [`express`](https://expressjs.com/).\n\n1. Follow the [`create-react-app` getting started steps](https://create-react-app.dev/docs/getting-started) to create your initial app\n2. Set up a Markdoc schema\n\n   ```shell\n   schema/\n   ├── Callout.markdoc.js\n   └── heading.markdoc.js\n   ```\n\n   ```js\n   // [schema/Callout.markdoc.js](https://github.com/markdoc/docs/blob/dcba1a62be92097e3fd50c21e05fd6d2ea709312/examples/react-nodejs/schema/Callout.markdoc.js#L1-L18)\n\n   module.exports = {\n     render: 'Callout',\n     children: ['paragraph', 'tag', 'list'],\n     attributes: {\n       type: {\n         type: String,\n         default: 'note',\n         matches: ['check', 'error', 'note', 'warning']\n       }\n     }\n   };\n   ```\n\n   ```js\n   // [schema/heading.markdoc.js](https://github.com/markdoc/docs/blob/dcba1a62be92097e3fd50c21e05fd6d2ea709312/examples/react-nodejs/schema/heading.markdoc.js#L1-L22)\n\n   const { nodes } = require('@markdoc/markdoc');\n\n   function generateID(children, attributes) {\n     if (attributes.id && typeof attributes.id === 'string') {\n       return attributes.id;\n     }\n     return children\n       .filter((child) => typeof child === 'string')\n       .join(' ')\n       .replace(/[?]/g, '')\n       .replace(/\\s+/g, '-')\n       .toLowerCase();\n   }\n\n   module.exports = {\n     ...nodes.heading,\n     transform(node, config) {\n       const base = nodes.heading.transform(node, config);\n       base.attributes.id = generateID(base.children, base.attributes);\n       return base;\n     }\n   };\n   ```\n\n3. Parse your Markdoc documents on the server\n\n   ```js\n   // [...](https://github.com/markdoc/docs/blob/main/examples/react-nodejs/createContentManifest.js#L13)\n   const rawText = fs.readFileSync(file, 'utf-8');\n   const ast = Markdoc.parse(rawText);\n   ```\n\n4. Call `Markdoc.transform` on the server\n\n   ```js\n   // [server.js](https://github.com/markdoc/docs/blob/main/examples/react-nodejs/server.js)\n\n   const express = require('express');\n\n   const app = express();\n\n   const callout = require('./schema/callout.markdoc');\n   const heading = require('./schema/heading.markdoc');\n\n   // [...](https://github.com/markdoc/docs/blob/dcba1a62be92097e3fd50c21e05fd6d2ea709312/examples/react-nodejs/server.js#L8-L14)\n\n   app.get('/markdoc', (req, res) => {\n     const ast = contentManifest[req.query.path];\n\n     const config = {\n       tags: {\n         callout\n       },\n       nodes: {\n         heading\n       },\n       variables: {}\n     };\n\n     const content = Markdoc.transform(ast, config);\n\n     return res.json(content);\n   });\n\n   app.listen(4242, () => {\n     console.log(`Example app listening on port ${4242}`);\n   });\n   ```\n\n5. Call `Markdoc.renderers.react` on the client\n\n   ```js\n   // src/App.js\n\n   import React from 'react';\n   import Markdoc from '@markdoc/markdoc';\n\n   import { Callout } from './Callout';\n\n   export default function App() {\n     const [content, setContent] = React.useState(null);\n\n     React.useEffect(() =>

1 {\n       (async () => {\n         const response = await fetch(\n           `/markdoc?` +\n             new URLSearchParams({ path: window.location.pathname }),\n           { headers: { Accept: 'application/json' } }\n         );\n\n         if (response.status === 404) {\n           setContent('404');\n           return;\n         }\n\n         const content = await response.json();\n         setContent(content);\n       })();\n     }, []);\n\n     if (content === '404') {\n       return <p>Page not found.</p>;\n     }\n\n     if (!content) {\n       return <p>Loading...</p>;\n     }\n\n     const components = {\n       Callout\n     };\n\n     return Markdoc.renderers.react(content, React, { components });\n   }\n   ```\n\n6. Start up the client and server\n   ```shell\n   npm run start:client\n   ```\n   and\n   ```shell\n   npm run start:server\n   ```\n\n\\\nOr, clone [this starter repo](https://github.com/markdoc/docs/tree/main/examples/react-nodejs) and follow the directions in the [README](https://github.com/markdoc/docs/tree/main/examples/react-nodejs/README.md).\n"),m=o.ZP.parse(l,{slots:!1}),u=m.attributes.frontmatter?a.ZP.load(m.attributes.frontmatter):{},{components:h}=(0,s.J)(p);var f=!0;let k={frontmatter:u};function g(n){let e=n.markdoc;return o.RZ.react(e.content,r,{components:{...h,...n.components}})}}},function(n){n.O(0,[126,649,60,963,888,774,179],function(){return n(n.s=5952)}),_N_E=n.O()}]);