lovecoding
/
w1020


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./babel.min.js"></script>
    <script src="./react.development.js"></script>
    <script src="./react-dom.development.js"></script>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        const root = ReactDOM.createRoot(document.getElementById("root"));
        function App() {
            let name1 = '羊羊';
            return (
                <div>
                    <Good name={name1} />
                    <Day week={"周四"} />
                </div>
            )
        }

        /**
         * 所有函数定义的组件 都会接受一个唯一的参数：props
         * 和Vue是一样的，是单向数据流
         * 从父组件想后代传入
         * 本质上，props是一个object
         * 存储父组件给绑定的所有属性集合
         * props是响应式的
         * 当props数据发生变化 后面的组件就会重新渲染
         * props 是只读 不可修改
         * 
        */

        // 函数组件 
        function Good(props) {
            // props.name = '瑶一瑶';
            return <h1>{props.name}</h1>
        }


        // 类组件
        class Day extends React.Component{
            // 实例 this
            render() {
                return (
                    <div>
                        <p>今天是{this.props.week}</p>
                    </div>
                )
            }
        }


        root.render(<App/>);
    </script>
</body>

</html>