react-demo

一个函数式 React Demo

const {useState} = React;

export default () => {
    const [message, setMessage] = useState(" 强大");

    const handler = () => {
        setMessage(`十分${message}`);
    };

    return (
        <div className="box">
            <code>vuepress - theme - hope< /code>
            < span
                id="powerful"
                onClick={handler}>
                {message}
            < /span>
        < /div>
    )
        ;
};

.box #powerful {
    color: blue;
}

一个类式 React Demo

export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {message: "强大"};
    }

    handler() {
        this.setState((state) => ({
            message: `十分${state.message}`,
        }));
    }

    render() {
        return (
            <div className="box">
                <code>vuepress-theme-hope</code>
                <span id="powerful" onClick={this.handler.bind(this)}>
                    {this.state.message}
                </span>
            </div>
        );
    }
}

.box #powerful {
    color: blue;
}

{
  "@babel/preset-reactt": "7.18.6"
}