۲ دانشجوی سون‌لرن
تمرین بخش ایجاد کامپوننت
محسن موحد حل شده توسط محسن موحد

        function Hading (){
            return (
                <h2>what do you want to do today? </h2>
            );
        }
        function Input (){
            return (
                <input type="text" id="task" />
            );
        }
        function Form (){
            return(
                <div className="form-element">
                    <Hading /> 
                    <Input />
                </div>
            )
        }
        function Task (){
            return (
                <div className="task">
                <input type="checkbox" id="vehicle1" value="" />
                <label for="vehicle1">task 1</label>
                </div>
            );
        }
        function TaskList (){
            return (
                <div class="d-flex">
                    <Task />
                </div>
            );
        }
        function TaskBox() {
            return(
                <div class="task-box">
                    <Form />
                    <TaskList />    
                </div>
            )
          }
        const root = ReactDOM.createRoot(document.getElementById('root')).render(<TaskBox />);
همینطور به روش 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>
سیدحمید وهاب زاد ۱۴ شهریور ۱۴۰۴، ۲۱:۰۱

سلام،

بسیار عالی. خسته نباشید.

فقط یک نکته اضافه کنم، جدای ازینکه مدل کلاس کامپوننت رو بلدی در کنارش حتما سعی کنید همیشه از فانکشنال کامپوننت استفاده کنید. تمامی هوک‌ها سینک هستن و توصیه مرجع هست.

بهترین پاسخ
محسن موحد ۱۷ شهریور ۱۴۰۴، ۱۹:۲۹