React介绍-Hello World实现组件App渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="root"></div>
    
    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.js"></script>

    <script type="text/babel">
        // let message = "Hello World"

        // function btnClick(){
        //     message = "Hello React"
        //     rootRender() 
        // }

        // const root = ReactDOM.createRoot(document.querySelector("#root"))


        // function rootRender() {
            
        //     root.render((
        //         
//

{message}

// //
// )) // } // rootRender() //使用组件进行重构代码 //类组件和函数式组件 class App extends React.Component { //组件数据 constructor(){ super() this.state = { message : "Hello World" } } //组件方法 //渲染内容 render 方法 render() { return ( <div> <h2>{this.state.message}</h2> <button>修改文本</button> </div> ) } } App; //将组件渲染到界面上 const root = ReactDOM.createRoot(document.querySelector("#root")) root.render(<App/>) </script> </body> </html>

你可能感兴趣的:(react.js,javascript,ecmascript)