مقدمه به JSX در React

چیستی JSX

JSX مخفف JavaScript XML است و یک توسعه‌ی سینتکسی برای JavaScript به شمار می‌رود که توسط فیسبوک برای استفاده در کتابخانه‌ی React توسعه یافته است. JSX به شما اجازه می‌دهد تا ساختارهای HTML را مستقیماً درون کدهای JavaScript بنویسید. این امر باعث می‌شود که کد نویسی کامپوننت‌های React ساده‌تر و خوانایی آن‌ها بالاتر رود.

فواید استفاده از JSX

• خوانایی بالا: کد نویسی با JSX به دلیل شباهت ظاهری به HTML آسان‌تر و قابل فهم‌تر است.
• نوشتن کامپوننت‌های انعطاف‌پذیر: JSX اجازه می‌دهد تا منطق برنامه (JavaScript) با مارکاپ (مشابه HTML) در کامپوننت‌های React ترکیب شود.
• تشخیص خطاها: با استفاده از JSX، خطاها و اشکالات (باگ‌ها) به سرعت قابل تشخیص و برطرف شدن هستند.

مفاهیم کلیدی در JSX

1. عناصر JSX: عناصر JSX شبیه به عناصر HTML هستند و می‌توانند تگ‌های باز، تگ‌های بسته، و محتوا داشته باشند.
2. نمایش عبارات: با استفاده از {} می‌توانید هر عبارت جاوا اسکریپتی را درون JSX قرار دهید.
3. ترکیب‌پذیری: کامپوننت‌ها می‌توانند به راحتی با یکدیگر ترکیب شوند و از این طریق ساختار برنامه‌ی شما را منظم و قابل نگهداری می‌کنند.مثال عملی: ساخت یک لیست کارها

برای فهم بهتر، بیایید نگاهی به مثالی عملی بزنیم که در آن یک لیست ساده از کارها (todo list) با استفاده از JSX و React ساخته می‌شود.

import React, { useState } from 'react';

function TodoApp() {
    const [todos, setTodos] = useState([]);
    const [task, setTask] = useState('');

    const addTask = () => {
        if (task !== "") {
            setTodos([...todos, task]);
            setTask('');
        }
    };

    return (
        <div>
            <input type="text" value={task} onChange={e => setTask(e.target.value)} />
            <button onClick={addTask}>Add Task</button>
            <ul>
                {todos.map((todo, index) => (
                    <li key={index}>{todo}</li>
                ))}
            </ul>
        </div>
    );
}

export default TodoApp;

توضیح کد

• useState: یک Hook در React است که برای مدیریت state در کامپوننت‌های تابعی استفاده می‌شود.
• input و button: عناصر HTML استاندارد که برای گرفتن ورودی کاربر و افزودن آن به لیست استفاده می‌شوند.
• map: یک تابع JavaScript است که برای تبدیل هر آیتم در آرایه و نمایش آن به صورت یک لیست استفاده می‌شود.

این مثال نشان دهنده‌ی قدرت JSX در ترکیب منطق JavaScript با مارکاپ شبیه HTML و سهولت توسعه کامپوننت‌های React است.