به روز رسانی کد های دوره آموزشی لیندا React.js: Building an Interface

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

گام 1: دانلود کورس آموزشی React.js: Building an Interface

این دوره آموزشی را میتوانید از سایت های مختلف ایرانی بصورت رایگان دانلود کنید. کافیست در گوگل سرچ کنید و به همان لینک های معرفی شده بروید. سایت git.ir هم این دوره را در اختیار شما قرار میدهد. این کورس توسط Ray Villalobos تدریس شده است که یکی از بهترین مدرسان برنامه نویسی است.

گام 2: دانلود فایل های تمرینی این دوره

اگر پس از دانلود به فایل های تمرینی دسترسی نداشتید عیبی ندارد، میتوانید از گیتهاب دانلود کنید. میتوانید بصورت فایل zip دانلود کرده و پس از اکسترکت کردن از ان استفاده کنید.

اما نکته جالب این است که این دوره های رایگان آموزشی که برای ما از سایت های ایرانی قابل دانلود هستند معمولا قدیمی هستند و مدرس از ورژن قدیمی Gulp استفاده کرده که از syntax و قاعده دستوری متفاوتی با ورژن کنونی آن است.

بنابراین من ریپوسیتوری خودم را که به روز رسانی شده در اختیارتان قرار میدهم تا از ان استفاده کنید. میتوانید هر دو ریپوسیتوری را دانلود کنید و کد ها را مقایسه کنید تا متوجه تغییرات بشوید.

گام 3: نصب Gulp

برای ران کردن پروژه کافیست از کامند gulp استفاده کنید. همانطور که مستحضر هستید، gulp مانند grunt یک task runner است که به ما در اینجا کمک میکند تا سرور راه اندازی کنیم و ری اکت را باندل کنیم و خلاصه اینکه همه کارهایمان را در یک ترمینال با یک کامند gulp انجام بدیم. در غیر اینصورت مجبور بودیم کارهای بیشتری انجام بدیم.

قدم اول: نصب گلوبال gulp

ابتدا gulp را بصورت گلوبال نصب کنید! کافیست یکی از دو کامند زیر را اجرا کنید.

yarn global add gulp
or
npm install -g gulp

قدم دوم: نصب لوکال gulp

حالا با کامند زیر این کار را بصورت لوکال هم انجام دهید

yarn add gulp
or
npm install gulp

گام 4: نصب پکیج های مورد نیاز

به ترمینال بروید و مانند هر ریپوسیتوری که در ابتدا از npm install استفاده میکنید اینجا هم از همین دستور برای نصب پکیج ها و لایبرری های نصب شده در پروژه استفاده کنید.

گام 5: ترمینال gulp

به ترمینال بروید و کامند gulp را بزنید تا بصورت اتوماتیک بروزر شما باز شود و سرور راه اندازی شود. همچنین با هر تغییری که در کد خود میدهید بصورت اتوماتیک صفحه بروزر رفرش میشود و نیازی نیست که شما این کار را انجام دهید.

تشریح کد های فایل gulpfile.js

این فایل در واقع تنظیمات gulp را انجام میدهد. همیشه برای راه اندازی gulp باید به سایت رسمی آن بروید تا از قاعده نوشتاری ورژن های جدید با خبر شوید.

اگر به فایل gulpfile.js نگاه کنید متوجه وجود پنج تابع به نام های jsFn, htmlFn, cssFn, watchFn, serverFn میشوید که وسط صفحه هستند. قسمت بالای صفحه پکیج ها فراخوانی شدند و قسمت پایین صفحه هم این پنج تابع نام برده شده اجرا شدند. وظیفه هر تابع از نام آن پیداست.

تابع jsFn برای کامپایل کردن کدهای React به کار میرود.

تابع cssFn و htmlFn کار خاصی انجام نمیدهند فقط در تابع watchFn فراخوانی شدند تا هنگام تغییر کد های درونشان توسط ما در لحظه ای که ویرایش میکنیم، reload شوند و سرور دوباره راه اندازی شود تا تغییراتی که ما اعمال کردیم ظاهر شود.

تابع serverFn برای راه اندازی سرور است و همانطور که در تنظیماتش میبینید بروزر را open میکند.

تشریح فولدر process

 فایل index.js فایل اصلی React است. چرا که render در آن قرار دارد.

فایل app.js در فولدر components با 160 لاین بزرگترین فایل این پروژه است. علت زیاد شدن تعداد خط های آن کدهایی است که برای انتقال داده های استفاده میشوند. در این فایل یک کلاس به نام App تعریف شده است (معمولا کمپوننت مادر را به این نام نامگذاری میکنند) . این کلاس که با متد createReactClass تعریف شده و شامل متد های متنوع است نقل و انتقال داده ها بین کمپوننت های بچه خود را مدیریت میکند.

بچه کمپوننت ها Add, List, Sort

بچه کمپوننت ها سه تا هستند به نام های Add, List, Sort که از نامشان مشخص است چه کار میکنند. کمپوننت List برای نمایش لیستی از داده ها به کار میرود. کمپوننت Add برای افزودن داده جدید به لیست داده ها به کار میرود. کمپوننت Sort هم برای سرچ کردن و یا فیلتر کردن داده ها و به ترتیب های خاص نمایش دادن به کار میرود.

ارتباط بین بچه کمپوننت ها

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

متد app_del برای حذف کردن یک داده از لیست به کار میرود.

متد app_add برای افزودن یک داده جدید به لیست به کار میرود.

متد app_sort برای تغییر ترتیب نمایش داده ها در لیست به کار میرود.

متد app_blur برای ویرایش داده های لیست به کار میرود.

متد app_keyup برای سرچ کردن بین داده های لیست به کار میرود.

بقیه متد ها چه کار میکنند؟

متد getInitialState وظیفه دارد تا state را تعیین کند.

متد های lifecycle

متد componentDidMount وظیفه دارد تابعی را به راه اندازد. این تابع راه اندازی شده داده های اولیه را از خارج میگیرد.

متد componentWillUnmount وظیفه دارد تا همان تابع راه اندازی شده را از کار بیندازد.

اطلاعات بیشتر

برای اینکه اطلاعات بیشتری درباره state و lifecycle پیدا کنید به سایت reactjs.org بروید. برای انجام پروژه های بزرگ از Redux استفاده میکنند. ریداکس کمک میکند تا مدیریت داده ها خیلی آسان تر انجام شود نسبت به الان که از state برای مدیریت داده ها استفاده میکنیم.