سلام عزیزان ، امیدوارم حالتون خوب باشه و سخت مشغول پیشرفت و یادگیری باشین . من قرار هست با چند مقاله ی چند پارتی در رابطه با کل مقدمات React در خدمتتون باشم و سعیم بر اینه که بطرز کاملا روون و جامع مقدمات React رو پوشش بدم تا هم برای کسایی که در حال حاضر React بلد نیستن ولی قصد دارن که در آینده یادش بگیرن مفید باشه ، هم برای کسایی که React رو بلدن ولی بازم میخوان زیر و بم مقدماتش رو یه مرور اساسی کنن مفید باشه . خوب ما هم مثل خیلی از منابع با مقدمه چینی شروع میکنیم :) .
ری اکت (React) یک کتابخونه open-source جاوااسکریپتی هست که به منظور ایجاد رابط کاربری (UI) وب اپلیکیشن ها بخصوص وب اپلیکیشن های SPA مورد استفاده قرار میگیره . در واقع ما برای مدیریت لایه View برنامه هامون از React استفاده میکنیم . React در ابتدا توسط یکی از مهندسین ارشد فیسبوک یعنی Jordan Walke ایجاد شد و برای اولین بار در سال 2011 توسط خود فیسبوک مورد استفاده قرار گرفت و بعد در سال 2012 در اینستاگرام استفاده شد . یکی از نکات مهمی که در رابطه با پشتیبانی و بروز رسانی های React وجود داره ، این هست که خود تیم توسعه دهنده React ، تمام بهبود‌ها و ویژگی های جدیدی که قرار هست برای React معرفی بشه رو به خوبی روی خود Facebook تست میکنن و این کار باعث میشه که اعتماد بیشتری نسبت به بروزرسانی ها و مواردی از این قبیل کسب کنیم .
حالا بیایم نگاهی هم به ویژگی های مهم React بندازیم و ببینیم که چه فیچرهایی رو در اختیار ما قرار میده :
ری اکت با استفاده از ساختارin-memory با کش کردن رخداد های قابل پیشبینی ، سیستم Virtual DOM رو ایجاد کرده تا مرورگر با استفاده از این قابلیت بتونه در صورت تغییر اطلاعات ، DOM رو به روز رسانی کنه . اما یعنی چی ؟ React بر خلاف اکثر کتابخونه های قدیمی جاوااسکریپت ، بطور مستقیم با Dom مرورگر کار نمیکنه ، بلکه از یک Virtual DOM یا اصطلاحا DOM مجازی استفاده میکنه . Virtual DOM شامل دستوراتی هست که مربوط میشه به خود React و کاری که انجام میده این هست که انگار یک کپی از یک قسمت خاص از DOM رو در خودش نگهداری میکنه و بعد از پردازش کردن ، نتیجه رو به DOM اصلی میفرسته ، یعنی Process ها هر بار روی DOM اصلی اجرا نمیشن ، بلکه یک DOM مجازی داریم که Process ها روی اون اجرا میشن و نتیجه ی نهایی به DOM اصلی ارسال میشه و به همین دلیل هست که سرعت اجرای برنامه ی ما افزایش پیدا میکنه .
ری اکت این امکان رو در اختیار ما قرار میده تا بتونیم کامپوننت هایی با قابلیت استفاده مجدد ایجاد کنیم . خوب این یعنی چی ؟ مثلا اگر فرض کنیم که از یک کامپوننت در سه جای مختلف استفاده کردیم ، دیگه نیازی نیست که مثل گذشته برای تغییر این سه کامپوننت هر کدوم رو بصورت جدا جدا بروزر رسانی کنیم ، بلکه ما فقط یکبار کامپوننت اصلی رو تعریف میکنیم و در جاهای مختلف بسته به نیازمون ازش استفاده میکنیم ، حالا اگر زمانی نیاز به بروزر رسانی این سه کامپوننت داشته باشیم ، فقط خود کامپوننت اصلی رو آپدیت میکنیم !
در React به جای استفاده از جاوااسکریپت معمولی ، میتونیم برای templating از JSX استفاده کنیم که یک فرمت نوین جاوااسکریپتی برای ایجاد DOM های HTML در قالب یک کامپوننت هست که نهایتا هنگام کامپایل توسط Babel به کدهای جاوااسکریپت معمولی تبدیل میشه تا برای مرورگرهای مختلف قابل فهم باشه . نگران نباشید ، تو بخش های بعدی شمارو به خوبی با JSX آشنا میکنم .
ری اکت نیتیو (React Native) یک فریمورک جاوااسکریپتی هست که برای توسعه اپلیکیشن های موبایل بصورت Native برای دو سیستم عامل Android و ios مورد استفاده قرار میگیره و در سال 2015 معرفی شد . این فریمورک بر پایه جاوااسکریپت و کتابخانه React هست ، یعنی ما با تسلط بر React میتونیم تو یادگیری React Native نسبت به بقیه خیلی جلوتر باشیم .
درک کردن React ساده هست . مواردی مثل رویکرد مبتنی بر کامپوننت ها ، lifecycle هایی که به بهترین نحو تعریف شدن و استفاده از جاوااسکریپت و موارد دیگه ، React رو برای یادگیری و ساخت وب اپلیکیشن های حرفه ای آسون تر میکنه . همونطور که در بالاتر هم گفتم ما برای توسعه اپلیکیشن React از JSX استفاده میکنیم که اجازه میده (HTML)XML و جاوااسکریپت رو باهم ترکیب کنیم . البته ضروری نیست که برای templating حتما از JSX استفاده کنیم ، چراکه از خود جاوااسکریپت هم میتونیم برای اینکار استفاده کنیم ولی اگر با JSX و سادگی اون آشنا باشید ، هیچوقت نمیاین برای templating از خود جاوااسکریپت استفاده کنین . اگر یکم صبور باشین قول میدم این موضوع رو مثل هلو براتون اثبات کنم :) .
امروزه کتابخانه React از نظر کارایی بهتر از فریمورک های موجود عمل کرده و یکی از مزیت های اصلیش این هست که سرعت اپلیکیشن ما رو بیشتر میکنه . معمولاً ما زمانی با مشکل سرعت و یا در مجموع با مشکل پرفورمنس برنامه مواجه میشیم که پارامترهای گرافیکی که روی قسمت view برنامه مون داریم ، یکم پیچیده و زیاد باشن . برای درک بهتر این موضوع فرض کنیم یک رابط کاربری به این شکل داریم :
هنگامی که ما از React استفاده میکنیم ، میتونیم رابط کاربری مون رو مطابق شکل زیر به یکسری از قسمت های جدا از هم تقسیم کنیم :
بخش Navbar Menu که شامل منوها هست ، بخش Product که اطلاعات مربوط به یک محصول رو در داخل خودش نگهداری میکنه و بخش Cart که مربوط به سبد خرید هست ! توی React به هر کدوم از اینها ، کامپوننت گفته میشه و همشون در کنار هم ، در داخل یک کامپوننت اصلی به نام App قرار میگیرن . پس اولین قدم React این هست که میاد تمام قسمت های مختلف برنامه ی مارو از هم جدا میکنه تا هر کدوم از اون ها به شکل مجزا و جدا از هم قابل توسعه باشن ! حالا اگر هر کدوم از این کامپوننت ها تغییری کنه ، کل DOM اصلی مجددا رندر نمیشه ، چون همونطور که گفته شد React یک DOM مجازی داره که Process ها روی اون انجام میشن و سپس نتیجه ی نهایی به DOM اصلی ارسال میشه . پس هنگامی که تغییری روی کامپوننتی یا Data ای صورت میگیره ، ما میتونیم بدون عمل reload شدن صفحه مرورگر ، شاهد تغییرات باشیم .
در تصویر زیر عناوینی رو میبینیم که دارن از React استفاده میکنن :
حالا سوالی که ممکنه پیش بیاد این هست که چرا باید یک نفر از ReactJs استفاده کنه ؟ در دنیای front-end که هر روز تغییرات گسترده ای داره ، ممکنه سخت باشه که زمانی رو به یاد گرفتن فریمورک ها و کتابخانه های جدید اختصاص بدیم ، بخصوص ابزارهایی که عمر کوتاهی دارن و نمیتونیم روی زمان ریسک کنیم . بنابراین اگر شما هم به دنبال یک تکنولوژی ای هستید که جزء بهترین های حوزه خودش باشه و ارزش ریسک رو داشته باشه ، پیشنهاد من صددرصد React هست ، چون علاوه بر تمام نکاتی که تااینجا خدمتتون گفتم ، React کامیونیتی خیلی بزرگی داره ، یعنی به عنوان مثال اگر برای اولین بار با یک مشکل خاصی مواجه بشین ، به راحتی میتونین با یک سرچ ساده به جواب برسین و مشکلتون رو حل کنین .
البته توجه کنید که برای استفاده از React حتما باید دانش CSS , HTML و جاوااسکریپت داشته باشید و بهترین گزینه این هست که قبل از یادگیری مفاهیم ری اکت ، ES5 و ES6 رو حتما مطالعه کنید تا راحت تر بتونید با React کار کنید تا اگر مثلا فلان جا سینتکس Object Destructuring یا Spread Operator یا امثالهم رو دیدین بدونین که چه اتفاقی داره میفته .
خوب رفقا مقدمه چینیمون تموم شد و امیدوارم لذت برده باشین . در اخر اگر که نظر یا انتقادی داشتین ، خوشحال میشم در قسمت کامنت ها به اشتراک بزارین . راستی بخش بعدی رو به هیچ عنوان از دست ندید ، چراکه قرار هست با نحوه ی راه اندازی محیط توسعه React با create-react-app آشنا بشیم ! پس اونجا میبینمتون :)
