آشنایی ابتدایی با دستور jsx

در جلسه قبل با مقدمات شروع یادگیری react آشنا شدید

در این جلسه قصد داریم تا به شما نمونه کوچکی از عملکرد دستور jsx را نمایش دهیم. در طول دوره با این دستورات آشنا خواهید شد.

استفاده از کامپوننت

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

مزایای این سبک کد نویسی:

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

نمونه پیاده سازی یک بخش بصورت کامپوننت و React

فرض کنید یک Card دارید و قصد دارید در آن اطلاعات شخصی را نمایش دهید.

کد HTML:

<div class="person">
  <h1>Amir Javanmir</h1>
  <p>Age: 30</p>
</div>

<h1>Amir Javanmir</h1>

</div>

حالا اگر بخواهیم به همین شکل اطلاعات افراد دیگر را نیز نمایش دهیم باید کدهای HTML را تکرار کنیم:

<div class="person">
  <h1>Amir Javanmir</h1>
  <p>Age: 30</p>
</div>

<div class="person">
  <h1>Hamed</h1>
  <p>Age: 38</p>
</div>


<div class="person">
  <h1>Mahdi</h1>
  <p>Age: 19</p>
</div>

<h1>Amir Javanmir</h1>

</div>

<h1>Hamed</h1>

</div>

<h1>Mahdi</h1>

</div>

کدهای HTML همه تکراری هستند. شاید در این سطح کوچک مشکل زیادی نباشد اما تصور کنید در برنامه های بزرگتر چه می شود؟ مخصوصا زمانی که بخواهیم با استفاده از جاوا اسکریپت داده های آن ها را تغییر دهیم باید چندین خط کد بنویسیم!

حال بیایم همین حالت را با کامپوننت و react ایجاد کنیم.

برای شروع در سند html خود این دو فایل CDN را اضافه کنید.فایل نخست مربوط به خود react است و فایل دوم مربوط به react dom:

https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js
https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js

1 2	https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js

babel چیست؟

React از جدیدترین ویژگی های جاوا اسکریپت و Syntax های خاصی استفاده می کند که هنوز در بسیاری از مرورگرها پشتیبانی نمی‌شود. بنابراین با استفاده از Babel می توانیم از آخرین ویژگی ها و قابلیت های جاوا اسکریپت و react استفاده کنیم و کدها را به آن شکل بنویسیم،

سپس Babel آن ها را به صورت کدهایی که در مرورگر کار کنند در می آورد تا مشکلی پیش نیاید.

کامپوننت های React انواع خاصی دارند اما در ساده ترین حالت آن ها چیزی جز یک تابع جاوا اسکریپتی نیستند!

بنابراین می توانیم برای شروع بنویسیم:

function Person() {

{

function Person() {

{

این تابع برخلاف آنچه تصور می کردید می تواند تگ های html را دریافت و در قالب js برگشت دهد. این syntax خاص JSX نام دارد.

مثال:

function Person(props) {
  return (
<div class="person">
  <h1>Amir Javanmir</h1>
  <p>Age: 30</p>
</div>);
}

function Person(props) {

return (

<h1>Amir Javanmir</h1>

</div>);

}

حالا به جای کدهای تکراری HTML یک Div با “id=”p1 ایجاد می کنیم.

پکیج دومی که وارد پروژه کردیم را یادتان می آید؟ نام پکیج اول React و پکیج دوم ReactDOM بود.

پکیج ReactDOM دارای متد render است که ما را قادر می‌سازد تا یک تابع جاوا اسکریپتی را به صورت یک کامپوننت وارد DOM کنیم.

نحوه نوشتن:

ReactDOM.render(<Person />, document.querySelector('#p1'));

1	ReactDOM.render(<Person />, document.querySelector('#p1'));

متد render دو پارامتر می گیرد:

پارامتر اول همان کلاس یا تابع Person است که باید به صورت یک عنصر HTML نوشته شود.
پارامتر دوم می گوید عنصر را کجا نمایش دهم؟

اما هنوز هم عنصر ما قابل استفاده مجدد نیستند. اگر div با id=”p1” را در قسمت HTML کپی کنیم هیچ عنصر دیگری نیز نمایش داده نمی شود. از طرفی اگر بخواهیم دوباره کدهای جاوا اسکریپت را کپی کنیم همان دوباره کاری خواهد بود.

برای حل این مشکل می توانیم به تابع Person یک آرگومان بدهیم. این آرگومان می تواند هر نام دلخواهی را داشته باشد اما از آنجا که به این مفهوم و بحث props می گویند ما نام آرگومان را props می گذاریم.همچنین مقادیر داخل تگ را تغییر داده و مقدار آنها را از آرگومان props دریافت می کنیم.

مثال:

function Person(props) {
  return (
    <div className="person">
      <h1>{props.name}</h1>
      <p>Your Age: {props.age}</p>
    </div>
  );
}

function Person(props) {

return (

<h1>{props.name}</h1>

<p>Your Age: {props.age}</p>

</div>

);

}

حال در سند اصلی خود دو تگ div برای دریافت و نمایش اطلاعات تابع Person ایجاد می کنیم قبلی یک تگ div با id=p1 بود حال یک تگ دیگر با id=p2 می سازیم.

مثال:

<div id="p1"></div>

<div id="p2"></div>

دستور مربوط به متد render را دوبار صدا می زنیم. یکی برای p1 و دومی برای p2. درون این متد تابع مربوط به Person را بهمراه خصوصیات name و age ارسال می کنیم.مقادیر این کامپوننت به تابع در قالب props ارسال می شوند.

مثال:

function Person(props) {
  return (
    <div class="person">
      <h1>{props.name}</h1>
      <p>Your Age: {props.age}</p>
    </div>
  );
}

ReactDOM.render(<Person name="Amir Javanmir" age="30" />, document.querySelector("#p1"));

ReactDOM.render(<Person name="Shahryar Barati" age="31" />, document.querySelector("#p2"));

function Person(props) {

return (

<h1>{props.name}</h1>

<p>Your Age: {props.age}</p>

</div>

);

}

ReactDOM.render(<Person name="Amir Javanmir" age="30" />, document.querySelector("#p1"));

ReactDOM.render(<Person name="Shahryar Barati" age="31" />, document.querySelector("#p2"));

ما دو بار تابع render را صدا زده ایم؛ با اینکه مشکلی وجود ندارد اما خیلی شکل زیبایی نیز ندارد. برای بهتر شدن می توانیم قسمت HTML مربوط به تگ های p1 و p2 را پاک کرده و فقط کد زیر را برایش بنویسیم.مقدار id را هرچه بخواهید می توانید تنظیم کنید.

مثال:

<div id="app"></div>

1	<div id="app"></div>

حالا درخواست دوم تابع render را حذف و مقدار پارامتر متد render را بصورت متغیری تعریف می کنیم.این متغیر حاوی دو تابع Person با پارامترهای متفاوت است.

مثال:

function Person(props) {
  return (
    <div className="person">
      <h1>{props.name}</h1>
      <p>Your Age: {props.age}</p>
    </div>
  );
}

var app = (
  <div>
     <Person name="Amir Javanmir" age="30" />
      <Person name="Shahryar Barati" age="31" />
  </div>
);
ReactDOM.render(app, document.querySelector('#app'));/*
/*
Amir Javanmir
Your Age: 30

Shahryar Barati
Your Age: 31
*/

function Person(props) {

return (

<h1>{props.name}</h1>

<p>Your Age: {props.age}</p>

</div>

);

}

var app = (

<div>

</div>

);

ReactDOM.render(app, document.querySelector('#app'));/*

Amir Javanmir

Your Age: 30

Shahryar Barati

Your Age: 31

کلمات کلیدی را وارد نمایید

آشنایی ابتدایی با دستور jsx

آموزش React

استفاده از کامپوننت

نمونه پیاده سازی یک بخش بصورت کامپوننت و React

babel چیست؟

آخرین آموزش ها

دیدگاه خود را بیان کنید لغو پاسخ

امیر جوان میر

طراح، گرافیست و توسعه دهنده وب

آموزش React

دسترسی سریع

کلمات کلیدی را وارد نمایید

آشنایی ابتدایی با دستور jsx

آموزش React

استفاده از کامپوننت

نمونه پیاده سازی یک بخش بصورت کامپوننت و React

babel چیست؟

آخرین آموزش ها

دیدگاه خود را بیان کنید لغو پاسخ

امیر جوان میرطراح، گرافیست و توسعه دهنده وب

آموزش React

امیر جوان میر

طراح، گرافیست و توسعه دهنده وب