آموزش مقدماتی کتابخانه معروف React.js برای افراد تازه کار - قسمت 1

- visibility ۲ mode_comment

در این مطلب یک برنامه خیلی ساده و مقدماتی با استفاده از کتابخانه پرطرفدار و معروف React.js میسازیم که به شما کمک میکنه مفاهیم کلی و ابتدایی اون رو متوجه بشید و بتونین از این ابزار در پروژه هاتون استفاده کنید.آموزش مقدماتی کتابخانه معروف React.js برای افراد تازه کار - قسمت 1

زمانی که برای اولین بار میخواید کار با React رو شروع کنید بهتره از راحت ترین روش نصب و استفاده از اون بهره ببرید. راحت ترین روش استفاده از React اینه که کتابخانه های مورد نظر رو با استفاده از تگ script بصورت مستقیم در کدهای HTML خودتون لود کنید. پس یک فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین:

همونطور که میبینید ما فایلهای React و React DOM و Babel رو لود کردیم. Babel رو به این خاطر لود کردیم چون React از چیزی بنام JSX استفاده میکنه و Babel کدهای JSX رو در پس زمینه به کدهای Javascript تبدیل میکنه تا مرورگر بتونه اونا رو متوجه بشه. JSX به شما این اجازه رو میده که مستقیما از کدهای HTML درون کدهای Javascript استفاده کنید و دیگه نیازی نیست از React.createElement استفاده کنید. در اینجا 2 نکته دیگه هست که باید بهتون بگم:

  1. میبینید که یک div با id = app درون کدهای HTML قرار دادیم. این المنت جایی هست که ما کل برنامه React رو در اون قرار میدیم و همه چیز درون اون قرار میگیره. در ادامه نحوه انجام اینکار رو بهتون توضیح میدم.
  2. همونطور که میبینید یک تگ <script type="text/babel"> در انتها قرار دادیم. در این تگ میتونیم کدهای React مورد نظر خودمون رو بنویسیم و اولین برنامه خودمون با استفاده از React رو به وجود بیاریم.

Components

همه چیز در React بصورت یک Component یا جزء می باشد. کد زیر رو در نظر بگیرید:

همونطور که میبینید در اینجا از ES6 برای تعریف کلاس استفاده شده است. میبینید که یک Component بنام Hello ساختیم و با استفاده از عملگر extends ویژگی های وراثتی React.Component رو برای Hello نیز در نظر گرفتیم. بعد از اینکه Component خودتون رو به وجود آوردید میتونین درون اون متدهای مختلفی رو قرار بدین و به اون زندگی ببخشید. همونطور که میبینید در کد بالا فقط یک متد وجود داره و اونم متد render هست.

درون متد render مشخص میکنید که این کامپوننت چه چیزی رو بر روی صفحه قرار بده. در مثال بالا ما فقط میخوایم یک تگ h1 با متن Hello world در خروجی قرار بگیره. همونطور که میبینید از کدهای HTML مستقیما در کدهای Javascript استفاده شده است. این همون ویژگی هست که JSX برامون فراهم میکنه. کدهای JSX شباهت زیادی به HTML دارند ولی دقیقا HTML نیستند و Babel اونا رو به Javascript تبدیل میکنه. مثلا کد JSX که در بالا تعریف کردیم در انتها بصورت زیر خواهد شد:

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

برای اینکه این کامپوننتی که به وجود آوردیم رو در صفحه مرورگر نمایش بدیم و رندر کنیم، میتونیم از متد render مربوط به ReactDOM استفاده کنیم. کد زیر رو ببینید:

همونطور که میبینید متد render در کد بالا دو ورودی رو دریافت میکنه. ورودی اول همون کامپوننت Hello هست که در بالا اون رو ساختیم و ورودی دوم هم مشخص میکنه که میخوایم این کدها رو در کجای صفحه رندر کنیم. همونطور که قبلا هم اشاره کردیم، یک div با id = root ساختیم. در اینجا با استفاده از document.getElementById اون div رو انتخاب کردیم و به ReactDOM میگیم که کامپوننت مورد نظر رو در اون div رندر کنه. به همین راحتی. پس تا اینجای کار کل کدها بصورت زیر خواهند بود:

اگر کد بالا رو در مرورگر اجرا کنید، خروجی زیر رو خواهید دید:

مدیریت داده در React

دو نمونه داده در React وجود دارد که عبارتند از state و props. در ابتدا فهمیدن این دو نوع داده کمی گیج کننده خواهد بود و شاید نتونین فرق اونا رو به خوبی متوجه بشید. پس اگر به خوبی متوجه نشدید نگران نباشید و با ما همراه باشید. وقتی که کار با اونا رو شروع میکنید کم کم آسون و قابل فهم میشن و بعد از مدتی با اونا راحت کار خواهید کرد.

فرقی که دارند اینه که state خصوصی و private هست و فقط درون کامپوننتی که تعریف میشه قابل دسترسی هست و همون کامپوننت میتونه اون رو تغییر بده و بقیه کامپوننتها کنترلی بر روی اون ندارند. در طرف مقابل props خارجی یا External هست و نمیتونیم با استفاده از کامپوننت اون رو مدیریت کنیم. props از کامپوننتها پدر و بالاتر به پایین فرستاده میشن و کامپوننت فعلی فقط به این اطلاعات دسترسی داره و میتونه اونا رو نمایش بده.

در مطلب بعد با ادامه توضیحات در خدمتتون هستیم و با مثالهای بیشتر شما رو با React بهتر آشنا خواهیم کرد.

امیدوارم از این مطلب خوشتون اومده باشه.

Source

comment دیدگاه کاربران
محمد محمدی

سلام خسته نباشید
خیلی ساده و روان توضیح دادید منتظر قسمت های بعدی هستم
ممنون

محمد اسفندیاری

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.