نحوه ایجاد عناصر React با JSX

مقدمه

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

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

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

پیش نیازها

• شما به یک محیط توسعه نیاز دارید که Node.js را اجرا کند
• باید بتوانید با Create React App برنامه بسازید.
• همچنین به دانش اولیه جاوا اسکریپت نیاز دارید

مرحله 1 – اضافه کردن نشانه گذاری به عنصر 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

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

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;

اکنون، نشان‌واره واردات خط را از ‘./logo.svg و همه چیز بعد از عبارت 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
...

این خطی است که به شما می گوید از کد React وارد شده استفاده نمی کنید. وقتی وارد کردن خط React از ‘react’ را به کد خود اضافه می کنید، کد جاوا اسکریپت را وارد می کنید که JSX را به کد React تبدیل می کند. اگر JSX وجود نداشته باشد، نیازی به واردات نیست.

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

import React from 'react';
import './App.css';
function App() {
return <h1>Hello, World</h1>;
}
export default App;

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

سپس، در زیر تگ <h1>، یک تگ پاراگراف اضافه کنید که شامل رشته ای است که من 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 را از یک تابع یا دستور برمی گردانید، باید یک عنصر واحد را برگردانید. آن عنصر ممکن است دارای فرزندان تو در تو باشد، اما باید یک عنصر سطح بالا وجود داشته باشد. در این حالت شما دو عنصر را برمی گردانید.

راه حل یک تغییر کوچک کد است. کد را با یک تگ خالی احاطه کنید. یک تگ خالی یک عنصر HTML بدون هیچ کلمه ای است. به نظر می رسد: <></>.

در ویرایشگر خود به ./src/App.js برگردید و تگ خالی را اضافه کنید:

import React from 'react';
import './App.css';
function App() {
return(
<>
<h1>Hello, World</h1>
<p>I am writing JSX</p>
</>
)
}
export default App;

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

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

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

مرحله 2 – اضافه کردن استایل به یک عنصر با ویژگی ها

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

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

nano src/App.css

از آنجایی که شما با JSX جدید شروع می کنید، CSS فعلی به عناصری اشاره دارد که دیگر وجود ندارند. از آنجایی که به CSS نیاز ندارید، می توانید آن را حذف کنید.

پس از حذف کد، یک فایل خالی خواهید داشت.

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

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

در این بلوک کد، یک انتخابگر کلاس CSS به نام .container ایجاد کردید و از آن برای وسط محتوا با استفاده از display: flex استفاده کردید.

پرونده را ذخیره کرده و خارج شوید. مرورگر به روز می شود، اما چیزی تغییر نمی کند. قبل از اینکه بتوانید تغییر را مشاهده کنید، باید کلاس CSS را به کامپوننت React خود اضافه کنید. کد جاوا اسکریپت جزء را باز کنید:

nano src/App.js

کد CSS قبلاً با خط واردات “./App.css” وارد شده است. این بدان معنی است که وب پک کد را برای ایجاد یک شیوه نامه نهایی وارد می کند، اما برای اعمال CSS به عناصر خود، باید کلاس ها را اضافه کنید.

ابتدا در ویرایشگر متن خود، تگ های خالی <> را به <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 جایگزین کردید. تگ های خالی برای گروه بندی کد شما بدون افزودن تگ اضافی مفید هستند، اما در اینجا باید از div استفاده کنید زیرا تگ های خالی هیچ ویژگی HTML را نمی پذیرند.

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

<div class="container">

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

یکی از کلمات رزرو شده کلاس است. React با تغییر کمی این کلمه رزرو شده را دور می زند. به جای اضافه کردن کلاس ویژگی، ویژگی className را اضافه می کنید. به عنوان یک قاعده، اگر یک ویژگی آنطور که انتظار می رود کار نمی کند، سعی کنید نسخه camel case را اضافه کنید. ویژگی دیگری که کمی متفاوت است، ویژگی for است که برای برچسب ها استفاده می کنید. چند مورد دیگر نیز وجود دارد، اما خوشبختانه لیست نسبتاً کوتاه است.

اکنون که می‌دانید ویژگی کلاس در React چگونه استفاده می‌شود، می‌توانید کد خود را به‌روزرسانی کنید تا سبک‌ها را نیز در بر بگیرد. در ویرایشگر متن خود، className=”container” را به تگ div باز خود اضافه کنید:

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 اضافه کنید. به عنوان مثال، به ویرایشگر متن خود برگردید و یک شناسه تبریک به عنصر <h1> خود اضافه کنید. شبیه HTML استاندارد خواهد بود:

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;

صفحه را ذخیره کنید و مرورگر را دوباره بارگیری کنید. همینطور خواهد بود.

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

در ویرایشگر متن خود، خطوط برجسته زیر را برای ارجاع به یک ویژگی اضافه کنید:

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 با مقدار “greeting” ایجاد کردید، سپس به متغیر در ویژگی id تگ <h1> خود ارجاع دادید.

فایل را ذخیره کرده و از آن خارج شوید. صفحه یکسان خواهد بود، اما با یک برچسب شناسه.

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

برای نشان دادن این موضوع، صفحه ای با لیستی از ایموجی ها ایجاد می کنید. این ایموجی ها با یک عنصر <button> پیچیده می شوند. وقتی روی ایموجی کلیک می کنید، نام کوتاه 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 تنظیم شده است. این به نرم افزار دسترسی سیگنال می دهد که عنصر مانند یک تصویر عمل می کند. علاوه بر این، هر <span> دارای یک برچسب aria و یک ویژگی id با نام ایموجی است. برچسب aria به بازدیدکنندگان دارای صفحه خوان نشان می دهد که چه چیزی نمایش داده می شود. هنگام نوشتن رویدادها در مرحله بعد از شناسه استفاده خواهید کرد.

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

فایل را ذخیره کرده و از آن خارج شوید. مرورگر شما به روز می شود و این را خواهید دید:

حالا کمی استایل اضافه کنید. کد 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;
}

در این کد از اندازه فونت، حاشیه و سایر پارامترها برای تنظیم ظاهر دکمه ها و تغییر فونت استفاده کرده اید. شما همچنین سبک های لیست را حذف کردید و نمایش را اضافه کردید: به عنصر <ul> خم شوید تا آن را افقی کنید.

فایل CSS را ذخیره کرده و ببندید. مرورگر شما به روز می شود و این را خواهید دید:

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

مرحله 3 – اضافه کردن رویدادها به عناصر

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

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

برای شروع، کنترل کننده رویداد onclick را اضافه کنید. این به شما امکان می دهد به جای پیوست کردن شنونده رویداد، مقداری کد جاوا اسکریپت را مستقیماً به عنصر خود اضافه کنید:

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 است، شما camelCased onclick کرده اید، به این معنی که آن را به عنوان onClick اضافه کرده اید. این ویژگی onClick از یک تابع ناشناس برای بازیابی اطلاعات موردی که روی آن کلیک شده است استفاده می کند.

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

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

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

در ویرایشگر متن خود، تابعی به نام displayEmojiName ایجاد کنید که رویداد را می گیرد و تابع alert() را با یک شناسه فراخوانی می کند. سپس تابع را به هر ویژگی 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;

فایل را ذخیره کنید. در مرورگر خود، روی یک ایموجی کلیک کنید و همان هشدار را مشاهده خواهید کرد.

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

مرحله 4 – نقشه برداری از داده ها برای ایجاد عناصر

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

JSX شما را به نحوی شبیه به HTML محدود نمی کند. همچنین به شما این امکان را می دهد که از جاوا اسکریپت به طور مستقیم در نشانه گذاری خود استفاده کنید. شما قبلاً با انتقال توابع به صفت ها این را کمی امتحان کردید. شما همچنین از متغیرها برای استفاده مجدد از داده ها استفاده کردید. اکنون زمان ایجاد JSX به طور مستقیم از داده ها با استفاده از کد استاندارد جاوا اسکریپت است.

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

nano src/App.js

آرایه ای اضافه کنید که حاوی اشیایی باشد که دارای شکلک و نام ایموجی هستند. توجه داشته باشید که ایموجی ها باید با علامت نقل قول احاطه شوند. این آرایه را بالای تابع App ایجاد کنید:

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;

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

برای ایجاد اجزای React، باید داده ها را به عناصر JSX تبدیل کنید. برای انجام این کار، داده ها را نقشه برداری می کنید و یک عنصر JSX را برمی گردانید. هنگام نوشتن کد باید چند نکته را در نظر داشته باشید.

ابتدا، گروهی از اقلام باید توسط یک ظرف <div> احاطه شوند. ثانیاً، هر آیتم به یک ویژگی خاص به نام کلید نیاز دارد. کلید باید یک داده منحصر به فرد باشد که React بتواند از آن برای پیگیری عناصر استفاده کند تا بتواند بداند چه زمانی باید کامپوننت را به روز کند. کلید از HTML کامپایل شده حذف می شود، زیرا فقط برای اهداف داخلی است. هر زمان که با حلقه ها کار می کنید باید یک رشته ساده به عنوان کلید اضافه کنید.

در اینجا یک مثال ساده آمده است که فهرستی از نام ها را در یک <div> نگاشت می کند:

...
const names = [
"Atul Gawande",
"Stan Sakai",
"Barry Lopez"
];
return(
<div>
{names.map(name => <div key={name}>{name}</div>)}
</div>
)
...

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

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

تبدیل لیست ایموجی مشابه خواهد بود. <ul> ظرف خواهد بود. روی داده‌ها نقشه می‌زنید و یک <li> را با کلید نام کوتاه ایموجی برمی‌گردانید. داده های کدگذاری شده را در تگ های <button> و <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;

در کد، روی آرایه ایموجی ها در تگ <ul> نگاشت و یک <li> برگردانید. در هر <li> از نام ایموجی به عنوان کلید اصلی استفاده کردید. دکمه همان عملکرد معمولی را خواهد داشت. در عنصر <span>، aria-label و id را با نام جایگزین کنید. محتوای تگ <span> باید ایموجی باشد.

فایل را ذخیره کنید. پنجره شما تازه می شود و داده ها را می بینید. توجه داشته باشید که کلید در HTML تولید شده وجود ندارد.

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

مرحله 5 – نمایش مشروط عناصر با اتصال کوتاه

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

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

برای این کار از مدار کوتاه استفاده می کنید. یعنی از شرطی استفاده می کنید و اگر قسمت اول درست باشد اطلاعات قسمت دوم را برمی گرداند.

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

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

در این مثال، شما از عملگر && استفاده می کنید که اگر همه چیز درست باشد، آخرین مقدار را برمی گرداند. در غیر این صورت، false را برمی گرداند، که به React می گوید هیچ نشانه گذاری اضافی را برنگرداند. اگر isLoggedIn درست باشد، React دکمه را نمایش می دهد. اگر isLoggedIn نادرست باشد، دکمه را نشان نمی دهد.

برای امتحان کردن این، خطوط برجسته زیر را اضافه کنید:

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 && را برای ایجاد شرطی اضافه کردید.

فایل را ذخیره کنید و خواهید دید که عنصر در مرورگر شما ناپدید می شود. بسیار مهم است که در HTML تولید شده نیز ظاهر نخواهد شد. این مانند پنهان کردن یک عنصر با CSS نیست. در نشانه گذاری نهایی اصلا وجود نخواهد داشت.

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

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

نتیجه

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

این مبنایی است که برای ساخت اجزای آینده نیاز دارید. با استفاده از ترکیبی از جاوا اسکریپت و HTML، می‌توانید مؤلفه‌های پویا را بسازید که انعطاف‌پذیر هستند و به برنامه شما اجازه رشد و تغییر می‌دهند.