تغییرات اخیر

در اینجا اطلاعیه‌ها، نسخه‌ها و تغییرات جدید لیارا فهرست می‌شوند.

آنچه در این مقاله می‌خوانید

چطور با JSX عناصر React بسازیم؟


۱۰ بهمن ۱۴۰۴

خلاصه کنید:

openaigeminiperplexity

در این آموزش، با JSX آشنا می‌شوید، زبان قدرتمندی که ترکیبی از HTML و جاوا اسکریپت است و پایه و اساس ساخت کامپوننت‌های React به شمار می‌رود. با یادگیری JSX، می‌توانید رابط‌های کاربری پویا و قابل استفاده مجدد بسازید، از مدیریت رویدادها در خود مارک‌آپ بهره ببرید و داده‌ها را به‌صورت پویا در صفحات نمایش دهید. در پایان این آموزش،

شما قادر خواهید بود یک لیست تعاملی از عناصر بسازید که با یک کلیک روی هر عنصر واکنش نشان می‌دهد و اصول اصلی کار با JSX را به خوبی درک خواهید کرد.

در ادامه خواهید خواند:

  • پیش نیاز
  • مرحله 1: افزودن Markup به یک عنصر React
  • مرحله 2: افزودن استایل به یک عنصر با استفاده از ویژگی‌ها (Attributes)
  • مرحله 3: افزودن رویدادها به عناصر
  • مرحله 4: ایجاد عناصر با استفاده از پیمایش داده‌ها (map)
  • مرحله 5: نمایش شرطی عناصر با استفاده از Short Circuiting
  • جمع بندی

پیش نیاز

  • نصب Node.js روی سیستم شما (این آموزش با نسخه‌ی 10.19.0 Node.js و 6.13.4 npm تست شده است).
  • آشنایی با ایجاد پروژه‌های React با استفاده از Create React App.
  • دانش پایه‌ای از جاوااسکریپت، HTML و CSS برای درک بهتر کدها و استایل‌ها.

مرحله 1: افزودن Markup به یک عنصر React

همان‌طور که قبلا اشاره شد، React یک زبان مارکاپ خاص به نام JSX دارد. این زبان ترکیبی از HTML و جاوا اسکریپت است و چیزی شبیه به این است:

<div>
  {inventory.filter(item => item.available).map(item => (
    <Card>
        <div className="title"}>{item.name}</div>
        <div className="price">{item.price}</div>
    </Card>
    ))
  }
</div>

شما برخی قابلیت‌های جاوا اسکریپت مانند .filter و .map و همچنین HTML استادارد مانند <div> را می‌شناسید. اما بخش‌هایی هم وجود دارد که هم شبیه به HTML هستند و هم جاوا اسکریپتی مانند <Card> و className.

این همان JSX است، زبان مارکاپ ویژه‌ای که به کامپوننت‌های React حس HTML را می‌دهد و قدرت جاوا اسکریپت را نیز همراه دارد.

در این مرحله، شما یادمی‌گیرید چگونه یک سینتکس ساده شبیه HTML را به یک عنصر React اضافه کنید. ابتدا عناصر استاندارد HTML را در یک تابع جاوا اسکریپتی قرار می‌دهید و سپس کد کامپایل شده را در مرورگر مشاهده می‌کنید. همچنین عناصر را گروه‌بندی می‌کنید تا React بتواند با کمترین مارکاپ آن‌ها را کامپایل کند و خروجی HTML تمیزی ایجاد کند.

برای شروع، یک پروژه جدید ایجاد کنید. در خط فرمان، دستور زیر را اجرا کنید تا پروژه تازه با create-react-app ساخته شود:

npx create-react-app jsx-tutorial

بعد از اتمام پروژه، وارد دایرکتوری شوید:

cd jsx-tutorial

در یک تب یا پنجره ترمینال جدید، پروژه را با دستور start اجرا کنید. مرورگر به‌صورت خودکار با تغییرات به‌روزرسانی می‌شود، بنابراین این اسکریپت باید در طول کار فعال بماند:

npm start

با این کار یک سرور محلی راه‌اندازی می‌شود. اگر پروژه در مرورگر باز نشد، می‌توانید آن را در آدرس زیر پیدا کنید:

http://localhost:3000/

اگر از یک سرور راه دور استفاده می‌کنید، آدرس به شکل زیر خواهد بود:

http://your_IP_address:3000

مرورگر شما با یک برنامه React بارگذازی می‌شود که بخشی از Create React App است.

شما قرار است مجموعه‌ای کاملا جدید از کامپوننت‌های سفارشی بسازید، بنابراین بهتر است ابتدا کمی از کد پیش‌فرض را پاک کنید تا پروژه کاملا خالی باشد. برای شروع، فایل App.js را در یک ویرایشگر باز کنید. این فایل ریشه برنامه است و تمام کامپوننت‌ها از اینجا شروع می‌شوند.

در یک ترمینال جدید، به پوشه پروژه بروید و src/App.js را با دستور زیر باز کنید.

nano src/App.js

فایل چیزی شبیه به این خواهید دید:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

حالا خط import logo from './logo.svg' و هر چیزی بعد از return در تابع را حذف کنید و آن را به شکل return null تغییر دهید. کد نهایی به این شکل خواهد بود:

import React from 'react';
import './App.css';

function App() {
  return null;
}

export default App;

فایل را ذخیره و ویرایشگر را ببندید.

در نهایت، لوگو را حذف کنید. در پنجره ترمینال دستور زیر را وارد کنید:

rm src/logo.svg

شما از این فایل SVG در برنامه استفاده نمی‌کنید و بهتر است فایل‌های بلااستفاده را حذف کنید تا کدتان مرتب باقی بماند.

حالا که این بخش‌ها حذف شدند، می‌توانید به بررسی JSX بپردازید. این زبان مارکاپ توسط React کامپایل می‌شود و در نهایت به HTML تبدیل می‌شود که در مرورگر مشاهده می‌کنید. React با استفاده از JSX مدلی از صفحه شما ایجاد می‌کند، سپس عناصر لازم را می‌سازد و به صفحه اضافه می‌کند.

این بدان معنی است که شما می‌توانید چیزی شبیه HTML بنویسید و انتظار داشته باشید HTML تولید شده شبیه به آن باشد. با این حال چند نکته وجود دارد.

اگر به تب یا پنجره ترمینال نگاه کنید، ممکن است این پیغام را ببینید:

Output
...
./src/App.js
  Line 1:8:  'React' is defined but never used  no-unused-vars
...

این پیغام از ظرف linter است که می‌گوید کد React که import شده استفاده نشده است. وقتی خط import React from 'react' را اضافه می‌کنید، در واقع کد جاوا اسکریپت را وارد می‌کنید که JSX را به کد React تبدیل می‌کند. اگر JSX نداشته باشید، نیازی به این import نیست.

بیایید با اضافه کردن مقدار کمی JSX این مشکل را حل کنیم. ابتدا null را با مثال Hello World جایگزین کنید:

import React from 'react';
import './App.css';

function App() {
  return <h1>Hello, World</h1>;
}

export default App;

فایل را ذخیره کنید. اگر به ترمینال نگاه کنید، پیام هشدار از بین رفته است. در مرورگر نیز پیام به‌صورت یک عنصر h1 نمایش داده می‌شود.

بعد از <h1>، یک تگ پاراگراف اضافه کنید که متن "I am writing JSX" را داشته باشد. کد به شکل زیر خواهد بود:

import React from 'react';
import './App.css';

function App() {
  return(
    <h1>Hello, World</h1>
    <p>I am writing JSX</p>
  )
}

export default App;

چون JSX چند خطی است، باید آن را داخل پارانتز قرار دهید. فایل را ذخیره کنید. هنگام اجرا، خطای زیر در ترمینال مشاهده می‌کنید:

Output
./src/App.js
  Line 7:5:  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

   5 |   return(
   6 |     <h1>Hello, World</h1>
>  7 |     <p>I am writing JSX</p>
     |     ^
   8 |   )
   9 | }
  10 |

وقتی JSX را از یک تابع برمی‌گردانید، باید عنصر اصلی بازگردانید. این عنصر می‌تواند بچه‌های داخلی داشته باشد، اما باید یک عنصر سطح بالا باشد. در اینجا شما دو عنصر بازگردانده‌اید.

راه‌حل ساده است: کد را با یک تگ خالی (<></>) احاطه کنید.

import React from 'react';
import './App.css';

function App() {
  return(
    <>
      <h1>Hello, World</h1>
      <p>I am writing JSX</p>
    </>
  )
}

export default App;

تگ خالی یک عنصر اصلی ایجاد می‌کند، اما هنگام کامپایل در HTML نهایی اضافه نمی‌شود. این باعث می‌شود کد شما تمیز بماند و همچنان یک عنصر اصلی به React بدهید.

React چیست و چه کاربردی دارد؟ با مشهورترین برنامه‌های تحت وب React آشنا شوید
React 

نکته: می‌توانید از <div> هم استفاده کنید، اما تگ خالی مزیت این را دارد که مارکاپ اضافی به خروجی نهایی اضافه نمی‌کند.

فایل را ذخیره و ببندید. مرورگر به‌روزرسانی می‌شود و صفحه جدید با پاراگراف نمایش داده می‌شود. همچنین وقتی کد تبدیل می‌شود، تگ‌های خالی حذف می‌شوند.

مرحله 2: افزودن استایل به یک عنصر با استفاده از ویژگی‌ها (Attributes)

در این مرحله، نحوه استایل‌دهی به عناصر در JSX را بررسی می‌کنیم تا درک بهتری از نحوه عملکرد ویژگی‌های HTML در JSX را به‌دست آورید.

در React روش‌های متعددی برای استایل‌دهی وجود دارد. برخی از این روش‌ها شامل نوشتن CSS در جاوا اسکریپت بوده و برخی دیگر از پیش‌پردازنده‌ها (preprocessors) استفاده می‌کنند. در این آموزش، از روش متداول‌تر و ساده‌تر یعنی استفاده از فایل CSS خارجی و کلاس‌های CSS بهره خواهیم برد.

اکنون که کد شما آماده است، زمان آن رسیده تا مقداری استایل به آن اضافه کنید. فایل App.css را در ویرایشگر کد خود باز کنید:

nano src/App.css

از آنجا که در حال کار با JSX جدید هستید، کدهای CSS فعلی مربوط به عناصری هستند که دیگر در پروژه شما وجود ندارند؛ بنابراین می‌توانید کل محتوای موجود در این فایل را حذف کنید. پس از حذف کدها، فایل شما خالی خواهد بود.

در گام بعدی، استایل ساده‌ای برای مرکزچین کردن محتوا اضافه می‌کنیم. در فایل src/App.css، کد زیر را وارد نمایید:

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

در این بخش، یک کلاس CSS با نام .container ایجاد کرده‌اید که با استفاده از ویژگی display: flex محتوا را در مرکز صفحه قرار می‌دهد.

فایل را ذخیره کرده و ببندید. پس از ذخیره، مرورگر به‌روزرسانی می‌شود اما هنوز تغییری در ظاهر صفحه مشاهده نخواهید کرد، زیرا لازم است کلاس CSS را به عنصر React خود اضافه کنید.

فایل کامپوننت اصلی را باز کنید:

nano src/App.js

کد CSS از قبل با خط زیر در فایل شما وارد شده است:

import './App.css';

این بدان معنا است که webpack کدهای CSS را برای ساخت فایل نهایی استایل بارگذاری می‌کند؛ با این حال برای اعمال استایل‌ها بر روی عناصر JSX، باید کلاس‌های مربوطه را به عناصر اضافه کنید.

در ابتدا، در ویرایشگر خود، تگ‌های خالی <> را با تگ <div> جایگزین نمایید:

import React from 'react';
import './App.css';

function App() {
  return(
    <div>
      <h1>Hello, World</h1>
      <p>I am writing JSX</p>
    </div>
  )
}

export default App;

در این قطعه کد، تگ‌هایی خالی را با div جایگزین کرده‌اید. استفاده از تگ‌های خالی برای گروه‌بندی محتوا بدون افزودن عناصر اضافی کاربرد دارد، اما از آنجا که تگ‌های خالی نمی‌توانند ویژگی‌ HTML بپذیرند، در اینجا div استفاده شده است.

در گام بعدی باید کلاس CSS را اضافه کنیم. در این بخش JSX اندکی با HTML تفاوت دارد. در HTML، افزودن کلاس معمولا به‌صورت زیر انجام می‌شود:

<div class="container">

اما از آنجا که JSX مبتنی بر جاوا اسکریپت است، نمی‌تواند از واژه class استفاده کند، زیرا این کلمه یک کلمه رزرو شده در جاوا اسکریپت محسوب می‌شود. برای حل این مشکل، React از ویژگی className به‌جای class استفاده می‌کند.

نکته: اگر ویژگی در JSX همانند HTML عمل نکرد، احتمالا باید از نسخه camelCase آن استفاده کنید. به‌عنوان مثال، در JSX به‌جای for از htmlFor استفاده می‌شود.

با هاست React لیارا، اپلیکیشن‌های React خودت رو روی بستر سریع، پایدار و امن اجرا کن.
✅ نصب فوری✅ منابع اختصاصی✅ دسترسی کامل SSH
خرید و راه‌اندازی هاست React

در React، معمولا به ویژگی‌ها props نیز گفته می‌شود. props داده‌هایی هستند که می‌توانید به کامپوننت‌های دیگر ارسال کنید. با این حال در این آموزش، از واژه «ویژگی» استفاده می‌کنیم، زیرا در اینجا از آن‌ها به همان شیوه ویژگی‌های HTML بهره می‌بریم. این کار به ما کمک می‌کند تا بین props واقعی (که رفتار متفاوتی دارند) و ویژگی‌های HTML تمایز قائل شویم.

اکنون می‌توانید className را به کد خود اضافه کنید:

import React from 'react';
import './App.css';

function App() {
  return(
    <div className="container">
      <h1>Hello, World</h1>
      <p>I am writing JSX</p>
    </div>
  )
}

export default App;

فایل را ذخیره کنید. با این کار صفحه مجددا بارگذاری شده و محتوا در مرکز صفحه قرار خواهد گرفت.

ویژگی className در React منحصربه‌فرد است. بیشتر ویژگی‌های HTML بدون تغییر در JSX کار می‌کنند. برای نمونه، می‌توانید یک id به عنصر خود اضافه کنید:

import React from 'react';
import './App.css';

function App() {
  return(
    <div className="container">
      <h1 id="greeting">Hello, World</h1>
      <p>I am writing JSX</p>
    </div>
  )
}

export default App;

فایل را ذخیره کرده و مرورگر را بارگذاری مجدد کنید. تغییری در ظاهر صفحه ایجاد نمی‌شود، اما تگ <h1> اکنون دارای ویژگی id است.

تا اینجا JSX شباهت زیادی به HTML دارد، اما مزیت اصلی JSX این است که می‌توانید از قدرت جاوا اسکریپت درون آن استفاده کنید. به‌عنوان مثال، می‌توانید مقدار یک ویژگی را از طریق متغیرها تعیین کنید. برای این منظور، مقدار ویژگی‌ را به‌‌جای کوتیشن، درون آکولاد {} قرار دهید.

در ویرایشگر خود، کد زیر را اضافه کنید:

import React from 'react';
import './App.css';

function App() {
  const greeting = "greeting";
  return(
    <div className="container">
     <h1 id={greeting}>Hello, World</h1>
      <p>I am writing JSX</p>
    </div>
  )
}

export default App;

در این بخش، متغییری با نام greeting تعریف کرده‌اید و مقدار آن را به ویژگی id در تگ <h1> اختصاص داده‌اید. با ذخیره فایل، صفحه مانند قبل باقی خواهد ماند اما ویژگی id اکنون مقدار خود را از متغیر می‌گیرد.

تا کنون تنها با چند عنصر JSX ساده کار کرده‌اید، اما JSX این امکان را فراهم می‌کند تا عناصر متعددی را به‌صورت تودرتو برای ساخت صفحات پیچیده‌تر به کار گیرید. در این بخش، یک صفحه حاوی فهرستی از ایموجی‌ها ایجاد خواهیم کرد. هر ایموجی درون یک دکمه قرار دارد و با کلیک بر روی آن، نام کوتاه CLDR آن نمایش داده می‌شود.

برای شروع، فایل src/App.js را باز کرده و در حالت باز نگه دارید:

nano src/App.js

سپس کد زیر را برای افزودن فهرست ایموجی‌ اضافه کنید:

import React from 'react';
import './App.css';

function App() {
  const greeting = "greeting";
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      <p>I am writing JSX</p>
      <ul>
        <li>
            <button>
              <span role="img" aria-label="grinning face" id="grinning face">😀</span>
            </button>
        </li>
        <li>
          <button>
              <span role="img" aria-label="party popper" id="party popper">🎉</span>
          </button>
        </li>
        <li>
          <button>
              <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
          </button>
        </li>
      </ul>
    </div>
  )
}

export default App;

در اینجا، یک تگ <ul> برای نگهداری فهرست ایموجی‌ها ایجاد کرده‌اید. هر ایموجی درون یک <li> و سپس داخل یک <button> قرار دارد.

هر تگ <span> نیز دارای ویژگی‌های زیر است:

  • ویژگی role="img" که به ابزارهای دسترسی‌پذیری اعلام می‌کند عنصر مذکور نقش یک تصویر را ایفا می‌کند.
  • ویژگی‌های aria-label و id برای مشخص کردن نام ایموجی و بهبود دسترسی‌پذیری صفحه.

اکنون کمی استایل به صفحه اضافه می‌کنیم. فایل CSS را باز کنید:

nano src/App.css

کد زیر را برای بهبود برای بهبود ظاهر دکمه‌ها و فهرست وارد نمایید:

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

button {
    font-size: 2em;
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
}

ul {
    display: flex;
    padding: 0;
}

li {
    margin: 0 20px;
    list-style: none;
    padding: 0;
}

در این بخش، اندازه فونت دکمه‌ها افزایش یافته، حاشیه و پس‌زمینه حذف شده و فهرست با استفاده از ویژگی display: flex به‌صورت افقی نمایش داده می‌شود.

در این مرحله، با ساختار JSX، نحوه افزودن کلاس‌ها، شناسه‌ها (id) و ویژگی‌های دسترسی‌پذیری (aria) آشنا شدید و یاد گرفتید چگونه داده‌ها را به‌صورت رشته یا متغیر به عناصر JSX نسبت دهید. در مرحله بعد، خواهید آموخت که چگونه با افزودن رویدادها (Events) به عناصر، صفحه خود را تعاملی‌تر کنید.

مرحله 3: افزودن رویدادها به عناصر

در این مرحله، قرار است با استفاده از ویژگی‌های خاص در JSX، به المنت‌ها رویداد اضافه کنید. به‌طور مشخص، یاد می‌گیرید چگونه یک رویداد کلیک را روی دکمه‌ها کنترل کنید، اطلاعات رویداد را دریافت کرده و از آن برای اجرای عملیات یا استفاده محدوده فایل بهره ببرید.

اکنون که صفحه پایه را ایجاد کرده‌اید، زمان آن رسیده است که چند رویداد به المنت‌های خود اضافه کنید. المنت‌های HTML می‌توانند رویدادهای متنوعی دریافت کنند و React امکان دسترسی به همه آن‌ها را برای شما فراهم می‌کند. از آن‌جایی که کد JavaScript شما مستقیما با markup ترکیب شده است، می‌توانید رویدادها را به سادگی اضافه کرده و در عین حال، ساختار کد را منظم نگه دارید.

برای شروع، رویداد onClick را اضافه کنید. این ویژگی به شما اجازه می‌دهد تا کد JavaScript را مستقیما به یک المنت اضافه کنید، به جای آن که جداگانه یک event listener بنویسید:

import React from 'react';
import './App.css';

function App() {
  const greeting = "greeting";
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      <p>I am writing JSX</p>
      <ul>
        <li>
          <button
            onClick={event => alert(event.target.id)}
          >
            <span role="img" aria-label="grinning face" id="grinning face">😀</span>
          </button>
        </li>
        <li>
          <button
            onClick={event => alert(event.target.id)}
          >
              <span role="img" aria-label="party popper" id="party popper">🎉</span>
          </button>
        </li>
        <li>
            <button
              onClick={event => alert(event.target.id)}
            >
              <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
          </button>
        </li>
      </ul>
    </div>
  )
}

export default App;

از آن‌جایی که در JSX هستید، نام رویداد را با camelCase بنویسید؛ یعنی به‌جای onclick از onClick استفاده کنید. ویژگی onClick در اینجا از یک تابع ناشناس برای دریافت اطلاعات مربوط به آیتم کلیک شده استفاده می‌کند.

تابع ناشناس به‌صورت arrow function نوشته شده و شی event مربوط به دکمه‌ای که کلیک شده را دریافت می‌کند. ویژگی target درون event همان المنت <span> است و اطلاعات مورد نیاز (یعنی id) را می‌توانید با event.target.id به دست آورید. سپس با استفاده از تابع alert() آن را نمایش دهید.

در مرورگر خود، روی یکی از ایموجی‌ها کلیک کنید. خواهید دید که یک پیام هشدار (alert) با نام ایموجی نمایش داده می‌شود.

برای جلوگیری از تکرار کد، می‌توانید تابع رویداد را یک‌بار تعریف کرده و همان تابع را برای تمام رویدادهای onClick استفاده کنید.

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

در ویرایشگر خود، تابعی به نام displayEmojiName بنویسید که رویداد را گرفته و با استفاده از alert() مقدار id را نمایش دهد. سپس آن را به‌جای تابع ناشناس در onClick قرار دهید:

import React from 'react';
import './App.css';

const displayEmojiName = event => alert(event.target.id);

function App() {
  const greeting = "greeting";
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      <p>I am writing JSX</p>
      <ul>
        <li>
          <button
            onClick={displayEmojiName}
          >
            <span role="img" aria-label="grinning face" id="grinning face">😀</span>
          </button>
        </li>
        <li>
          <button
            onClick={displayEmojiName}
          >
              <span role="img" aria-label="party popper" id="party popper">🎉</span>
          </button>
        </li>
        <li>
            <button
              onClick={displayEmojiName}
            >
              <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
          </button>
        </li>
      </ul>
    </div>
  )
}

export default App;

پس از ذخیره‌ی فایل، مرورگر را بررسی کنید. با کلیک روی هر ایموجی، همان پیام هشدار (alert) با id مربوط به آن نمایش داده خواهد شد.

در این مرحله، یاد گرفتید که چگونه به المنت‌ها در JSX رویداد اضافه کنید و دیدید که نام رویدادها در JSX کمی با HTML متفاوت است (مثلا onClick به‌جای onclick). همچنین توانستید با تعریف یک تابع مستقل، از تکرار کد جلوگیری کرده و رویداد را به‌صورت قابل استفاده مجدد در چندین المنت به کار ببرید.

بهینه‌ سازی درخواست‌های سرور با استفاده از React Hooks
 React Hooks

مرحله 4: ایجاد عناصر با استفاده از پیمایش داده‌ها (map)

در این مرحله، از JSX فقط به‌عنوان یک زبان نشانه‌گذاری (markup) ساده استفاده نخواهید کرد. یاد می‌گیرید که چگونه آن را با JavaScript ترکیب کنید تا کد پویا، تمیز و خواناتر بنویسید. در این بخش، کد خود را بازنویسی (refactor) می‌کنید تا داده‌ها را در قالب یک آرایه (array) ذخیره کرده و با حلقه (loop) از آن برای ساخت المنت‌های HTML استفاده کنید.

JSX فقط شبیه HTML نیست؛ بلکه به شما اجازه می‌دهد تا از قدرت JavaScript مستقیما درون markup استفاده کنید. پیش‌تر، این کار را با قرار دادن تابع‌ها در ویژگی‌ها (attributes) انجام دادید یا با استفاده از متغیرها، داده‌ها را بازاستفاده کردید. حالا وقت آن رسیده است که با استفاده از کد JavaScript، JSX را از داده‌ها تولید کنید.

در ویرایشگر کد خود، باید در فایل src/App.js آرایه‌ای از داده‌ها مربوط به ایموجی‌ها بسازید. اگر فایل را بسته‌اید، دوباره آن را باز کنید:

nano src/App.js

در بالای تابع App، آرایه‌ای بسازید که شامل اشیایی با دو ویژگی emoji و name باشد. توجه کنید که مقدار emoji باید درون کوتیشن قرار گیرد.

کد به شکل زیر خواهد بود:

import React from 'react';
import './App.css';

const displayEmojiName = event => alert(event.target.id);
const emojis = [
  {
    emoji: "😀",
    name: "grinning face"
  },
  {
    emoji: "🎉",
    name: "party popper"
  },
  {
    emoji: "💃",
    name: "woman dancing"
  }
];

function App() {
...
}

export default App;

اکنون که داده‌ها آماده هستند، می‌توانید روی آن‌ها حلقه بزنید. برای استفاده از JavaScript در JSX، باید کد خود را درون آکولاد {} قرار دهید مشابه زمانی که تابعی را به یک ویژگی اضافه کردید.

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

اما چند نکته مهم را باید رعایت کنید:

  • گروهی از آیتم‌ها باید درون یک المنت والد (container) مثل <div> یا <ul> قرار بگیرند.
  • هر آیتم باید دارای ویژگی key باشد که مقدار آن یکتا باشد. این ویژگی به React کمک می‌کند تا در زمان به‌روزرسانی، المنت‌ها را به‌درستی شناسایی کند. (ویژگی key در خروجی HTML نهایی نمایش داده نمی‌شود و فقط برای استفاده داخلی React است.)

یک مثال ساده از استفاده از map() برای ساخت لیستی از نام‌ها به شکل زیر است:

HTML نهایی این کد به شکل زیر خواهد بود:

...
const names = [
    "Atul Gawande",
    "Stan Sakai",
    "Barry Lopez"
];

return(
    <div>
        {names.map(name => <div key={name}>{name}</div>)}
    </div>
)
...

کد نهایی به شکل زیر است:

...
<div>
    <div>Atul Gawande</div>
    <div>Stan Sakai</div>
    <div>Barry Lopez</div>
</div>
...

ساخت لیست ایموجی نیز به همین صورت است. المنت <ul> به‌عنوان ظرف اصلی عمل می‌کند و با map() روی داده‌ها پیمایش می‌کنید تا برای هر ایموجی، یک <li> شامل دکمه و برچسب <span> بسازید. داده‌های ثابت را با مقادیر پویا جایگزین می‌کنید.

کد نهایی به شکل زیر است:

import React from 'react';
import './App.css';

const displayEmojiName = event => alert(event.target.id);
const emojis = [
  {
    emoji: '😀',
    name: "test grinning face"
  },
  {
    emoji: '🎉',
    name: "party popper"
  },
  {
    emoji: '💃',
    name: "woman dancing"
  }
];

function App() {
  const greeting = "greeting";
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      <p>I am writing JSX</p>
      <ul>
        {
          emojis.map(emoji => (
            <li key={emoji.name}>
              <button
                onClick={displayEmojiName}
              >
                <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>
              </button>
            </li>
          ))
        }
      </ul>
    </div>
  )
}

export default App;

در این کد، روی آرایه‌ی emojis درون تگ <ul> حلقه زده‌اید و در هر بار تکرار، یک <li> تولید کرده‌اید. مقدار ویژگی key از نام ایموجی گرفته شده است. تگ <button> همچنان همان تابع displayEmojiName را دارد و در تگ <span>، مقدار ویژگی‌های aria-label و id از نام ایموجی استفاده می‌شود. همچنین محتوای درون تگ <span> همان شکلک (emoji) است.

فایل را ذخیره کنید. پس از ذخیره، مرورگر به‌طور خودکار به‌روزرسانی می‌شود و داده‌ها را نمایش می‌دهد. دقت کنید که ویژگی key در خروجی HTML نهایی وجود ندارد، چون فقط برای استفاده داخلی React است.

با ترکیب JSX و JavaScript استاندارد، می‌توانید محتوای پویا و قابل‌مدیریت ایجاد کنید. در این مرحله، داده‌های ثابت را با آرایه و حلقه جایگزین کردید تا HTML به‌صورت دینامیک تولید شود.

مرحله 5: نمایش شرطی عناصر با استفاده از Short Circuiting

در این مرحله، با مفهوم Short Circuiting آشنا می‌شوید و یاد می‌گیرید چگونه عناصر HTML را به‌صورت شرطی نمایش دهید. با استفاده از این روش می‌توانید کامپوننت‌هایی بسازید که بر اساس شرایط مختلف، بخش‌هایی از HTML را نشان داده یا پنهان کنند؛ این ویژگی باعث می‌شود کامپوننت‌های شما انعطاف‌پذیرتر باشند و بتوانند موقعیت‌های متفاوت را مدیریت کنند.

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

برای انجام این کار، از Short Circuiting استفاده می‌کنید. در این روش، از یک عبارت شرطی استفاده می‌شود و اگر بخش اول شرط «truthy» باشد، محتوای بخش دوم نمایش داده می‌شود.

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

{isLoggedIn && <button>Log Out</button>}

در این مثال، از عملگر && استفاده کرده‌اید. این عملگر در صورتی که تمام عبارات سمت چپ «truthy» باشند، آخرین مقدار را برمی‌گرداند. در غیر این صورت مقدار false بازگردانده می‌شود، که باعث می‌شود React هیچ خروجی HTML اضافی تولید نکند.

بنابراین، اگر مقدار isLoggedIn برابر با true باشد، دکمه نمایش داده می‌شود. در غیر این صورت، عنصر دکمه اصلا در خروجی نمایش داده نخواهد شد.

برای آزمایش این موضوع، خطوط مشخص‌شده زیر را به کد خود اضافه کنید:

فایل jsx-tutorial/src/App.js:

import React from 'react';
import './App.css';

...

function App() {
  const greeting = "greeting";
  const displayAction = false;
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      {displayAction && <p>I am writing JSX</p>}
      <ul>
...
      </ul>
    </div>
  )
}

export default App;

در ویرایشگر متن، یک متغیر به نام displayAction با مقدار false ایجاد کرده‌اید. سپس تگ <p> را داخل آکولاد قرار داده‌اید و در ابتدای آکولاد، عبارت displayAction && را اضافه کرده‌اید تا شرط مورد نظر اعمال شود.

فایل را ذخیره کنید و صفحه را در مرورگر بررسی نمایید. مشاهده خواهید کرد که عنصر <p> ناپدید شده است. نکته مهم اینجا است که این عنصر در HTML نهایی هم وجود نخواهد داشت این روش با مخفی کردن عنصر از طریق CSS تفاوت دارد؛ در واقع عنصر به‌طور کامل از ساختار خروجی حذف می‌شود.

در حال حاضر مقدار displayAction به‌صورت ثابت تعیین شده است، اما می‌توانید این مقدار را در state ذخیره کرده و از کامپوننت والد به فرزند به‌عنوان prop ارسال کنید.

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

معرفی هاست رایگان React
هاست React

جمع بندی

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

به اشتراک بگذارید