ری اکت چیست؟ پیش نیاز ها و منابع یادگیری

اگر در حوزه طراحی وب مشغول به کار باشید حتما نام ری اکت (React) را شنیده اید. به خصوص افرادی که در زمینه برنامه نویسی فرانت اند فعالیت دارند، به احتمال زیاد این سوالات برایشان پیش آمده است که: ری اکت چیست؟ چرا سایت های معروف از این تکنولوژی استفاده می کنند؟ در مقاله React و React Native چه قابلیت ها و مزیت هایی دارند به صورت مختصر با قابلیت ها و امکانات ری اکت آشنا شده ایم. در این مقاله از تیک4 قصد داریم جزئی تر به این کتابخانه محبوب نگاه کنیم و پیش نیاز ها و منابع یادگیری اصولی آن را بررسی می کنیم.

ری اکت چطور کار می کند؟

کتابخانه ری اکت با دام مجازی یا همان (Virtual Dom) کار می کند. همان طور که می دانید مرورگر با المنت های Html وب سایت شما به طور ساختار درختی برخورد می کند. ممکن است برایتان سوال باشد که منظور از ساختار درختی چیست؟!

کد های زیر را در نظر بگیرید:

<div>
<nav>
<img />
<div></div>
</nav>
</div>

پس از اینکه کد های بالا را در سند HTML خود می نویسید و آن ها را در مرورگر اجرا می کنید، مرورگر کد های شما را مطابق یک ساختار درختی که به آن Dom Tree (درخت دام) می گویند، در کنار هم می چیند و در نهایت برای کد های بالا ساختار زیر را در نظر می گیرد.

ساختار درختی ما از بالا شروع می شود و فرزندهای هر المنت را به خودش وصل می کند. وقتی با جاوا اسکریپت یک پروژه ای را می نویسید و قسمتی از سند HTML را با استفاده از js تغییر می دهید، در واقع Dom را تغییر داده اید. به عنوان مثال اگر بخواهید تگ img را تغییر دهید، دیگر ثسمت های دام که به این تگ متصل هستند نیز تغییر می کند و  به اصطلاح آپدیت می شود.

اگر منطقی به قضیه نگاه کنیم، می فهمیم که برای تغییر قسمت کوچکی از سایت نیازی به تغییر کل صفحه یا همان DOM نیست. شاید این تغییر در سایت های کوچک احساس نشود ولی برای پروزه های بزرگ هر بار بارگیری کل دام، زمان زیادی از کاربر را می گیرد. زبان برنامه نویسی react توانسته است این مشکل را حل کند.

کتابخانه React به جای این که با دام واقعی (Real Dom) کار کند، یک دام مجازی (Virtual Dom) در نظر می گیرد. حال برای ایجاد تغییرات، ابتدا Virtual Dom را تغییر می دهد و پس از مقایسه با Real Dom همان قسمتی که تغییرات داشته را بر روی دام اصلی آپدیت می کند. با استفاده از این مفهوم سرعت سایت ها به شدت بالا می رود و در نتیجه کاربر تجربه بهتری را در کار کردن با سایت مورد نظر دارد.

پیش نیاز های React چیست؟

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

اما از آن جایی که بعد ها جاوا اسکریپت آپدیت شد و ورژن های 6 الی 11 را هم ارائه داد و در هر ورژن قابلیت ها و امکانات جدیدی به جاوا اسکریپت اضافه کرد، برای شروع ری اکت علاوه بر جاوا اسکریپت 5 باید حداقل با نسخه 6 (Es6) کار کرده باشید. حالا ممکن هست برایتان سوال پیش بیاید که چه اندازه باید جاوا اسکریپت بلد باشیم تا بتوانیم کار با فریمورک ری اکت را شروع کنیم.

برای شروع ری اکت چقدر باید جاوا اسکریپت (JS) بلد باشیم؟

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

شما برای شروع ری اکت باید به اندازه ای جاوا اسکریپت بلد باشید که تمام پروژه هایی را که می خواهید با ری اکت بنویسید، بتوانید با خود جاوا اسکریپت هم پیاده سازی کنید.

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

اما جواب دیگری که میتوان به اینن سوال داد را با یک مثال برای شما بیان میکنم. فرض کنید دقیقا همین سوال را برای حوزه های دیگر مانند رانندگی، قنادی، آشپزی بپرسیم. به عنوان مثال  در جواب به این سوال که “برای تبدیل شدن به یک آشپز حرفه ای چه دستور پخت هایی را باید یاد بگیریم؟” ، هیچ جواب منطقی وجود ندارد. مشخص است که هر چقدر تجربه بیشتری در زمینه آشپزی داشته باشیم و ابزار های متعددی در اختیارمان قرار بگیرد، به همان اندازه آشپز حرفه ای تری خواهیم بود.

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

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

تایپ اسکریپت چی؟ باید بلد باشیم؟

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

یکی از تفاوت های این زبان با جاوا اسکریپت این است که، شما میتوانید برای متغیر های خود Type (نوع متغیر) را تعریف کنید. همچنین می توانید برای ورودی توابع خود نیز نوع متغیر را تعیین کنید. برای شروع یادگیری React نیازی به آموزش این زبان نیست و شاید بهتر است بگوییم که تایپ اسکریپت در پروژه های بزرگ مورد استفاده قرار می گیرد. پیشنهاد ما به شما این است که یادگیری این زبان را در آینده و هنگامی که وارد پروژه های بزرگ شدید، شروع کنید.

Component Based بودن کتابخانه React

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

Component Based بودن زبان برنامه نویسی react به شما کمک میکند تا بخش های کوچکی از سایت خود را همانند هدر، فوتر، باکس محصول، نوبار و …. به صورت جداگانه طراحی کنید. این کار باعث می شود که کد نویسی شما قابل فهم تر باشد. تست آن ها راحت تر شود و همچنین قابلیت استفاده مجدد آن ها را نیز داشته باشیم.

همان طور که می دانیند هدر و فوتر در همه صفحه های یک وب سایت یکی هستند و تغییری ندارند. با فرض اینکه وب سایت ما 10 صفحه دارد و هدر و فوتر در تمامی این صفحات تکرار می شوند. به جای تکرار کد های این دو بخش در این 10 صفحه، هدر و فوتر را به کامپوننت های Header.js و Footer.js تبدیل می کنیم. از این به بعد هر موقع نیاز به این کامپوننت داشته باشیم فقط کافیست اسم آن ها را با استفاده از سینتکس های خود ری اکت در پروژه خود اضافه کنیم.

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

کتابخانه ری اکت و سینتکس JSX

استفاده از سینتکس JSX در ری اکت یعنی چه؟ اصلا سینتکس JSX چیست؟ کتابخانه زبان برنامه نویسی react از سینتکسی به اسم JSX (Java Script XML) استفاده می کند. برای این که نحوه نوشتن این سینتکس را یاد بگیرید باید با مفهوم XML آشنا باشید.

در بیان ساده و خلاصه، XML همان HTML است. اما شما در HTML مجاز به استفاده از تگ های از پیش تعیین شده هستید و نمی توانید از تگ هایی با اسم دلخواه استفاده کنید. به عنوان مثال شما مجاز به استفاده از <header> هستید اما نمیتوانید از تگ <Tik4> استفاده کنید. اما شما در XML می توانید تگ هایی با اسامی دلخواه را ایجاد کرده و از آنها استفاده کنید. داخل ری اکت هم شما می توانید قسمت های مختلف وب سایتتان را با اسم های دلخواه ایجاد کرده و استفاده کنید.

اکنون که دانستیم منظور از xml در تعریف ری اکت یعنی چه، به معنای jsx بپردازیم. به طور کلی Jsx یعنی این که ما داخل صفحات جاوا اسکریپت کد هایی در قالب Html و Xml بنویسیم. به همین دلیل در پروژه هایی که با فریمورک ری اکت توسعه داده می شوند هیچ خبری از فایل Html نیست و تمام کد های Html توسط فایل های جاوا اسکریپت Render میشوند.

ری اکت برای برنامه نویسی اپلیکیشن های موبایل

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

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

بهترین منبع برای یادگیری ری اکت

به صورت قطعی می توان گفت که بهترین و کامل ترین منبع برای یادگیری هر زبان برنامه نویسی ویا حتی فریمورک ها و کتابخانه های مربوطه، داکیومنت آن تکنولوژی می باشد. برای ری اکت هم بهترین منبع یادگیری داکیومنت ریکت به آدرس reactjs.org می باشد.

زبان اصلی این داکیومنت انگلیسی می باشد. البته که ترجمه رباتی هم در اختیار شما قرار دارد، اما اگر به زبان انگلیسی تسلط دارید بهتر است سراغ ترجمه آن نروید! آن دسته از افرادی که بیشتر یه یادگیری از طریق ویدئو تمایل دارند، می توانند ویدئو های یوتیوب را با زیرنویس فارسی تماشا کنند.

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

سخن پایانی

در این مقاله سعی کردیم به صورت جزئی تر به کتابخانه محبوب ری اکت نگاه کنیم. همانطور که بیان شد شما برای یادگیری و ورود به این حوزه باید جاوا اسکریپت را به صورت کامل یاد داشته باشید و چندین پروژه قابل قبول را اجرا کرده باشید. اگر تجربه کار با این فریمورک را دارید، می توانید در قسمت دیدگاه ها با دیگر کاربران به اشتراک بگذارید. از این که تا انتهای این مطلب همراه تیک4 بودید سپاسگذاریم.