React Code Demo
Less than 1 minute
Syntax
::: react-demo Optional title text
```js
// your script, exporting your react component through `export default`
```
```css
/* Your css content */
```
```json
// Config (Optional)
```
:::
Attention
- Babel must be loaded when using react to parse JSX, this is done by the plugin automatically
- You must export your component through
export default
- We use "ShadowDOM" to make style isolation, and we already replace
document
withshadowRoot
. To access the page document, please visitwindow.document
.
Demo
A function-based React Demo
React demo 1
const { useState } = React;
export default () => {
const [message, setMessage] = useState(" powerful");
const handler = () => {
setMessage(` very${message}`);
};
return (
<div className="box">
<code>vuepress-theme-hope</code> is
<span id="powerful" onClick={handler}>
{message}
</span>
!
</div>
);
};
.box #powerful {
color: blue;
}
::: react-demo React demo 1
```js
const { useState } = React;
export default () => {
const [message, setMessage] = useState(" powerful");
const handler = () => {
setMessage(` very${message}`);
};
return (
<div className="box">
<code>vuepress-theme-hope</code> is
<span id="powerful" onClick={handler}>
{message}
</span>
!
</div>
);
};
```
```css
.box #powerful {
color: blue;
}
```
:::
A class-based React Demo
React demo 2
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { message: " powerful" };
}
handler() {
this.setState((state) => ({
message: ` very${state.message}`,
}));
}
render() {
return (
<div className="box">
<code>vuepress-theme-hope</code> is
<span id="powerful" onClick={this.handler.bind(this)}>
{this.state.message}!
</span>
</div>
);
}
}
.box #powerful {
color: blue;
}
::: react-demo React demo 2
```js
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { message: " powerful" };
}
handler() {
this.setState((state) => ({
message: ` very${state.message}`,
}));
}
render() {
return (
<div className="box">
<code>vuepress-theme-hope</code> is
<span id="powerful" onClick={this.handler.bind(this)}>
{this.state.message}!
</span>
</div>
);
}
}
```
```css
.box #powerful {
color: blue;
}
```
:::
Changelog
1/14/25, 8:13 AM
View All Changelog
1b917
-on08f11
-on4894d
-on54c46
-on55ea3
-on757fd
-on5b1a7
-on86180
-on71423
-on4104e
-onad023
-onca966
-on4d1ba
-on4a252
-onace60
-on688d8
-on4b8e5
-on