React组件

    <div id="app"></div>
    <script src="node_modules/@babel/standalone/babel.js"></script>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">
        //组件的名字首字母大写
        // 这种函数式组件也是无状态的 
        function AppHeader() {
            return (
                <div className="header">
                    <h2>头部部分</h2>
                </div>
            )
        }
        function AppContent() {
            return (
                <div className="content">
                    <h3>中间内容部分</h3>
                </div>
            )
        }
        function AppFooter() {
            return (
                <div className="footer">
                    <h2>尾部部分</h2>
                </div>
            )
        }
        const element = (
            <div>
                <AppHeader />
                <AppContent />
                <AppFooter />
            </div>
        )
        ReactDOM.render(element,document.getElementById(‘app‘))

    <div id="app"></div>
    <script src="node_modules/@babel/standalone/babel.js"></script>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">
        //组件的名字首字母大写
        // 这种函数式组件也是无状态的 
        function Welcome(props) {
            return <h2>hello {props.name}</h2>
        }
        
        const element = (
            <div>
                <Welcome name=‘eric‘ />
                <Welcome name=‘jack‘ />
                <Welcome name=‘lisa‘ />
            </div>
        )
        ReactDOM.render(element,document.getElementById(‘app‘))
    </script>