چگونه با JSX عناصر واقعی ایجاد کنیم

در این آموزش می آموزید که چگونه عناصر را با JSX توصیف کنید. JSX انتزاعی است که به شما امکان می دهد دستور مشابه HTML را در کد جاوا اسکریپت خود بنویسید و شما را قادر میسازد تا مولفه های React را که شبیه علائم استاندارد HTML هستند ، بسازید. JSX زبان تمپلیت مولفه های React است و بنابراین پایه و اساس هر نشانه گذاری ای است که React به برنامه شما ارائه می دهد.
از آنجایی که JSX شما را قادر می سازد جاوا اسکریپت را نیز در نشانه گذاری خود بنویسید ، می توانید از توابع و روش های JavaScript ، از جمله نگاشت آرایه و ارزیابی اتصال کوتاه برای شرطی ها استفاده کنید.
به عنوان بخشی از آموزش ، رویدادهای کلیک را مستقیماً در نشانه گذاری روی دکمه ها ضبط می کنید و مواردی را مشاهده می کنید که ترکیب دقیقاً مطابق با HTML استاندارد نباشد ، مانند کلاس های CSS. در پایان این آموزش ، یک برنامه کاری دارید که از انواع مختلفی از ویژگیهای JSX استفاده می کند تا لیستی از مولفه هایی را که دارای یک شنونده کلیک داخلی هستند ، نمایش دهد. این یک الگوی رایج در برنامه های React است که شما اغلب در طول یادگیری چارچوب استفاده خواهید کرد. همچنین می توانید عناصر استاندارد HTML را با جاوا اسکریپت مخلوط کنید تا ببینید چگونه React به شما امکان ایجاد کد های کوچک و قابل استفاده مجدد را می دهد.
پیش نیازها
• به محیط توسعه در حال اجرای Node.js نیاز دارید. این آموزش بر روی Node.js نسخه 10.19.0 و npm نسخه 6.13.4 تست شده است. برای نصب این برنامه در macOS یا Ubuntu 18.04 ، مراحل نحوه نصب Node.js و ایجاد محیط توسعه محلی را در macOS یا نصب با استفاده از بخش PPA در آموزش نحوه نصب Node.js در اوبونتو 18.04 را دنبال کنید.
• باید با Create React App قادر به ایجاد برنامه باشید. می توانید دستورالعمل نصب را در نحوه ایجاد یک پروژه React با Create React App پیدا کنید.
• همچنین به دانش پایه از JavaScript نیاز خواهید داشت که می توانید در نحوه کدنویسی در JavaScript بیاموزید و به دانش پایه از HTML و CSS نیز احتیاج دارید. یک منبع مناسب برای HTML و CSS ، شبکه توسعه دهنده Mozilla میباشد.
مرحله 1 – اضافه کردن نشانه گذاری به یک مولفه React
همانطور که قبلاً نیز اشاره شد ، React یک زبان نشانه گذاری خاص به نام JSX دارد. پ ترکیبی از نحو HTML و JavaScript است که چیزی شبیه به این میباشد:
<div>
{inventory.filter(item => item.available).map(item => (
<Card>
<div className=”title”}>{item.name}</div>
<div className=”price”>{item.price}</div>
</Card>
))
}
</div>

برخی از قابلیت های JavaScript مانند .filter و .map و همچنین برخی HTML های استاندارد مانند <div> را خواهید شناخت. اما بخش های دیگری مانند <card> و className نیز وجود دارند که شبیهHTML و JavaScript به نظر می رسد.
این زبان JSX است ، یعنی زبان نشانه گذاری ویژه ای که به مولفه های React حس HTML را با قدرت JavaScript می دهد.
در این مرحله ، می آموزید که ترکیب HTML مانند پایه را به مولفه موجود React اضافه کنید. برای شروع ، مولفه های HTML استاندارد را به یک تابع JavaScript اضافه خواهید کرد ، سپس کد کامپایل شده را در یک مرورگر مشاهده می کنید. همچنین عناصر را گروه بندی می کنید تا 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
⦁
فایلی مانند این را مشاهده خواهید کرد:
jsx-tutorial/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 و هر چیز دیگر را حذف کنید. آن را به null تغییر دهید. کد نهایی به شرح زیر خواهد بود:
jsx-tutorial/src/App.js
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 React from ‘react’ را به کد خود اضافه می کنید ، کد JavaScript را وارد می کنید که JSX را به React code تبدیل می کند. اگر JSX وجود نداشته باشد ، دیگر نیازی به ورودی نیست.
بیایید با اضافه کردن مقدار کمی JSX این مسئله را تغییر دهیم. با جایگزین کردن null با یک مثال hello, world شروع کنید:
jsx-tutorial/src/App.js
import React from ‘react’;
import ‘./App.css’;

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

export default App;

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

سپس ، در زیر برچسب <h1> ، یک برچسب پاراگراف اضافه کنید که شامل رشته I am writing JSX است. کد به صورت زیر خواهد بود:
jsx-tutorial/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;

از آنجایی که 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 را از یک تابع یا عبارت باز می گردانید ، باید یک مولفه واحد را برگردانید. این مولفه ممکن است بخش های لانه گزیده باشد ، اما اگر یک مولفه سطح بالا باشد. در این حالت ، دو مولفه را بر می گردانید.
fix یک تغییر کد جزیی است. با یک برچسب خالی کد را محصور کنید. برچسب خالی یک مولفه HTML است که هیچ کلمه ای ندارد. به این شکل: <> </>
به./src/App.js در ویرایشگر خود بروید و برچسب خالی را اضافه کنید:
jsx-tutorial/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 می دهند ، صحیح باقی بمانند.
توجه: شما می توانید به جای برچسب های خالی ، کد را با یک div محصور کنید ، مادامی که کد یک مولفه را برگرداند. در این مثال ، یک برچسب خالی این مزیت را دارد که نشانه گذاری اضافی به خروجی تجزیه نشده اضافه نمی کند.

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

اکنون JSX اساسی را به مؤلفه خود اضافه کرده اید و یاد گرفته اید که چگونه باید همه JSX در یک مؤلفه مستقر شود. در مرحله بعد ، یک ظاهر طراحی را به مؤلفه خود اضافه می کنید.
مرحله 2 – اضافه کردن طراحی به یک مولفه به همراه ویژگی ها
در این مرحله ، به عناصر موجود در مؤلفه خود می پردازید تا یاد بگیرید که چگونه ویژگی های HTML با JSX کار می کنند. در React گزینه های بسیاری برای طراحی وجود دارد. برخی از آنها شامل نوشتن CSS در جاوا اسکریپت است، بو رخی دیگر از پیش پردازنده استفاده می کنند. در این آموزش با کلاس های CSS و CSS وارد شده کار خواهید کرد.
اکنون که کد خود را دارید ، وقت آن است که یک ظاهر طراحی شده اضافه کنید. App.css را در ویرایشگر متن خود باز کنید:
⦁ $ nano src/App.css
⦁
از آنجا که شما با JSX جدید شروع می کنید ، CSS فعلی به عناصری اشاره می کند که دیگر وجود ندارند. از آنجا که به CSS احتیاج ندارید ، می توانید آن را حذف کنید.
پس از حذف کد ، فایلی خالی خواهید داشت.
در مرحله بعد ، می توانید طراحی به مرکز متن اضافه کنید. در src / App.css کد زیر را اضافه کنید:
jsx-tutorial/src/App.css
.container {
display: flex;
flex-direction: column;
align-items: center;
}

در این بلوک کد ، شما CSS class selector را با نام .container ایجاد کرده اید و از آن برای در مرکز قرار دادن محتوا با استفاده از display: flex استفاده کرده اید.
فایل را ذخیره کرده و خارج شوید. مرورگر بروزرسانی می شود ، اما هیچ چیز تغییر نخواهد کرد. قبل از مشاهده تغییر ، باید کلاس CSS را به مؤلفه React خود اضافه کنید. کد JavaScript مولفه را انتخاب کنید:
⦁ $ nano src/App.js
⦁
کد CSS قبلاً با خط import ‘./App.css’ وارد شده است. این بدان معنی است که webpack برای ساختن یک صفحه طراحی نهایی، کد را وارد می کنند ، اما برای اعمال CSS روی عناصر خود ، باید کلاس ها را اضافه کنید.
ابتدا ، در ویرایشگر متن ، برچسب های خالی ، <> را به <div> تغییر دهید.
jsx-tutorial/src/App.js
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”>
Copy

اما از آنجا که JSX جاوا اسکریپت است ، محدودیت هایی دارد. یکی از محدودیت ها این است که جاوا اسکریپت کلمات کلیدی خود را رزرو کرده است. این بدان معناست که شما نمی توانید از کلمات خاصی در هر کد JavaScript استفاده کنید. به عنوان مثال ، شما نمی توانید یک متغیر به نام null ایجاد کنید زیرا این کلمه در حال حاضر محفوظ است.
یکی از کلمات رزرو شده class است. React با کمی تغییر دادن این کلمه کار خود را انجام میدهد. به جای اضافه کردن مشخصه class ، className را اضافه می کنید. به عنوان یک قاعده ، اگر یک مشخصه (attribute) همانطور که انتظار می رود کار نمی کند ، سعی کنید نسخه camel case را اضافه کنید. مشخصه دیگری که کمی متفاوت است مشخصه for میباشد که برای برچسب ها استفاده میکنید. چند مورد دیگر نیز وجود دارد ، اما خوشبختانه این لیست نسبتاً کوتاه است.
توجه: در React ، مشخصه ها اغلب prps خوانده می شوند. Props داده هایی هستند که می توانید به سایر مؤلفه های سفارشی منتقل کنید. آنها مشابه مشخصه ها هستند به جز اینکه با هیچ یک از مشخصات HTML مطابقت ندارند. در این آموزش ، آنها را مشخصه می نامیم زیرا عمدتا مانند مشخصه های استاندارد HTML استفاده می شوند. این امر آنها را از propهایی که مانند مشخصه های HTML رفتار نمی کنند ، متمایز می کند ، که بعداً در این مجموعه پوشش داده می شود.

اکنون که می دانید چگونه از مشخصه calss در React استفاده می شود ، می توانید کد خود را به روز کنید تا طراحی ها را درج کنید. در ویرایشگر متن خود ، className=”container” را به برچسب div اضافه کنید
jsx-tutorial/src/App.js
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 اضافه کنید. به عنوان نمونه ، به ویرایشگر متن خود برگردید و شناسه greeting را به مولفه <h1> خود اضافه کنید. مانند HTML استاندارد به نظر می رسد:
jsx-tutorial/src/App.js
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 به نظر می رسد ، قدرت جاوا اسکریپت را دارد. این بدان معناست که می توانید متغیرها را اختصاص دهید و آنها را در مشخصه های خود ارجاع دهید. برای ارجاع به یک مشخصه ، آن را به جای نقل قولها در پرانتزهای به شکل {} قرار دهید.
در ویرایشگر متن خود ، خطوط هایلایت شده زیر را به عنوان یک مشخصه اضافه کنید:
jsx-tutorial/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>
</div>
)
}

export default App;

در این کد ، در بالای عبارت return یک متغیر به نام greeting با مقدار “greeting” ایجاد کرده اید ، سپس متغیر را در مشخصه id برچسب <h1> خود ارجاع داده اید.
فایل را ذخیره کنید و از آن خارج شوید. صفحه همان خواهد بود، اما برچسب id خواهد داشت.

تاکنون با چند مولفه به تنهایی کار کرده اید ، اما می توانید از JSX همچنین برای اضافه کردن بسیاری از عناصر HTML استفاده کرده و آنها را برای ایجاد صفحات پیچیده مستقر نمایید.
برای نشان دادن این موضوع ، می توانید با لیستی از ایموجی ها صفحه ای ایجاد کنید. این شکلک ها با یک مولفه <button> محصور می شوند. هنگامی که روی ایموجی ها کلیک می کنید ، نام کوتاه CLDR آنها را دریافت خواهید کرد.
برای شروع ، باید چند مولفه دیگر به صفحه اضافه کنید. . src / App.js را در ویرایشگر متن خود باز کنید. در طول این مرحله آن را باز نگه دارید.
⦁ $ nano src/App.js
⦁

ابتدا با افزودن خطوط هایلایت شده زیر لیستی از ایموجی ها را اضافه کنید:
jsx-tutorial/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> محاصره کرده اید که دارای چند ویژگی دیگر است. هر span دارای مشخصه role میباشد که روی img تنظیم شده است. این به نرم افزار در دسترس سیگنال میفرستد که این عنصر به شکل تصویر عمل میکند. علاوه بر این ، هر <span> همچنین دارای یک aria-label و یک ویژگی id با نام ایموجی است. aria-label آنچه نمایش داده می شود را به بازدید کنندگان می گوید. در مرحله بعدی از id در حین نوشتن رویداد استفاده خواهید کرد.
وقتی کد را به این روش می نویسید ، از عناصر معنایی استفاده می کنید ، که به شما کمک می کند صفحه را در دسترس قرار دهید و دنبال کردن آن برای صفحه خوان (screen readers) راحت باشد.
فایل را ذخیره کنید و از آن خارج شوید. مرورگر شما ریفرش می شود و این تصویر را مشاهده خواهید کرد:

اکنون کمی طراحی اضافه کنید. کد CSS را در ویرایشگر متن خود باز کنید:
⦁ $ nano src/App.css
⦁

کد هایلایت شده زیر را اضافه کنید تا ضمن افزایش اندازه فونت ، پیش زمینه و حاشیه پیش فرض دکمه ها را حذف کنید:
jsx-tutorial/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 را به مولفه <ul>اضافه می کنید تا افقی شود.
فایل CSS را ذخیره کنید و ببندید. مرورگر شما ریفرش می شود و شما این را مشاهده خواهید کرد:

اکنون با چندین مولفه JSX کار کرده اید که مانند HTML معمولی به نظر می رسند. شما کلاس ها ، شناسه ها و برچسب های Aria را اضافه کرده اید و با داده ها به عنوان رشته ها و متغیرها کار کرده اید. اما React همچنین از ویژگیهایی برای تعریف نحوه پاسخگویی عناصر شما به رویدادهای کاربر استفاده می کند. در مرحله بعدی ، با افزودن رویدادها به دکمه ، صفحه را به صورت تعاملی خواهید ساخت.
مرحله 3 – افزودن رویدادها به عناصر
در این مرحله ، با استفاده از ویژگی های خاص ، رویدادها را به عناصر اضافه می کنید و یک رویداد کلیک را روی یک مولفه دکمه دریافت می کنید. یاد می گیرید که چگونه اطلاعات را از این رویداد دریافت کنید تا عملی دیگر ارسال شود یا از سایر اطلاعات در دامنه فایل استفاده کند.
اکنون که یک صفحه اصلی با اطلاعات دارید ، زمان آن رسیده که چند رویداد را به آن اضافه کنید. event handler بسیاری وجود دارند که می توانید به عناصر HTML اضافه کنید. React به شما امکان دسترسی به همه اینها را می دهد. از آنجا که کد جاوا اسکریپت همراه با نشانه گذاری شما است ، می توانید ضمن نگه داشتن نظم کد خود ، به سرعت رویدادها را اضافه کنید.
برای شروع ، کنترل کننده رویداد onclick را اضافه کنید. به شما امکان می دهد به جای ضمیمه کردن شنونده رویداد (event listener) ، تعدادی کد جاوا اسکریپت را مستقیماً به مولفه خود اضافه کنید:
jsx-tutorial/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
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 است ، onclick را به صورت camelCased درمی آورید ، به این معنی که آن را به صورت onClick اضافه کرده اید. این مشخصه onClick از یک تابع ناشناس برای بازیابی اطلاعات در مورد آیتمی که کلیک شده است استفاده می کند.
شما یک تابع فلش ناشناس اضافه کردید که این رویداد را از روی دکمه کلیک شده دریاقن می کند و رویداد دارای هدفی خواهد بود که مولفه <span> است. اطلاعات مورد نیاز در مشخصه id است که می توانید با event.target.id به آنها دسترسی پیدا کنید. با تابع () alert می توانید هشدار را فعال کنید.
فایل را ذخیره کنید. در مرورگر خود ، روی یکی از ایموجی ها کلیک کرده و هشداری را به همراه نام دریافت خواهید کرد.

می توانید با یکبار اعلام تابع و انتقال آن به هر تابع onClick ، تکرار را کاهش دهید. از آنجایی که این تابع به چیزی غیر از ورودی و خروجی متکی نیست ، می توانید آن را خارج از تابع مؤلفه اصلی اعلام کنید. به عبارت دیگر ، تابع نیازی به دسترسی به حوزه مولفه ندارد. مزیت جدا کردن آنها این است که تابع کامپوننت شما کمی کوتاه تر است و می توانید در صورت نیاز بعدا تابع را به یک فایل جداگانه منتقل کنید.
در ویرایشگر متن خود ، تابعی به نام displayEmojiName ایجاد کنید که این رویداد را بگیرد و تابع ()alert را با شناسه فراخوانی کند. سپس تابع را به هر مشخصه onClick منتقل کنید:
jsx-tutorial/src/App.js
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;

فایل را ذخیره کنید. در مرورگر خود ، روی emoji کلیک کنید و همان هشدار را مشاهده خواهید کرد.
در این مرحله ، شما به هر مولفه رویدادهایی اضافه کردید. همچنین دیدید که چگونه JSX از اسامی کمی متفاوت برای رویدادهای مولفه استفاده می کند ، و با گرفتن تابع و استفاده مجدد از آن بر روی چندین مولفه ، شروع به نوشتن کد قابل استفاده مجدد کردید. در مرحله بعد ، یک تابع قابل استفاده مجدد خواهید نوشت که به جای نوشتن هر مولفه به صورت دستی، عناصر JSX را برمی گرداند. این امر بیشتر باعث کاهش تکرار خواهد شد.
مرحله 4 – نگاشت روی داده ها برای ایجاد عناصر
در این مرحله ، استفاده از JSX فراتر از نشانه گذاری ساده خواهد رفت. یاد می گیرید که آن را با جاوا اسکریپت ترکیب کنید تا نشانه گذاری پویا ایجاد کنید که کد را کوچک می کند و خوانایی را بهبود می بخشد. می توانید کد خود را در آرایه ای که برای ایجاد عناصر HTML حلقه می کنید ، آنالیز کنید.
JSX شما را به یک ترکیب مشابه HTML محدود نمی کند. همچنین امکان استفاده مستقیم از JavaScript را در نشانه گذاری به شما می دهد. این کار را تا حدی با وارد کردن توابع به مشخصه ها امتحان کرده اید. همچنین از متغیرها برای استفاده مجدد از داده ها استفاده کرده اید. اکنون زمان آن رسیده که JSX را مستقیماً از داده ها با استفاده از کد استاندارد JavaScript بسازید.
در ویرایشگر متن خود ، باید آرایه ای از داده های ایموجی را در فایل src / App.js ایجاد کنید. اگر بسته است ، فایل را مجدداً باز کنید:
⦁ $ nano src/App.js
⦁
آرایه ای را اضافه کنید که شامل آبجکت های دارای ایموجی و نام ایموجی باشد. توجه داشته باشید که ایموجی ها باید با علامت نقل قول احاطه شوند. این آرایه را فراتر از تابع app ایجاد کنید:
jsx-tutorial/src/App.js
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 تبدیل کنید. برای انجام این کار ، روی داده ها نگاشت می کنید و یک مولفه JSX را برمی گردانید. چند نکته وجود دارد که هنگام نوشتن کد باید آنها را به خاطر بسپارید.
ابتدا ، یک گروه از آیتم ها باید توسط یک کانتینر <div> احاطه شوند. سپس ، هر آیتم به یک مشخصه خاص به نام key نیاز دارد. Key نیاز به یک سری داده منحصر به فرد دارد که 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> با اطلاعات حلقه جایگزین می کنید.
در ویرایشگر متن خود موارد زیر را اضافه کنید:
jsx-tutorial/src/App.js
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;
Copy

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

ترکیب JSX با استاندارد JavaScript ابزارهای زیادی را در اختیار شما قرار می دهد تا بصورت دینامیکی محتوا را ایجاد کنید و می توانید از هر JavaScript استاندارد مورد نظر خود استفاده کنید. در این مرحله ، JSX سخت کد گذاری شده را با یک آرایه و یک حلقه جایگزین کردید تا HTML به صورت پویا ایجاد شود. در مرحله بعد ، با استفاده از اتصال کوتاه ، اطلاعات را به صورت مشروط نشان می دهید.
مرحله 5 – نمایش مشروط عناصر با اتصال کوتاه
در این مرحله ، از اتصال کوتاه برای نمایش مشروط عناصر HTML استفاده خواهید کرد. این کار به شما امکان می دهد تا مؤلفه هایی ایجاد کنید که بتوانند HTML را بر اساس اطلاعات اضافی پنهان کند یا نشان دهد ، و به انعطاف پذیری مولفه های شما برای رسیدگی به موقعیت های مختلف می پردازند.
مواقعی وجود دارد که شما برای نشان دادن اطلاعات در بعضی آیتم ها به مؤلفه نیاز دارید و در آیتم های دیگر احتیج نیست. به عنوان مثال ، فقط در صورت صحت برخی موارد ممکن است بخواهید برای کاربر پیام هشدار نشان دهید ، یا ممکن است بخواهید برخی از اطلاعات حساب را برای ادمین نمایش دهید که نمی خواهید یک کاربر عادی آن را ببیند.
برای این کار از گردش کوتاه استفاده خواهید کرد. این بدان معناست که شما از یک شرط استفاده خواهید کرد و اگر قسمت اول صادق باشد ، اطلاعات را در قسمت دوم برمی گرداند.
در اینجا یک مثال مطرح شده است. اگر می خواهید یک دکمه را فقط در صورت ورود کاربر به سیستم نشان دهید ، این مولفه را در پرانتز {} قرار دهید و شرایط را قبل از آن اضافه می کنید.
{isLoggedIn && <button>Log Out</button>}
Copy

در این مثال ، شما در حال استفاده از عملگر && هستید که اگر همه چیز صادق باشد ، آخرین مقدار را به شما بازمی گرداند. در غیر این صورت ، false را برگردانده ، که به React می گویند هیچ نشانه گذاری اضافی را برنگرداند. اگر isLoggedIn صادق باشد ، React دکمه را نشان می دهد. اگر isLoggedIn غلط باشد ، دکمه را نشان نمی دهد.
برای امتحان کردن این مسئله ، خطوط هایلایت شده زیر را اضافه کنید:
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 && را اضافه کردید.
فایل را ذخیره کنید و خواهید دید که مولفه در مرورگر شما ناپدید می شود. مهم است بدانید ، در HTML تولید شده نیز ظاهر نمی شود. این مخفی کردن یک مولفه با CSS نیست. اصلاً در نشانه گذاری نهایی وجود نخواهد داشت.

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

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

پارامترهای پیش فرض در جاوا اسکریپت – اجرای چندین نسخه PHP بر روی یک سرور Debian 10

نحوه راه اندازی یک پروژه React با برنامه React – نصب و ایمن سازی phpMyAdmin در اوبونتو 18

پیکربندی یک تایید اعتبار مجاز(CA) در CentOS 8 – تنظیم برنامه Node.js برای تولید در CentOS 7

نصب MariaDB در اوبونتو 18.04 – ایمن کردن Apache با Let’s Encrypt در Debian 10

نحوه نصب Node.js در CentOS 8 – بازنویسی URL را با mod_rewrite برای Apache در Debian 10

راه اندازی فایروال با استفاده از firewalld در CentOS 8 – نصب وب سرور Apache در Debian 10

اضافه کردن و حذف کاربران در CentOS 8 – نصب Apache Tomcat 9 در Debian 10

نصب و استفاده از PostgreSQL در CentOS 8 – راه اندازی سرور اولیه با Debian 10

نصب MariaDB در CentOS 8 – چگونه با JSX عناصر واقعی ایجاد کنیم

نصب و پیکربندی VNC در Debian 10 – استفاده از سرور از راه دور Docker

نصب و ایمن سازی Grafana در اوبونتو 18 – نحوه نصب Git در CentOS 8