如何在浏览器中运行并展示这段React状态管理代码的效果？

要在浏览器中直接运行你的React代码，最快捷的方式是通过CDN引入依赖并编写HTML文件，具体步骤如下：

步骤1：创建HTML文件 #

新建一个名为index.html的文件，复制以下完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>React Managed Control Demo</title>
    <!-- 引入React和ReactDOM开发版CDN -->
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- 引入Babel用于转译JSX语法 -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    <!-- React组件的挂载容器 -->
    <div id="app"></div>

    <!-- 你的React代码，type设为text/babel让Babel解析 -->
    <script type="text/babel">
        class ManagedControlDemo extends React.Component {
            constructor(props){
                super(props);
                this.state = {message: ""};
            }

            handleChange(e){
                this.setState({message: e.target.value});
            }

            render() {
                return (
                    <div>
                        <legend>Type something here</legend>
                        <input
                            onChange={this.handleChange.bind(this)}
                            value={this.state.message}
                            autoFocus />
                        <h1>{this.state.message}</h1>
                    </div>
                );
            }
        }

        // 将组件挂载到页面的#app元素上
        ReactDOM.render(<ManagedControlDemo/>, document.querySelector('#app'));
    </script>
</body>
</html>

步骤2：在浏览器中打开文件 #

• 直接双击index.html文件，浏览器会加载并运行代码，你就能看到输入框实时同步内容到标题的效果。
• 如果遇到加载问题，可以用本地服务器运行：打开终端，进入文件所在目录，执行python -m http.server（需安装Python），然后在浏览器访问http://localhost:8000/index.html。

关键说明 #

• 引入的CDN提供了React、ReactDOM和Babel的运行环境，无需本地安装任何依赖。
• type="text/babel"是必须的，因为浏览器原生无法识别JSX语法，Babel会自动将JSX转译为浏览器能执行的JavaScript代码。
• 这里使用React 17的CDN是因为你的代码用了ReactDOM.render，这是React 17及更早版本的挂载方式；如果要使用React 18，需要将挂载代码改为ReactDOM.createRoot(document.querySelector('#app')).render(<ManagedControlDemo/>)。

内容的提问来源于stack exchange，提问作者Pieter Zeelie