从React到Next.js

从React到Next.js，以下是React 基础，如何定义一个组件，以及props 和 state 的基本使用。
<html>
    <body>
        <div id="app"></div>
        <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
        <!-- Babel Script -->
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <script type="text/jsx">
            const app = document.getElementById("app");
            const root = ReactDOM.createRoot(app);

            // Header 组件
            function Header({ title }) {
                console.log(title);

                return (
                    <h1>{title ? title : 'Default title'}</h1>
                );
            }

            // HomePage 组件
            function HomePage() {
                const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
                // state value, update state value
                // state 在组件内部初始化并存储
                const [likes, setLikes] = React.useState(0);

                function handleClick() {
                    console.log('increment like count');
                    setLikes(likes + 1);
                }

                return (
                    <div className="home-page">
                        <Header title="React" />
                        <Header />
                        <ul>
                            {names.map((name)=>(
                                <li key={name}>{name}</li>
                            ))}
                        </ul>
                        <button onClick={handleClick}>Like{likes}</button>
                    </div> 
                    
                );
            }

            // 渲染 HomePage 组件
            root.render(<HomePage />);

        </script>
            
    </body>
</html>