lovecoding
/
web0715


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- jsx 语法浏览器不识别 jsx => js 浏览器可识别的语言 -->
    <script src="./babel.min.js"></script>
    <!-- react的核心库 -->
    <script src="./react.development.js"></script>
    <!-- 解析react中的dom库 -->
    <script src="./react-dom.development.js"></script>
</head>
<body>
    <div id="root">
    </div>
    <script type="text/babel">
        let root = ReactDOM.createRoot(document.getElementById("root"));
        function App() {
            const user = '小红';
            return (
                <div>
                    <h1>Hello, React!</h1>
                    <p>This is a simple React app.</p>
                    <Child use={user} />
                </div>
            );
        }
        class Child extends React.Component {
            // 类组件有状态
            // <button></button>
            // const num = 5;
            // 构造器 用于给组件实例初始化
            constructor(props) {
                super(props);  // 继承父类属性和方法
                // this 可以访问当前创建的实例 但是 一定要在 调用super函数之后才可以使用
                this.state = {
                    num: 5
                } // 类似于Vue中的data属性 组件的自身的状态
            }          
            render() {
                console.log(this.props)  
                this.state.num = 30;
                return (<div>
                    <button>-</button>
                    <span>{this.state.num}</span>
                    <button>+</button>
                </div>)

            }
        }
        root.render(<App/>)        
    </script>
</body>
</html>