11---
2+ title : MDX and React
23id : react
34description : Learn how to use React inside Markdown with MDX in Docusaurus.
45slug : /markdown-features/react
56---
67
7- # MDX and React
8-
98``` mdx-code-block
109import styles from './markdown-features-react.module.css';
1110```
@@ -70,8 +69,6 @@ All MDX files are parsed as JSX. Inline styles use **JS objects**:
7069
7170:::
7271
73- <AdsComponent />
74-
7572## Importing Components { #importing - components }
7673
7774Instead of defining components inline, you can import them:
@@ -108,8 +105,6 @@ import Highlight from '@site/src/components/Highlight';
108105<Highlight color = " #25c2a0" >Reusable Component</Highlight >
109106</BrowserWindow >
110107
111- <AdsComponent />
112-
113108## Global Components { #global - components }
114109
115110You can register components globally so they’re available everywhere without imports.
@@ -136,8 +131,6 @@ Use <Highlight color="#25c2a0">Docusaurus Green</Highlight> globally!
136131MDX v3 treats ** lowercase tags as HTML elements** . Always use ** UpperCamelCase** for custom components.
137132:::
138133
139- <AdsComponent />
140-
141134## Using Markdown Partials { #importing - markdown }
142135
143136You can import other Markdown files as components.
@@ -174,8 +167,6 @@ import MySource from '!!raw-loader!./MyComponent';
174167
175168This is perfect for live examples that stay synced with actual code.
176169
177- <AdsComponent />
178-
179170## Available Globals { #available - exports }
180171
181172Inside an MDX page, you can access:
@@ -202,4 +193,4 @@ Front matter, TOC, and content title are accessible as globals!
202193
203194With MDX, Docusaurus turns Markdown into a ** React-powered playground** .
204195Mix documentation with live components, code examples, and dynamic UI—
205- all in one seamless authoring experience.
196+ all in one seamless authoring experience.
0 commit comments