ری اکت چیست و چه کاربرد هایی دارد؟ + 5 دلیل استفاده از ری اکت

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

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

2 – یا اینکه طرح قطعات و قالب های طراحی شده خودش رو به یک شرکت دانش بنیان و قطعه ساز ارائه بده که خودش متخصص این کار هست و قبلا هزاران نوع قطعه آماده تولید کرده. در این صورت مهندس ما هم خیلی راحت تمام قطعات موردنیاز خودش رو تحویل می‌گیره تا ماشین جدید خودش رو بسازه. چیزی شبیه به تولید ماشینی مثل لامبورگینی!

این ساده ترین جواب مقدماتی برای درک جواب سوال ری اکت چیست؟ می تونه باشه!

ری اکت (React) مثل همون شرکت دانش بنیانی هست که دستیار شما میشه تا راحت تر چیزی که در ذهنتون هست رو در رابط کاربری سایت (UI) پیاده سازی کنید بدون اینکه بخواید از صفر کدنویسی انجام بدید. بعد هم با ایجاد بخش های مختلف و متصل کردن اونها به همدیگه، صفحات وب جذاب و کامل بسازید.

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

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

حالا ببینیم در ادامه این مقاله قراره از کجا به کجا برسیم ؟!

• یا ری اکت چیست؟ و چگونه کار می کند؟
• ویژگی ها و مزایای ری اکت چیست؟
• پیش نیازها و ابزارهای مورد نیاز برای یادگیری ری اکت
• مسیر حرفه ای تر شدن در طراحی رابط کاربری با ری اکت
• بازار کار برنامه نویسی فرانت اند با ری اکت

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

React یا ری اکت چیست؟ و چگونه کار می کند؟

اول ببینیم که حرف حساب کتاب ها و داکیومنت ها برای تعریف اون چیه؟!

” ری اکت یا React  یک کتابخانه جاوا اسکریپتی متن باز (Open Source) برای ساخت و توسعه رابط کاربری (UI) است که در سال 2011 توسط Facebook تولید و طی دو سال بعد توسعه و در اختیار عموم قرار گرفت. این تکنولوژی با استفاده از مفهوم کامپیوننت (component) به عنوان جزء و شیء با قابلیت استفاده مجدد، امکان طراحی صفحات پویا با واکنش سریع را فراهم کرده است.”

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

کتابخانه (Library) است یعنی :

مجموعه ای از کدهای از پیش آماده شده و قابل سفارشی سازی هست (به زبان جاوا اسکریپت) که می‌تونید هرکدوم از اونهارو برای هدف خاصی در پروژه به کار ببرید. بنابراین یادتون باشه ری‌اکت خودش یک زبان برنامه نویسی مستقل نیست!

جاوااسکریپت (JavaScript) است یعنی :

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

متن باز (Open Source) است یعنی :

کدهای اون به صورت عمومی و رایگان در اختیار همه قرار گرفته تا به طور مستمر توسط توسعه دهندگان (Developers)سراسر جهان اصلاح و توسعه پیدا کنه. مثل سیستم عامل لینوکس یا مرورگر فایرفاکس!

متخصص طراحی رابط کاربری (UI) است یعنی :

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

کامپیوننت (Component)  یعنی :

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

صفحات پویا (Dynamique) یعنی :

کلمه داینامیک یک مفهوم عمومی به معنی پویا و متغیر هست و در طراحی وب هم کاربرد داره. به این معنی که برای ایجاد تغییرات یا تعیین واکنش در هر بخش، نیازی به کدنویسی جداگونه نیست و می‌تونید با یک بار ایجاد زیرساخت، حالت های مختلفی برای هر بخش تعریف کنید و بدون نیاز به رفرش یا بارگذاری مجدد صفحه، اون هارو ببینید.

” حالا و با این 6 تعریف مطمئن میشیم که شما پیش زمینه لازم رو برای مطالعه ادامه مقاله بدست میارید چون هدف سبزلرن یادگیری اصولی و عمیق شماست نه اضافه کردن تعاریف خشک و پیچیده به انبار ذهن شما… ”

نحوه عملکرد و کاربرد ری اکت :

لوب اینکه بد نیست بدونید گاهی اوقات ممکنه نام ری اکت رو با پسوند JS به شکل React.js  یا ReactJS هم ببینید که علامت متعلق بودن به زبان جاوا اسکریپته. در واقع مخفف کلمات Java و Script . هرچند اسم رسمی اون همون React  هست.

React در اصل برای تولید برنامه‌های(سایت یا اپلیکیشن) تک صفحه‌ای استفاده میشه و تخصصش طراحی رابط کاربری (UI) هست. برنامه‌های SPA یا Single page applications  برنامه‌هایی هستن که وقتی در مرورگر باز می کنید احساس می کنید هیچوقت از یک صفحه به صفحه دیگه ای منتقل نمیشید و همیشه بر روی یک صفحه ثابت هست. در نتیجه حالت Loading  یا Refresh در بالای مرورگر رو فقط یه بار می بینید.

شاید فکر کنید با این تفاسیر صفحه ایجاد شده با ری اکت یک صفحه استاتیک و ثابت هست اما در عمل دقیقا خلاف این اتفاق میفته و یک صفحه پویا ساخته میشه که حتی امکان تغییر کل محتوای صفحه ، تبادل درخواست و پاسخ با سرور و نمایش اون ها و همینطور آپدیت کردن لیست هارو هم به ما میده اما با هیچکدوم از این اتفاقات صفحه رفرش نمیشه! جذاب نیست؟؟؟!

ویژگی ها و مزایای ری اکت چیست؟

در این بخش ویژگی ها و مزیت های فوق العاده ری اکت رو باهم بررسی میکنیم تا با همه جزئیات اون آشنا شده و بهتر درک کنید که چرا باید ری اکت را یاد بگیریم ؟

کامپوننت محور بودن React

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

مثلا اگر به یک بخش ثابت در کل صفحات سایت نیاز داریم (مثل هدر یا سایدبار)، بدون اینکه نیاز باشه برای هر صفحه کدنویسی مجزا انجام بدیم تا اون بخش در صفحه قرار بگیره ، فقط کافیه اون بلوک یا بخش خاص رو فراخوانی کنیم.

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

استفاده از Virtual DOM در ری اکت

یکی از ویژگی های جذاب ری اکت استفاده ازVirtual DOM هست که یک نسخه مجازی از  DOM واقعی محسوب میشه و در حافظه قرار می‌گیره. فکر می کنید دلیل استفاده از این ایده چی بوده؟!

استفاده از HTML برای به‌روزرسانی وب‌سایت‌های پویایی که به طور مستمر با کاربر در تعامل هستن ممکنه دردسرهایی ایجاد کنه چون با هر تغییر در صفحه، تمام صفحه نیاز به بارگذاری مجدد پیدا میکنه! برخلاف سایت های استاتیک که مثل یک تراکت دیجیتال هستن و نیازی به تغییر داده ندارن!

React با استفاده از DOM مجازی این مشکل رو حل کرده و امکان تغییر  Scalalbe(مقیاس پذیر) و سریع رو فراهم کرده. در اصل  DOM مجازی اساساً یک کپی از DOM اصلی هست و React این نسخه کپی رو در حافظه موقت نگهداری میکنه تا در صورت نیاز، فقط قسمت‌هایی از DOM اصلی که نیاز به تغییر دارن به‌روزرسانی بشن. همینه که نیازی به رفرش شدن صفحه با هر تغییر کوچیک نیست!

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

در واقع وقتی که وضعیت کامپوننت‌ها تغییر میکنه، React تغییرات رو اول در Virtual DOM خودش اعمال میکنه. بعد از اون تفاوت‌ها و تغییرات رو با DOM واقعی مقایسه و فقط بخش‌هایی که تغییر کردن رو در DOM اصلی به‌روزرسانی میکنه. این یعنی نهایت دقت و سرعت در اعمال تغییرات جزئی بدون آسیب رسیدن احتمالی به سایر بخش ها!

استفاده از JSX در ری اکت

افزونه JSX مخفف کلمات (Java Script XML) ترکیبی از کد جاوا اسکریپت و عناصر HTML هست که به شما اجازه میده به راحتی تگ های HTML رو از طریق ترکیب کردن با کدهای جاوا اسکریپت، به متغیرها و اشیاء مختلف تبدیل کنید. جالبه بدونید JSX در زمان اجرا، از خود جاوا اسکریپت سریعتر عمل میکنه.

بنابراین با JSX می‌تونید رابط کاربری(UI) رو به شکلی ساده و شبیه به HTML توصیف کنید و عناصری مثل تگ‌ها، ویژگی‌ها، رویدادها و متن رو در داخل کد جاوااسکریپت بنویسید. یعنی به جای استفاده از عناصر ثابت در HTML، می‌تونید از قابلیت‌های جاوااسکریپت مثل حلقه‌ها و شرط‌ها در JSX استفاده کنید که باعث میشه کدهای بهینه تر و داینامیک ایجاد بشه. ( به قول معروف قیمه هارو میریزید رو ماستا J )

خب برای استفاده از JSX، اول باید محیطی رو انتخاب کنیم که کدهای داخل JSX رو به کد جاوااسکریپت معمولی ترجمه کنه. برای این منظور، معمولاً از Babel استفاده میشه که یک کامپایلر جاوااسکریپت هست. این نرم‌افزار در واقع کد JSX شما رو به کد جاوااسکریپت معمولی تبدیل و بهینه میکنه تا در ری اکت قابل اجرا باشه ( کدهای HTML  رو زیر سیبیلی بعنوان جاوا اسکریپت رد میکنه)

JSX برای Attribute ها از روش نوشتاری کمل کیس (camelcase) استفاده می کنه. به عنوان مثال ،   class در JSX به className تبدیل میشه چون بعضی از اسامی Attribute ها مثل “class” کلمات اختصاصی تعریف شده در JavaScript هستن و نمیشه اینارو دوباره با همین اسم استفاده کرد.

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

جریان داده یک‌طرفه (one-way data flow)

در بعضی فریمورک ها مثل Angular، دسترسی به عناصر DOM و جریان داده‌ها بین برنامه و عناصر به صورت دو‌طرفه انجام میشه. حالا این یعنی چی؟!

برای مثال یک متغیر رو در یک برنامه در نظر بگیرید که به یک عنصر DOM مثل Input متصل شده. در حالت جریان داده‌های دوطرفه، هر تغییری که در متغیر انجام بشه، در مقدار input هم اعمال میشه و هر متنی در input تایپ بشه، به صورت مستقیم در متغیر میشینه!

حالا همین اتفاق رو برای کامپوننت ها در نظر بگیرید. در این صورت ممکنه خطایابی و نوشتن برنامه رو پیچیده تر کنه. برای همین در React جریان داده‌ها به صورت یک‌طرفه هست.

مثلاً فقط وقتی کاربر متنی رو در input تایپ میکنه، در متغیر برنامه آپدیت میشه و اگر تغییری در مقدار متغیر بدیم، input از اون خبردار نمیشه. یا اگر بخوایم از کامپوننت فرزند اطلاعاتی را برای کامپوننت والد ارسال کنیم کافیه از callback  یا فراخوانی استفاده کنیم. این کار باعث میشه که ارتباطات بین کامپوننت ها و عناصر DOM ساده‌تر و قابل فهم تر باشه و خطایابی راحت تر!

رابط کاربری Declarative اعلانی

برنامه نویسی اعلانی سبکی از برنامه نویسی هست که شمارو از درگیر شدن برای انجام قدم به قدم عملیات بی نیاز میکنه و فقط کافیه توصیف کنید که قصد دارید چه کاری انجام بشه؟

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

برای مثال زبان SQL یک زبان declarative هست. در دستورات این زبان جستجوی داده‌ها و فیلتر کردن اونها و خیلی از موارد سطح پایین دیگه به شکل توصیفی هست و برنامه نویس فقط داده‌ها و شروطی را که برای جستجو لازم هست رو مشخص میکنه. بعد خود برنامه با توجه به دستورات داده شده داده‌ها رو جستجو و واکشی میکنه. بنابراین در اینجا ما کاری به نحوه پیدا کردن داده ها نداریم فقط می‌گیم فلان داده رو به ترتیبی که تعیین کردیم برای ما واکشی کن!

توسعه پذیری و سرعت بالای React

سرعت عملکرد ری اکت در رندر کردن صفحات نسبت به فریم ورک ها و کتابخانه هایی مثل vue  و angular  به شکل چشمگیری بیشتره و اساسا با همین ویژگی هم معروف شده.

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

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

تست سریع و راحت برنامه  در React (Unit Testing )

تست برنامه (unit testing) در توسعه نرم‌افزارهای React اهمیت بالایی داره چون تا وقتی مرحله به مرحله کدها آزمایش نشن نمی‌تونید روی کارایی اون حساب باز کنید. هرچقدر تست ها سطحی تر و با فاصله بیشتری انجام بشن، کار برای شما سخت تر میشه چون با خطاهای بیشتر و عمیق تری مواجه میشید.

خوشبختانه در ری اکت با استفاده از ابزارها و روش‌های تست مانند Jest و Enzyme، می‌تونید کامپوننت‌ها، توابع و منطق کدهاتون رو در React تست کنید و مطمئن بشید که کد شما به درستی عمل میکنه و تغییرات بعدی اون، تاثیرات ناخواسته ای روی کل برنامه ایجاد نمیکنه!

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

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

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

جامعه بزرگ و فعال React (Community)

React یک جامعه بزرگ و فعالی از توسعه‌دهندگان به پرچمداری فیسبوک رو به عنوان پشتوانه خودش داره. این به معنی وجود منابع غنی و مفید از آموزش‌ها، مستندات و کتابخانه‌هاست که می‌تونید برای توسعه‌ی پروژه هاتون استفاده کنید. همچنین، به روزرسانی‌های مداوم از سمت این جامعه به طور مستمر باعث بهبود و پیشرفت مداوم React شده و خواهد شد.

داشتن یک جامعه بزرگ، منسجم و متخصص یکی از لازمه های ماندگار بودن و توسعه ی یک تکنولوژی هست که خوشبختانه React از این نظر در شرایط خیلی خوبی قرار داره و جایگاهش رو کاملا تثبیت کرده .

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

 

کمک به سئو و بهینه شدن سایت

گوگل برای اینکه یک سایت رو به سمت رتبه های بالا پرتاب کنه به غیر از محتوا به زیرساخت و ویژگی های فنی مثل سرعت لود و رندرینگ سایت هم توجه میکنه.

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

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

در حالیکه جامعه ری اکت با معرفی تکنولوژی Next js این مسئله رو به بهترین شکل مدیریت و حل کرده و با استفاده از روش رندر سمت سرور SSR (Server-Side Rendering ) تونسته به تثبیت جایگاه React  به عنوان یکی از گزینه های فوق العاده برای طراحی رابط کاربری (UI) استاندارد و ایده آل، کمک کنه!

ری اکت کتابخانه هست یا فریم ورک؟

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

از طرف دیگه، فریم ورک‌ها نوعی نرم‌افزارهای بزرگ‌تر از کتابخانه هستن که امکان نوشتن کدهای حرفه‌ای تر و کامل‌تر رو برای برنامه نویسان فراهم می کنن و در عین حال بهشون کمک میکنن تا در مدت زمان کوتاه‌تری بتونن کدهای بهتری بنویسن

اما ری اکت ویژگی‌های کتابخانه و فریم ورک رو یکجا در خودش داره و به همین دلیله که در حال حاضر به عنوان یکی از محبوب‌ترین ابزارهای برنامه نویسان برای طراحی وب و به طور ویژه رابط کاربری در نظر گرفته میشه.

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

سازگاری با نسخه های قدیمی تر (Backward compatibility)

یکی از بزرگترین معایب فریم ورک ها و زبان های برنامه نویسی، موضوع عدم سازگاری با نسخه‌های قبلی یا آپدیت نشدن مستمر اونهاست که گاهی دردسرهای بزرگی ایجاد میکنه و همین مسئله به مرور باعث عدم اطمینان و اعتماد توسعه دهندگان به اونها میشه.

اما React به خوبی از ویژگی کاربردیBackward compatibility بهره می بره که یک ویژگی مهم در زمان انتخاب یک فریم ورک یا زبان برنامه نویسی هست. امکان به‌روزرسانی یا کار با نسخه‌های قدیمی‌تر نه ‌تنها باعث صرفه‌جویی در زمان توسعه میشه، بلکه باعث آرامش خاطر بیشتر توسعه دهنده برای تمرکز و اعتماد بیشتر به React  میشه.

قابلیت استفاده در وب و موبایل

React Native یک فریم ورک بر پایه جاوا اسکریپت و React هست که باز هم توسط فیسبوک طراحی و معرفی شد. پس ناگفت پیداست که تمام ویژگی هایی که برای React لیست کردیم، درReact Native هم وجود داره. به علاوه اینکه کد های بین دو پلتفرم Android و IOS مشترک هست و نیازی به برنامه نویسی جداگانه برای هر سیستم عامل نیست. بنابراین می‌تونید کامپوننت‌هایی که می نویسید رو در چندین پروژه استفاده کنید.

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

برای اثبات قدرت و کارایی React Native  همین بس که بدونید سوپراپلیکیشن اینستاگرام ، فیسبوک و نرم‌افزارهای فروشگاهی مانند والمارت (بزرگترین فروشگاه زنجیره ای خرده فروشی در دنیا ) با همین تکنولوژی ساخته شدن.

پیش نیازها و ابزارهای مورد نیاز برای یادگیری ری اکت

یادگیری  React هم مثل یادگیری همه تکنولوژي ها و فریمورک ها و زبانها و … نیازمند یک سری پیش نیاز هاست که باید قبل از ری اکت یاد گرفته باشید تا بتونید React  رو رام کنید. از جمله پیش نیازهایی که قبل از یادگیری  React باید اونهارو بلد باشید:

HTML و CSS

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

Java Script

کتابخانه React بر پایه JavaScript ساخته شده بنابراین واضحه که برای یادگیری اون، باید با مفاهیمی مثل توابع، شیء‌ها، آرایه‌ها، متد‌ها و … آشنا باشید. ورود به ری اکت بدون تسلط به جاوا اسکریپت تقریبا غیرممکنه چون زبان اصلی اون هست و باید به منطق اون کاملا مسلط باشید. جاوااسکریپت از یه زبان ساده برای وب تبدیل شده به یک آچار فرانسه تمام عیار که هرکاری می‌تونه انجام بده. برای اینکه بتونید این زبان جذاب و پرکاربرد رو به زبان ساده و کاملا اصولی یاد بگیرید و خیلی راحت با اون دوست بشید، فقط کافیه نگاهی به این دوره بندازید. (لینک)

ES6 (ECMAScript 2015)

یک نسخه جدید از JavaScript هست که برای یادگیری React باید کار کردن با اون رو بلد باشید چون از این نسخه به بعد جاوا اسکریپت متحول شد. بعضی از ویژگی‌های ES6 شامل ، توابع arrow، تعریف متغیر با const و let و همینطور انواع داده‌ای جدید مثل Set و Map هستند که در ری اکت خیلی زیاد با اونها سروکار خواهید داشت.

NPM  (Node Package Manager)

از آنجا که برای مدیریت کتابخانه‌ها و بسته ها در  React از package manager های node.js مانند NPM استفاده می‌شود لازم است که بتوانید با یکی از این package manager ها آشنایی داشته باشید و بتوانید با آن کار کنید.

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

برای جواب دادن به این سوال بهتر است اول توضیحی کوتاهی در مورد تایپ اسکریپت داده شود. تایپ اسکریپت یک زبان برنامه نویسی است که توسط شرکت مایکروسافت ارائه شده و پشتیبانی می شود.

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

به عنوان مثال شما در جاوا اسکریپت نمیتوانید برای متغیر هایی که تعریف می کنید نوع (Type) تعریف کنید اما تایپ اسکریپت به شما این قابلیت را میدهد که بتوانید برای متغیر ها و همچنین ورودی توابع پروژه تان Type تعیین کنید.

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

ابـزارهای موردنیاز برای کار با ری اکت

• یک عدد کامپیوتر

چون که React برای توسعه فرانت اند (Front-End) استفاده میشه و کتابخانه سبکی هست، بنابراین نیازی به حراج مال و خرید یک کامپیوتر خیلی قوی با حافظه و پردازش و گرافیک بالا ندارید. قطعا کامپیوتر قوی کار شما رو بهتر راه میندازه اما اگه تازه کار هستید می تونید اول از یک سیستم قابل قبول شروع کنید و کم کم اون رو ارتقا بدید. اولین قدم شما برای یادگیری ری اکت سیستم خریدن نباشه خلاصه!

• ادیتور کد (Code Editor)

برای نوشتن کدها در ری اکت نیاز به یک ویرایشگر کد هم دارید تا بتونید کدهای مرتب و تمیز و بدون خطا تولید کنید. این ویرایشگر می‌تونه یک ویرایشگر خیلی ساده مثل Notepad++  ویندوز باشه یا ویرایشگری قدرتمند مثلvscode ،Atom  و یا Webstorm.

نکاتی که باید در انتخاب یک ادیتور خوب درنظر بگیرید، رنگ بندی مناسب کدها برای تشخیص راحت تر، نمایش خطاها بصورت واضح و لحظه ای و همینطور مرتب کردن کدهاست و هر نرم‌افزاری که رابط کاربری راحت تری برای شما داشت می‌تونید استفاده کنید. یادتون باشه با توجه به تجربه کاربری خودتون انتخاب کنید نه حرف دیگران!

استفاده از ویرایشگر های قوی واقعا کار شما رو در نوشتن و خطایابی و تست کد راحت‌تر می‌کنه.

• مدیر بسته ها (Package manager)

برای دانلود و نصب بسته ها و کارهایی مثل ساخت پروژه و اجرای اون استفاده میشه که باید روی سیستم شما نصب باشه. مثل همون NPM که قبلا گفتیم.

مسیر حرفه ای تر شدن با کتابخانه ها و ابزارهای کمکی ری اکت

برای ری اکت، کتابخانه ها و مجموعه های مختلفی برای طراحی UI وجود داره که حاوی اجزای آماده‌ای مثل فرم‌ها، دکمه‌ها، جداول و خیلی چیزهای دیگه هستن که با استفاده از آن‌ها می‌تونید رابط کاربری زیبا و حرفه‌ای برای برنامه‌های React خودتون بسازید.

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

• کتابخانه Material UI (MUI):

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

لیست، اسلایدر، Drop-Down ، انواع دکمه و…  جزو کامپوننت‌های پرکاربردی هستن که برای وبسایت‌های مختلف ضروری و قابل استفاده هستن. بنابراین شما برای ایجاد چنین چیزهایی در پروژه نیازی به هدر دادن وقت برای نوشتن از صفر ندارید.

اینم بدونید که این کامپوننت‌ها علاوه بر اینکه توسط تیم های حرفه ای، استاندارد و بهینه طراحی شدن، کاملا قابلیت شخصی‌سازی (customize) هم دارن و می‌تونید هر بلایی خواستید سر اونها بیارید تا به شکلی که در ذهنتون هست دربیارید!

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

• کتابخانه React Query

 React Query  یکی از پکیج های معروف و محبوب ری اکت هست که در گیت هاب هم طرفداران زیادی داره. این کتابخانه پروسه دریافت داده از منابع خارجی (درخواست بین شبکه ای) رو در react خیلی آسون تر میکنه ودیگه نیازی به نوشتن کدهای زیاد برای کنترل و مدیریت این فرآیند ندارید چون همین پکیج به شما کمک میکنه درخواست هارو را با کدهای کمتر و کوتاه تر ایجاد کنید.

• کتابخانه React Bootstrap :

به جای اینکه شما به عنوان برنامه نویس بخواید استایل های CSS  و جاوا اسکریپت رو باهم ترکیب کنید تا در React قابل استفاده بشه، دقیقا اومده کامپوننت هایی رو که صد در صد با react نوشته شدن در اختیار شما قرار داده و این یعنی حذف کتابخانه های  قدیمی مانند jQuery.

همچنین تمامی کامپوننت های ساخته شده در این کتابخانه از لحاظ ظاهری و زیبایی در بالاترین سطح ممکن طراحی شدن و از این بابت خیال شما راحت هست که با کامپیوننت هایی مطابق استانداردهای UI طرف هستید.

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

بازار کار ری اکت در چه وضعیتی قرار داره؟

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

اگه موافقید یک پاراگراف از سایت معروف کاریابی جاب ویژن قرض بگیریم و از زاویه دید اونها که بی طرف هست، جواب این سوال رو پیدا کنیم.

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

جالبه بدونید در حال حاضر که این مقاله رو مینویسیم، حقوق پیشنهادی شرکت برای یک توسعه دهنده ری اکت متخصص، بین 40 تا 60 میلیون تومن هست . این که این عدد برای شما ایده آل هست یا خیر به ذهنیت شما بستگی داره ولی در مجموع جزو مشاغل پرتقاضا و پولساز محسوب میشه و آینده درخشانی خواهد داشت.

همان طور که مشاهده می کنید، بنا به آمار و تعداد آگهی های استخدام موجود در سایت جابینجا 296 آگهی استخدام برای ری اکت، 23 تا برای ویو و 126 تا برای فریمورک انگیولار وجود دارد.

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

یکی از دلایل تقاضای بالا برای آموزش react، بازار کار فوق العاده ای هست که نسبت به رقبایش دارد.

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

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

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

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

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

عکس زیر را مشاهده کنین:

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

حالا شما وقتی با جاوا اسکریپت یک پروژه را می نویسید و در پروژه تان یک قسمتی از سایت را با جاوا اسکریپت تغییر بدهید. یعنی شما می خواهید یک قسمت از Html و Dom وب سایت را با Js تغییر بدهید.

در همین ساختار بالا که توضیح داده شد اگر شما بخواهید تگ img را تغییر بدهید، بقیه قسمت هایی از Dom که به img متصل هستند و با آن ارتباط دارند را هم تغییر داده و آپدیت می کند.

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

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

بعد از این بررسی، تغییر های لازم را روی Real Dom اعمال می کند. ری اکت به کمک دام مجازی فقط قسمتی که آپدیت شده را تغییر میدهد و به این ترتیب هیچ تاثیر منفی روی سرعت سایت نخواهیم داشت.

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

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

چطور یک برنامه ری اکت بسازیم؟

در این قسمت از مقاله می‌خواهیم با یک مثال ببینیم که چطور یک برنامه ری اکت بسازیم. تا اینجا فهمیدیم فریمورک ری اکت چیست و چه ویژگی‌هایی دارد؛ اما، در بخش می‌خواهیم زیبایی و سادگی این زبان را به شما نشان دهیم. شما می‌توانید کدهای ری اکت را مستقیما داخل کدهای html استفاده کنید.

1. یک فایل html بسازید: دستور زیر ساده‌ترین فرم یک فایل در html است.

<html> 

    <head> 

        <title>Let's React with npm</title>       

    </head> 

    <body>             

    </body> 

</html>

2. کتابخانه‌ی ری اکت را ایمپورت کنید: این کتایخانه در دو فایل .js تعریف شده که یکی برای تولید کنندگان و دیگری برای توسعه‌ دهندگان است.

<!-- Load React Libraries --> 

<!-- Note: when deploying, replace "development.js" with "production.min.js". --> 

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 

<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

این کد را در تگ هد html باید قرار دهید. کد نهایی به شکل زیر می‌شود:

<html> 

    <head> 

        <title>Let's React with npm</title> 

        <!-- Load React Libraries --> 

        <!-- Note: when deploying, replace "development.js" with "production.min.js". --> 

        <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 

        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>                     

    </head> 

    <body>             

    </body> 

</html>

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

<body> 

   <div id="root"></div>      

</body>

4. ساخت کامپوننت: اکنون زمان ساخت کامپوننت‌هاست. شما باید این مولفه‌ها را به صورت کلاس بسازید. به عنوان مثال:

class HelloClass extends React.Component  

{ 

        render()  

        { 

        return React.createElement('div', null, 'React without npm'); 

      } 

}

تابع React.createElement تابعی است که به شما امکان ساخت المان‌ها در ری اکت را می‌دهد.

5. فراخوانی کامپوننت ری اکت: در مرحله‌ی آخر شما باید کامپوننت خود را از داخل جاوا اسکریپت فراخوانی کنید. تابع React.DOM.render() این کار را برای شما انجام می‌دهد. در داخل تابع دو آرگومان داریم که اولی کامپوننت را می‌سازد و دومین آرگومان، تابع را داخل نگهدارنده‌ای که ساختیم برای رندر کردن قرار می‌دهد.

ReactDOM.render( 

    React.createElement(HelloClass, null, null), 

    document.getElementById('root') 

);

دستور کامل ساخت فایل ری اکت را در ادامه مشاهده می‌کنید:

<html> 

    <head> 

        <title>React's React</title>         

        <!-- Load React. --> 

        <!-- Note: when deploying, replace "development.js" with "production.min.js". --> 

        <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 

        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> 

        </head> 

        <body> 

        <div id="root"></div>     

       <!-- This is embedded JavaScript. You can even place this in separate .js file --> 

       <script>             

            window.onload = function() 

            {       

                class HelloClass extends React.Component  

                { 

                    render()  

                    { 

                        return React.createElement('div', null, 'React without npm..'); 

                    } 

                } 

                ReactDOM.render( 

                    React.createElement(HelloClass, null, null), 

                    document.getElementById('root') 

                ); 

            };         

        </script> 

    </body> 

</html>

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

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

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

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

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

به عنوان مثال تصاویر زیر از وب سایت جابینجا هستند:

همان طور مشاهده می کنید طبق آمار وب سایت جابینجا تعداد آگهی های استخدام برای ریکت نیتیو 296، برای سوئیفت 49، برای جاوا 286 و برای کاتلین 68 می باشد.

خب  می توانیم نتجه بگیریم که در بازار اندروید هم ریکت نیتیو توانسته رقبای خودش را کمرنگ کند و سهم زیادی از بازار کار را به خودش اختصاص دهد.

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

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

پس می توانیم نتیجه بگیریم که یکی دیگر از دلایل یادگیری ری اکت وجود فریمورکی به اسم ریکت نیتیو هست که می توانیم به راحتی با آن اپلیکیشن های اندروید و IOS پیاده سازی کنیم.

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

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

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

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

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

جمع بندی :

در یک کلام وقتی شرکت‌ معتبری مثل فیسبوک (Facebook)و شرکت بزرگ پرداخت بین المللی یعنی پی پال( (PayPalو همینطور بزرگترین VOD جهان یعنی نتفلیکس، از ری اکت برای طراحی وب سایت های خودشون استفاده کردن، بدونید که با یک تکنولوژی تمام عیار سروکار دارید که می‌تونید برای انجام هر پروژه ای روی اون حساب کنید. در ایران هم دیوار و اسنپ بزرگترین پلتفرم‌هایی هستن که با ری اکت توسعه داده شدن!

همونطور که در بخش تعریف React چیست؟ اشاره کردیم React یکی از فریم ورک‌های جاوا اسکریپت هست که برای توسعه رابط کاربری سایت کاربرد داره.

اولین پیش نیاز یادگیری این فریم ورک، درک و آشنایی با مبانی و زیرشاخه‌های جاوا اسکریپت هست مثل آشنایی با نحوه استفاده از map ، کاربرد let و const ، filter، آشنایی با JSX  و JSON و همینطورDOM  !

علاوه بر این مبانی، مباحث دیگه مثل آشنایی با الگوریتم‌ها، آشنایی با Flex برای چیدمان صفحات، آشنایی با API و برنامه نویسی شیءگرا ، نیازهای بعدی برای یادگیری ری اکت هستن که هر برنامه نویسی باید به اونها مسلط باشه تا بتونه در بازار کار حرفی برای گفتن داشته باشه

منابع یادگیری تخصصی ری اکت در ایران و خارج از ایران خیلی زیاد هستن اما تشخیص آموزش باکیفیت و اصولی که خروجی اون، یک متخصص پولساز و حرفه ای هست که به تمام ابعاد ری اکت مسلط باشه، کار راحتی نیست. پیشنهاد سبزلرن دوره ی x است با نگاه کردن به سرفصل ها و دیدن نمونه ویدیوها و همینطور نظرات دانشجویان قبلی می‌تونید بررسی کنید آیا می‌تونه برای شما مفید باشه یا نه!

سوالات متداول

• کامپوننت‌های ری اکت را چگونه باید استایل دهی کرد؟

سه روش برای استایل دهی به کامپوننت‌های ری اکت وجود دارد. استفاده از CSS، استفاده از آبجکت‌های استایل دهی در جاوا اسکریپت  و استفاده از JSS که یک کتابخانه‌ی CSS ای در جاوا اسکریپت است.

• برای آموزش react چقدر زمان نیاز داریم؟

به طور خلاصه می‌توان گفت برای حرفه‌ای شدن در این زبان شما نیاز به یک تا دوازده ماه زمان دارید. این عامل بستگی به میزان تجربه‌ی شما در زمینه‌ی زبان‌های برنامه‌نویسی وب مثل جاوا اسکریپت و همین‌طور زمانی که در طول روز برای آموزش react اختصاص می‌دهید دارد.

• تفاوت react با react native چیست؟

ری اکت زبانی است که برای توسعه‌ی اپلیکیشن‌ها و صفحات وب دسکتاپ به کار می‌رود. React native از همان سینتکس ری اکت برای ساخت وب اپلیکیشن‌های نسخه‌ی اندروید و ios استفاده می‌کند.

• آیا react از جاوا اسکریپت راحت‌تر است؟

می‌توان گفت درک و react به صورت خودکار انجام می‌شود. این زبان رویکردی مبتنی بر کامپوننت دارد و استفاده از جاوا اسکریپت ساده در آن، یادگیری، ساخت و پشتیبانی از برنامه‌های حرفه‌ای وب و موبایل را راحت کرده‌ است. به طور کلی react از سینتکس JSX استفاده می‌کند که خیلی راحت بوده و به شما امکان می‌دهد html و جاوا اسکریپت را با هم ترکیب کنید .

• آیا react جایگزین html است؟

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