چگونه با 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

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

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

از آنجا که این JSX است ، onclick را به صورت camelCased درمی آورید ، به این معنی که آن را به صورت onClick اضافه کرده اید. این مشخصه onClick از یک تابع ناشناس برای بازیابی اطلاعات در مورد آیتمی که کلیک شده است استفاده می کند.
شما یک تابع فلش ناشناس اضافه کردید که این رویداد را از روی دکمه کلیک شده دریاقن می کند و رویداد دارای هدفی خواهد بود که مولفه <span> است. اطلاعات مورد نیاز در مشخصه id است که می توانید با event.target.id به آنها دسترسی پیدا کنید. با تابع () alert می توانید هشدار را فعال کنید.
فایل را ذخیره کنید. در مرورگر خود ، روی یکی از ایموجی ها کلیک کرده و هشداری را به همراه نام دریافت خواهید کرد.

می توانید با یکبار اعلام تابع و انتقال آن به هر تابع onClick ، تکرار را کاهش دهید. از آنجایی که این تابع به چیزی غیر از ورودی و خروجی متکی نیست ، می توانید آن را خارج از تابع مؤلفه اصلی اعلام کنید. به عبارت دیگر ، تابع نیازی به دسترسی به حوزه مولفه ندارد. مزیت جدا کردن آنها این است که تابع کامپوننت شما کمی کوتاه تر است و می توانید در صورت نیاز بعدا تابع را به یک فایل جداگانه منتقل کنید.
در ویرایشگر متن خود ، تابعی به نام displayEmojiName ایجاد کنید که این رویداد را بگیرد و تابع ()alert را با شناسه فراخوانی کند. سپس تابع را به هر مشخصه onClick منتقل کنید:

در ویرایشگر متن خود متغیری به نام 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