همینطور به روش class component
<script type="text/babel">
    class Hading extends React.Component {
        render() {
            return (
                <h2>what do you want to do today? </h2>
            );
        }
    }
    class Input extends React.Component {
        render() {
            return (
                <input type="text" id="task" />
            );
        }
    }
    class Form extends React.Component {
        render() {
            return(
                <div className="form-element">
                    <Hading /> 
                    <Input />
                </div>
            )
        }
    }
    class Task extends React.Component {
        render() {
            return (
                <div className="task">
                    <input type="checkbox" id="vehicle1" value="" />
                    <label htmlFor="vehicle1">task 1</label>
                </div>
            );
        }
    }
    class TaskList extends React.Component {
        render() {
            return (
                <div className="d-flex">
                    <Task />
                </div>
            );
        }
    }
    class TaskBox extends React.Component {
        render() {
            return(
                <div className="task-box">
                    <Form />
                    <TaskList />    
                </div>
            )
        }
    }
    const root = ReactDOM.createRoot(document.getElementById('root')).render(<TaskBox />);
</script>