一、函數式組件

①無狀態的函數式組件

    <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>

③

二、

React組件