ویدیو youtube که توسط Dotnet Community Standup برگزار شد، در آن نیز از کتابخانههای نیتو استفاده شد. با استفاده از sqllite، اپلیکیشن میتواند بدون نیاز به اینترنت هم کار کند و زمانی که به اینترنت کانکت شد، خود را با سرور سینک کند. همچنین امکان استفاده از کامپوننتهای بلیزر در react هم خیلی جالب بود که در ویدیو بالا بهش اشاره شده.
نکات مهم از داخل متن:
Telerik introduced the Telerik Platform
In the European Union alone, income from the development of mobile applications is estimated at 17.5 billion euros for 2013, according to a report published by the European Commission
Three weeks after releasing the first version[Telerik Platform], it achieved over 61 thousand registrations. Eight thousand people joined the online presentation of the platform
و در نهایت پارگراف آخر
In the European Union alone, income from the development of mobile applications is estimated at 17.5 billion euros for 2013, according to a report published by the European Commission
Three weeks after releasing the first version[Telerik Platform], it achieved over 61 thousand registrations. Eight thousand people joined the online presentation of the platform
و در نهایت پارگراف آخر
اشتراکها
روش ارتقاء به React 18 RC
اشتراکها
خلاصهی سریع React برای سال 2021
اشتراکها
نگاهی به سیر تکاملی Web Components
با توجه به فراگیر شدن استفاده از جاوا اسکریپت و بخصوص مبحث شیء گرایی، تصمیم گرفتم طی سلسله مقالاتی با مباحث شیء گرایی در این زبان بیشتر آشنا شویم. جاوا اسکریپت یک زبان مبتنی بر شیء است و نه شیءگرا و خصوصیات زبانهای شیء گرا، به طور کامل در آن پیاده سازی نمیگردد.
لازم به ذکر است که انواع دادهای در جاوا اسکریپت شامل 2 نوع میباشند:
1- نوع داده اولیه (Primitive) که شامل Boolean ، Number و Strings میباشند.
2- نوع داده Object که طبق تعریف هر Object مجموعهای از خواص و متدها است.
نوع دادهای اولیه، از نوع Value Type و نوع داده ای Object، از نوع Refrence Type میباشد.
برای تعریف یک شیء (Object) در جاوا اسکریپت، 3 راه وجود دارد:
1 - تعریف و ایجاد یک نمونه مستقیم از یک شیء ( direct instance of an object )
2 – استفاده از function برای تعریف و سپس نمونه سازی از یک شیء ( Object Constructor )
3 – استفاده از متد Object.Create
روش اول :
در روش اول دو راه برای ایجاد اشیاء استفاده میگردد که با استفاده از دو مثال ذیل، این دو روش توضیح داده شدهاند:
مثال اول : (استفاده از new )
در این مورد، ابتدا یک شیء پایه ایجاد میگردد و خواص مورد نظر برایش تعریف میگردد و با استفاده از اسم شیء به این خواص دسترسی داریم.
مثال دوم (استفاده از literal notation )
در این مورد با استفاده از کلمه کلیدی var یک شیء تعریف میشود و در داخل {} کلیه خواص و متدهای این شیء تعریف میگردد. این روش برای تعریف اشیاء در جاوا اسکریپت بسیار متداول است.
هر دو مثالهای 1 و 2 در روش اول برای ایجاد اشیاء بکار میروند. امکان گسترش دادن اشیاء در این روش و اضافه کردن خواص و متد در آینده نیز وجود دارد. بعنوان مثال میتوان نوشت :
در اینحال، خاصیت سومی به مجموع خواص شی Obj اضافه میگردد.
حال در این مثال اگر مقدار شی obj را برابر یک شیء دیگر قرار دهیم به نحو زیر :
و برای اینکه بتوان از امکانات زبانهای شیء گرا در این زبان استفاده کرد، بایستی الگویی را تعریف کنیم و سپس از روی این الگو، اشیا مورد نظر را پیاده سازی نمائیم.
میبینیم که مقدار هر دو متغیر در خروجی یکسان میباشد و این موضوع با ماهیت شیء گرایی که در آن همهی اشیایی که از روی یک الگو نمونه سازی میگردند مشخصههایی یکسان، ولی مقادیر متفاوتی دارند، متفاوت است. البته این موضوع از آنجا ناشی میگردد که اشیاء ایجاد شده در جاوا اسکریپت ذاتا type refrence هستند و به همین منظور برای پیاده سازی الگویی (کلاسی) که بتوان رفتار شیء گرایی را از آن انتظار داشت از روش زیر استفاده میکنیم. برای درک بهتر اسم این الگو را کلاس مینامیم که در روش دوم به آن اشاره میکنیم.
روش دوم :
یا به شکل زیر :
به این روش Object Constructor یا سازنده اشیاء گفته میشود.
در اینجا با استفاده از کلمه کلیدی function و در داخل {} کلیه خواص و متدهای لازم را به شیء مورد نظر اضافه میکنیم. استفاده از کلمه this در داخل function به این معنی است که هر کدام از نمونههای object مورد نظر، مقادیر متفاوتی خواهند داشت .
یک مثال دیگر :
در اینجا میبینیم که به ازای هر نمونه از اشیایی که با function میسازیم، خروجی متفاوتی تولید میگردد که همان ماهیت شیء گرایی است.
روش سوم :استفاده از متد Object.Create
در این روش با استفاده از متد Object.Create و استفاده از یک شیء که از قبل ایجاد شده، یک شیء جدید ایجاد میشود.
حال برای اضافه کردن متدها و خاصیتهایی به کلاس جاوا اسکریپتی مورد نظر، به طوریکه همهی نمونههایی که از این کلاس ایجاد میشوند بتوانند به این متدها و خاصیتها دسترسی داشته باشند، از مفهومی به اسم prototype استفاده میکنیم. برای مثال کلاس زیر را در نظر بگیرید:
این کلاس یک سیستم ساده امتحانی (quiz ) را پیاده میکند که در آن اطلاعات شخص که شامل نام و ایمیل میباشد گرفته شده و سه تابع، شامل ذخیره نمرات، تغییر ایمیل و نمایش اطلاعات شخص به همراه نمرات نیز به آن اضافه میشود.
حال برای اضافه نمودن متدهای مختلف به این کلاس داریم :
و سپس برای استفاده از آن و گرفتن خروجی نمونه داریم :
در نتیجه تمام نمونههای کلاس User میتوانند به این متدها دسترسی داشته باشند و به این صورت مفهوم Encapsulation نیز پیاده میگردد.
وراثت (Inheritance) در جاوا اسکریپت :
در بسیاری از مواقع لازم است عملکردی (Functionality) که در یک کلاس تعریف میگردد، در کلاسهای دیگر نیز در دسترس باشد. بدین منظور از مفهوم وراثت استفاده میشود. در نتیجه کلاسها میتوانند از توابع خود و همچنین توابعی که کلاسهای والد در اختیار آنها میگذارند استفاده کنند. برای این منظور چندین راه حل توسط توسعه دهندگان ایجاد شده است که در ادامه به چند نمونه از آنها اشاره میکنیم.
سادهترین حالت ممکن از الگویی شبیه زیر است:
در کد بالا ابتدا یک function (class) به نام Base که حاوی یک خصوصیت به نام color میباشد، تعریف شده و سپس یک کلاس دیگر بنام sub تعریف میکنیم که قرار است خصوصیات و متدهای کلاس Base را به ارث ببرد و سپس از طریق خصوصیت prototype کلاس Sub، که نمونهای از کلاس Base را به آن نسبت میدهیم باعث میشود خواص و متدهای کلاس Base توسط کلاس Sub قابل دسترسی باشد. در ادامه متد showColor را به کلاس Sub اضافه میکنیم و توسط آن به خصوصیت color در این کلاس دسترسی پیدا میکنیم.
راه حل دیگری نیز برای اینکار وجود دارد که الگویی است بنام Parasitic Combination :
در این الگو براحتی و با استفاده از متد Object.create که در بالا توضیح داده شد، هر کلاسی که ایجاد میکنیم، با انتساب آن به یک شیء جدید، کلیه خواص و متدهای آن نیز توسط شیء جدید قابل استفاده میشود.
در قسمتهای دیگر به مباحثی همچون Override و CallBaseMethodها خواهیم پرداخت.
برای مطالعه بیشتر :
http://eloquentjavascript.net/chapter8.html
http://phrogz.net/JS/classes/OOPinJS2.html
لازم به ذکر است که انواع دادهای در جاوا اسکریپت شامل 2 نوع میباشند:
1- نوع داده اولیه (Primitive) که شامل Boolean ، Number و Strings میباشند.
2- نوع داده Object که طبق تعریف هر Object مجموعهای از خواص و متدها است.
نوع دادهای اولیه، از نوع Value Type و نوع داده ای Object، از نوع Refrence Type میباشد.
برای تعریف یک شیء (Object) در جاوا اسکریپت، 3 راه وجود دارد:
1 - تعریف و ایجاد یک نمونه مستقیم از یک شیء ( direct instance of an object )
2 – استفاده از function برای تعریف و سپس نمونه سازی از یک شیء ( Object Constructor )
3 – استفاده از متد Object.Create
روش اول :
در روش اول دو راه برای ایجاد اشیاء استفاده میگردد که با استفاده از دو مثال ذیل، این دو روش توضیح داده شدهاند:
مثال اول : (استفاده از new )
<script type=”text/javascript”> var person = new Object(); person.firstname = “John”; person.lastname = “Doe”; person.age = 50; person.eyecolor = “blue”; document.write(person.firstname + “ is “ + person.age + “ years old.”); </script>
result : John is 50 years old.
مثال دوم (استفاده از literal notation )
<script type=”text/javascript”> var obj = { var1: “text1”, var2: 5, Method: function () { alert(this.var1); } }; obj.Method(); </script>
Result : text1
هر دو مثالهای 1 و 2 در روش اول برای ایجاد اشیاء بکار میروند. امکان گسترش دادن اشیاء در این روش و اضافه کردن خواص و متد در آینده نیز وجود دارد. بعنوان مثال میتوان نوشت :
Obj.var3 = “text3”;
حال در این مثال اگر مقدار شی obj را برابر یک شیء دیگر قرار دهیم به نحو زیر :
var newobj = obj; newobj.var1 = "other text"; alert(obj.var1);// other text alert(newobj.var1);// other text
میبینیم که مقدار هر دو متغیر در خروجی یکسان میباشد و این موضوع با ماهیت شیء گرایی که در آن همهی اشیایی که از روی یک الگو نمونه سازی میگردند مشخصههایی یکسان، ولی مقادیر متفاوتی دارند، متفاوت است. البته این موضوع از آنجا ناشی میگردد که اشیاء ایجاد شده در جاوا اسکریپت ذاتا type refrence هستند و به همین منظور برای پیاده سازی الگویی (کلاسی) که بتوان رفتار شیء گرایی را از آن انتظار داشت از روش زیر استفاده میکنیم. برای درک بهتر اسم این الگو را کلاس مینامیم که در روش دوم به آن اشاره میکنیم.
روش دوم :
<script type=”text/javascript”> function Person(firstname, lastname, age, eyecolor) { this.firstname = firstname; this.lastname = lastname; this.age = age; this.eyecolor = eyecolor; } var myFather = new Person("John", "Doe", 50, "blue"); document.write(myFather.firstname + " is " + myFather.age + " years old."); result : John is 50 years old. var myMother=new person("Sally","Rally",48,"green"); document.write(myMother.firstname + " is " + myFather.age + " years old."); result : Sally is 48 years old. </script>
var Person = function (firstname, lastname, age, eyecolor) { this.firstname = firstname; this.lastname = lastname; this.age = age; this.eyecolor = eyecolor; } var myFather = new Person("John", "Doe", 50, "blue"); document.write(myFather.firstname + " is " + myFather.age + " years old."); result : John is 50 years old. var myMother=new person("Sally","Rally",48,"green"); document.write(myMother.firstname + " is " + myFather.age + " years old."); result : Sally is 48 years old.
در اینجا با استفاده از کلمه کلیدی function و در داخل {} کلیه خواص و متدهای لازم را به شیء مورد نظر اضافه میکنیم. استفاده از کلمه this در داخل function به این معنی است که هر کدام از نمونههای object مورد نظر، مقادیر متفاوتی خواهند داشت .
یک مثال دیگر :
<script type="text/javascript"> function cat(name) { this.name = name; this.talk = function() { alert( this.name + " say meeow!" ) } } cat1 = new cat("felix") cat1.talk() //alerts "felix says meeow!" cat2 = new cat("ginger") cat2.talk() //alerts "ginger says meeow!" </Script>
روش سوم :استفاده از متد Object.Create
var myObjectLiteral = { property1: "one", property2: "two", method1: function() { alert("Hello world!"); }} var myChild = Object.create(myObjectLiteral); myChild.method1(); // will alert "Hello world!"
حال برای اضافه کردن متدها و خاصیتهایی به کلاس جاوا اسکریپتی مورد نظر، به طوریکه همهی نمونههایی که از این کلاس ایجاد میشوند بتوانند به این متدها و خاصیتها دسترسی داشته باشند، از مفهومی به اسم prototype استفاده میکنیم. برای مثال کلاس زیر را در نظر بگیرید:
این کلاس یک سیستم ساده امتحانی (quiz ) را پیاده میکند که در آن اطلاعات شخص که شامل نام و ایمیل میباشد گرفته شده و سه تابع، شامل ذخیره نمرات، تغییر ایمیل و نمایش اطلاعات شخص به همراه نمرات نیز به آن اضافه میشود.
function User (theName, theEmail) { this.name = theName; this.email = theEmail; this.quizScores = []; this.currentScore = 0; }
User.prototype = { saveScore:function (theScoreToAdd) { this.quizScores.push(theScoreToAdd) }, showNameAndScores:function () { var scores = this.quizScores.length > 0 ? this.quizScores.join(",") : "No Scores Yet"; return this.name + " Scores: " + scores; }, changeEmail:function (newEmail) { this.email = newEmail; return "New Email Saved: " + this.email; } }
// A User firstUser = new User("Richard", "Richard@examnple.com"); firstUser.changeEmail("RichardB@examnple.com"); firstUser.saveScore(15); firstUser.saveScore(10); document.write(firstUser.showNameAndScores()); //Richard Scores: 15,10 document.write('<br/>'); // Another User secondUser = new User("Peter", "Peter@examnple.com"); secondUser.saveScore(18); document.write(secondUser.showNameAndScores()); //Peter Scores: 18
وراثت (Inheritance) در جاوا اسکریپت :
در بسیاری از مواقع لازم است عملکردی (Functionality) که در یک کلاس تعریف میگردد، در کلاسهای دیگر نیز در دسترس باشد. بدین منظور از مفهوم وراثت استفاده میشود. در نتیجه کلاسها میتوانند از توابع خود و همچنین توابعی که کلاسهای والد در اختیار آنها میگذارند استفاده کنند. برای این منظور چندین راه حل توسط توسعه دهندگان ایجاد شده است که در ادامه به چند نمونه از آنها اشاره میکنیم.
سادهترین حالت ممکن از الگویی شبیه زیر است:
<script type="text/javascript"> function Base() { this.color = "blue"; } function Sub() { } Sub.prototype = new Base(); Sub.prototype.showColor = function () { alert(this.color); } var instance = new Sub(); instance.showColor(); //"blue" </Script>
راه حل دیگری نیز برای اینکار وجود دارد که الگویی است بنام Parasitic Combination :
در این الگو براحتی و با استفاده از متد Object.create که در بالا توضیح داده شد، هر کلاسی که ایجاد میکنیم، با انتساب آن به یک شیء جدید، کلیه خواص و متدهای آن نیز توسط شیء جدید قابل استفاده میشود.
<script language="javascript" type="text/javascript"> if (typeof Object.create !== 'function') { Object.create = function (o) { ایجاد یک کلاس خالی که قرار است خواص کلاس دریافتی توسط آرگومان کلاس پایه را به ارث ببرد// function F() { } با ارث برده شود F باعث میشویم کلیه خواص و متدهای دریافتی توسط Prototype توسط خصوصیت F با انتساب آرگومان دریافتی که یک شی است به کلاس F.prototype = o; return new F(); }; } var cars = { type: "sedan", wheels: 4 }; // We want to inherit from the cars object, so we do: var toyota = Object.create(cars); // now toyota inherits the properties from cars document.write(toyota.type); </script> output :sedan
برای مطالعه بیشتر :
http://eloquentjavascript.net/chapter8.html
http://phrogz.net/JS/classes/OOPinJS2.html
در قسمت 6، تمرینی را جهت پیاده سازی نمایش لیست یک سری فیلم، انجام دادیم. در اینجا قصد داریم این تمرین را جهت دریافت امتیاز و Like از کاربر، به ازای هر ردیف نمایش داده شده، تکمیل کنیم.
بررسی ساختار کامپوننت Like
در پوشهی components، ابتدا پوشهی جدید common را ایجاد میکنید. در اینجا تمام کامپوننتهای عمومی برنامه را که منحصر به دومین آن برنامه نیستند، قرار میدهیم. کامپوننتهایی را که اگر آنها را به برنامههای دیگری نیز کپی کردیم، بدون هیچ مشکلی قابلیت استفادهی مجدد را داشته باشند و متصل به سرویسها و زیرساخت برنامهی جاری نباشند. سپس در پوشهی common، فایل جدید src\components\common\like.jsx را ایجاد میکنیم و داخل آن توسط میانبرهای imrc و cc در VSCode، ساختار ابتدایی کامپوننت Like را ایجاد میکنیم.
ساختار کلی این کامپوننت به صورت زیر است:
- ورودی این کامپوننت به این صورت است که در آن مشخص شده آیا یک فیلم، مورد علاقه واقع شده یا خیر؛ مانند خاصیت liked که یک boolean است. اگر true باشد، یک آیکن قلب توپر را نمایش میدهد و برعکس.
- خروجی این کامپوننت نیز به صورت یک رخداد است. هر زمانیکه بر روی آیکن قلب آن کلیک میشود، این کامپوننت یک رخداد onClick را سبب خواهد شد. اکنون هر کامپوننت دیگری که در حال استفادهی از آن است، مطلع شده و خاصیت liked شیء مرتبط را تغییر میدهد.
فعلا ساختار ابتدایی آنرا به رندر یک قلب خالی که توسط قلم آیکنهای font-awesome تامین میشود، تنظیم میکنیم:
نمایش ابتدایی کامپوننت Like در جدول لیست فیلمها
فعلا مهم نیست که این کامپوننت کار خاصی را انجام نمیدهد. فقط قصد داریم آنرا در UI برنامه نمایش دهیم. به همین جهت ابتدا یک ستون جدید را مخصوص آن، در جدول فعلی نمایش لیست فیلمها، ایجاد کرده و المان آنرا درج میکنیم. برای این منظور به فایل movies.jsx مراجعه کرده و ابتدا این کامپوننت را import میکنیم:
سپس در سرستونهای جدول، یک th جدید را تعریف میکنیم تا ستونی برای درج آن ایجاد شود. همچنین در قسمت بدنهی جدول، پیش از دکمهی حذف، یک td مخصوص درج المان </Like> را اضافه میکنیم:
تا اینجا ستون جدید Like را مشاهده میکنید که کار رندر کامپوننتهای Like در آن انجام شدهاست.
واکنش نشان دادن به ورودیها، در کامپوننت Like
در ادامه باید این کامپوننت بر اساس مقدار Boolean ای که از والد خود دریافت میکند، یک آیکن قلب توپر و یا خالی را نمایش دهد. برای این منظور فعلا در کامپوننت movies، جائیکه المان کامپوننت Like درج شدهاست، ویژگی جدید liked را به مقدار ثابت true تنظیم میکنیم </Like liked={true}> تا بتوان قسمت props این کامپوننت را تکمیل کرد.
در کامپوننت Like، تفاوت بین آیکن قلب توپر و خالی در یک o- در انتهای کلاسهای font-awesome است:
در اینجا اگر بر اساس مقدار ورودی this.props.liked، یک مقدار false را دریافت کردیم، به classes یک o- را اضافه میکنیم تا یک آیکن قلب خالی را رندر کند. سپس این classes را به خاصیت className انتساب دادهایم.
پس از این تغییرات اگر برنامه را ذخیره کرده و مجددا در مرورگر بارگذاری کنیم، با توجه به تنظیم liked={true} در کامپوننت movies، ستون like آن با آیکنهای قلب توپر نمایش داده میشود که بیانگر واکنش نشان دادن صحیح به ورودیها در کامپوننت Like است:
پویا سازی مقدار پیشفرض ویژگی liked در کامپوننت movies
برای پویاسازی نمایش مقدار liked در کامپوننت movies، از آنجائیکه هر ردیف بیانگر یک شیء movie است، میتوان به این صورت عمل کرد:
البته اگر به فایل fakeMovieService.js مراجعه کنید، خاصیت liked در ساختار اشیاء فیلمها وجود ندارد که فعلا آنرا برای اولین شیء تعریف شده، اضافه میکنیم:
پس از این تغییرات، اکنون خروجی برنامه در مرورگر به صورت زیر تغییر کرده که اولین آیتم آن بر اساس مقدار تنظیم شدهی فوق، با آیکن قلب توپر نمایش داده شدهاست:
افزودن رخداد کلیک به کامپوننت Like
برای اینکه کامپوننت Like، رویداد کلیک بر روی آیکن قلب را به والد خود گزارش دهد، ابتدا ویژگی جدید onClick را بر روی تعریف المان آن در کامپوننت movies اضافه میکنیم:
که به متد handleLike در همان کامپوننت متصل خواهد شد:
سپس در کامپوننت Like، این ویژگی onClick را از طریق خاصیت props دریافت کرده و به رویداد onClick المان نمایش آیکن، متصل میکنیم:
اینبار اگر بر روی المان نمایش آیکن کلیک شود، سبب فراخوانی متد handleLike والد متصل به آن خواهد شد.
در اینجا همچنین style این المان نیز جهت نمایش cursor با آیکن pointer، توسط یک شیء از نوع inline style تنظیم شدهاست.
یک نکته: کامپوننت Like تا اینجا یک controlled component است؛ دارای state نیست و همچنین تمام اطلاعات خودش را از طریق props تامین میکند و تنها دارای یک متد render است. بنابراین اگر علاقمند بودید میتوان این کامپوننت را به یک «Stateless Functional Component» که در قسمت 8 معرفی شد نیز تبدیل کرد.
تغییر حالت کامپوننت Like جهت نمایش تغییرات
تا اینجا کامپوننت Like ما میتواند ورودی true/false را به آیکنهای متناظری تبدیل کند. همچنین اگر بر روی این آیکن کلیک شود، آنرا توسط رخدادی به والد خود اطلاع رسانی میکند. اکنون میخواهیم با تکمیل متد handleLike، خاصیت like اشیاء انتخابی (آیکنهایی که بر روی آنها کلیک شدهاند) را از true به false و برعکس تبدیل کرده و سپس UI را نیز به روز رسانی کنیم:
با یک چنین مثالی که در آن cloning اشیاء و آرایهها صورت میگیرد، پیشتر آشنا شدهاید. هدف از cloning، قطع ارتباط شیء، یا آرایهی ایجاد شده، از شیء، یا آرایهی اصلی است تا با اعمال تغییرات بر روی شیء clone شده، تغییری در شیء اصلی صورت نگیرد؛ چون در React مجاز به تغییر مستقیم اشیاء state نیستیم.
پس از این تغییرات اگر برنامه را اجرا کنیم، با کلیک بر روی هر آیکن، عکس آن آیکن نمایش داده میشود؛ برای مثال آیکن قلب توپر، تبدیل به آیکن قلب توخالی خواهد شد.
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: sample-10.zip
بررسی ساختار کامپوننت Like
در پوشهی components، ابتدا پوشهی جدید common را ایجاد میکنید. در اینجا تمام کامپوننتهای عمومی برنامه را که منحصر به دومین آن برنامه نیستند، قرار میدهیم. کامپوننتهایی را که اگر آنها را به برنامههای دیگری نیز کپی کردیم، بدون هیچ مشکلی قابلیت استفادهی مجدد را داشته باشند و متصل به سرویسها و زیرساخت برنامهی جاری نباشند. سپس در پوشهی common، فایل جدید src\components\common\like.jsx را ایجاد میکنیم و داخل آن توسط میانبرهای imrc و cc در VSCode، ساختار ابتدایی کامپوننت Like را ایجاد میکنیم.
ساختار کلی این کامپوننت به صورت زیر است:
- ورودی این کامپوننت به این صورت است که در آن مشخص شده آیا یک فیلم، مورد علاقه واقع شده یا خیر؛ مانند خاصیت liked که یک boolean است. اگر true باشد، یک آیکن قلب توپر را نمایش میدهد و برعکس.
- خروجی این کامپوننت نیز به صورت یک رخداد است. هر زمانیکه بر روی آیکن قلب آن کلیک میشود، این کامپوننت یک رخداد onClick را سبب خواهد شد. اکنون هر کامپوننت دیگری که در حال استفادهی از آن است، مطلع شده و خاصیت liked شیء مرتبط را تغییر میدهد.
بنابراین این کامپوننت اطلاعی از ساختار یک شیء movie ندارد. تنها یک DOM کامپوننت ساده است که کارش نمایش یک آیکن قلب توپر یا خالی میباشد و اگر بر روی این آیکن قلب کلیک شد، به والد خود اطلاع رسانی میکند.
فعلا ساختار ابتدایی آنرا به رندر یک قلب خالی که توسط قلم آیکنهای font-awesome تامین میشود، تنظیم میکنیم:
import React, { Component } from "react"; class Like extends Component { render() { return <i className="fa fa-heart-o" aria-hidden="true"></i>; } } export default Like;
نمایش ابتدایی کامپوننت Like در جدول لیست فیلمها
فعلا مهم نیست که این کامپوننت کار خاصی را انجام نمیدهد. فقط قصد داریم آنرا در UI برنامه نمایش دهیم. به همین جهت ابتدا یک ستون جدید را مخصوص آن، در جدول فعلی نمایش لیست فیلمها، ایجاد کرده و المان آنرا درج میکنیم. برای این منظور به فایل movies.jsx مراجعه کرده و ابتدا این کامپوننت را import میکنیم:
import Like from "./common/like";
سپس در سرستونهای جدول، یک th جدید را تعریف میکنیم تا ستونی برای درج آن ایجاد شود. همچنین در قسمت بدنهی جدول، پیش از دکمهی حذف، یک td مخصوص درج المان </Like> را اضافه میکنیم:
تا اینجا ستون جدید Like را مشاهده میکنید که کار رندر کامپوننتهای Like در آن انجام شدهاست.
واکنش نشان دادن به ورودیها، در کامپوننت Like
در ادامه باید این کامپوننت بر اساس مقدار Boolean ای که از والد خود دریافت میکند، یک آیکن قلب توپر و یا خالی را نمایش دهد. برای این منظور فعلا در کامپوننت movies، جائیکه المان کامپوننت Like درج شدهاست، ویژگی جدید liked را به مقدار ثابت true تنظیم میکنیم </Like liked={true}> تا بتوان قسمت props این کامپوننت را تکمیل کرد.
در کامپوننت Like، تفاوت بین آیکن قلب توپر و خالی در یک o- در انتهای کلاسهای font-awesome است:
import React, { Component } from "react"; class Like extends Component { render() { let classes = "fa fa-heart"; if (!this.props.liked) { classes += "-o"; } return <i className={classes} aria-hidden="true"></i>; } } export default Like;
پس از این تغییرات اگر برنامه را ذخیره کرده و مجددا در مرورگر بارگذاری کنیم، با توجه به تنظیم liked={true} در کامپوننت movies، ستون like آن با آیکنهای قلب توپر نمایش داده میشود که بیانگر واکنش نشان دادن صحیح به ورودیها در کامپوننت Like است:
پویا سازی مقدار پیشفرض ویژگی liked در کامپوننت movies
برای پویاسازی نمایش مقدار liked در کامپوننت movies، از آنجائیکه هر ردیف بیانگر یک شیء movie است، میتوان به این صورت عمل کرد:
<Like liked={movie.liked} />
const movies = [ { _id: "5b21ca3eeb7f6fbccd471815", title: "Terminator", genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" }, numberInStock: 6, dailyRentalRate: 2.5, publishDate: "2018-01-03T19:04:28.809Z", liked: true },
افزودن رخداد کلیک به کامپوننت Like
برای اینکه کامپوننت Like، رویداد کلیک بر روی آیکن قلب را به والد خود گزارش دهد، ابتدا ویژگی جدید onClick را بر روی تعریف المان آن در کامپوننت movies اضافه میکنیم:
<Like liked={movie.liked} onClick={() => this.handleLike(movie)} />
handleLike = movie => { console.log("handleLike", movie); };
return ( <i className={classes} onClick={this.props.onClick} aria-hidden="true" style={{ cursor: "pointer" }} ></i> );
در اینجا همچنین style این المان نیز جهت نمایش cursor با آیکن pointer، توسط یک شیء از نوع inline style تنظیم شدهاست.
یک نکته: کامپوننت Like تا اینجا یک controlled component است؛ دارای state نیست و همچنین تمام اطلاعات خودش را از طریق props تامین میکند و تنها دارای یک متد render است. بنابراین اگر علاقمند بودید میتوان این کامپوننت را به یک «Stateless Functional Component» که در قسمت 8 معرفی شد نیز تبدیل کرد.
تغییر حالت کامپوننت Like جهت نمایش تغییرات
تا اینجا کامپوننت Like ما میتواند ورودی true/false را به آیکنهای متناظری تبدیل کند. همچنین اگر بر روی این آیکن کلیک شود، آنرا توسط رخدادی به والد خود اطلاع رسانی میکند. اکنون میخواهیم با تکمیل متد handleLike، خاصیت like اشیاء انتخابی (آیکنهایی که بر روی آنها کلیک شدهاند) را از true به false و برعکس تبدیل کرده و سپس UI را نیز به روز رسانی کنیم:
handleLike = movie => { console.log("handleLike", movie); const movies = [...this.state.movies]; // cloning an array const index = movies.indexOf(movie); movies[index] = { ...movies[index] }; // cloning an object movies[index].liked = !movies[index].liked; this.setState({ movies }); };
پس از این تغییرات اگر برنامه را اجرا کنیم، با کلیک بر روی هر آیکن، عکس آن آیکن نمایش داده میشود؛ برای مثال آیکن قلب توپر، تبدیل به آیکن قلب توخالی خواهد شد.
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: sample-10.zip