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

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

هشدار: این مقاله برای کسایی که مشکل قلبی دارن مناسب نیست، چون ممکنه عاشق ری اکت و امکاناتش بشید!

 

ری اکت چیست ?

کتابخانه ری اکت چیست؟

ری اکت یکی از کتابخانه های اوپن سورس (متن باز) جاوا اسکریپت هست که برای ساخت رابط های کاربری وب سایت ها مورد استفاده قرار می گیرد.

کتابخانه ری اکت توسط جامعه ای از توسعه دهندگان فیس بوک ارائه شد. ریکت ابتدا در سال 2011 با هدف استفاده توسط خود فیسبوک ایجاد شد اما بعد ها با توسعه بیشتر و تکمیل شدنش در سال 2013 به یک کتابخانه عمومی برای استفاده همه برنامه نویس ها تبدیل شد. سبز لرن

خصوصیات فریم ورک react چیست؟ – چی هست اصلا این ری اکت؟

در پاسخ به سوال خصوصیات فریم ورک react چیست؟ باید بگوییم فریم ورک ری اکت نسبت به سایر فریم ورک‌های جاوا امتیازات زیادی دارد. از جمله مهم‌ترین خصوصیات فریم ورک ری اکت که آن را از سایر فریم ورک‌ها متمایز می‌کند، می‌توان به موارد زیر اشاره کرد:

  • DOM مجازی: این مشخصه‌ی فریم ورک react به افزایش سرعت توسعه‌ی برنامه و انعطاف پذیری آن کمک می‌کند. DOM مجازی در این فریم ورک جایگزین اصلی شده و هر بار که برنامه تغییر داده شود، کل UI را در DOM مجازی نمایش می‌دهد.
  • JSX: JSX را می‌توان یکی از بهترین ویژگی‌های فریم ورک ری اکت دانست. چون کار نوشتن بلوک‌ها را برای توسعه دهندگان خیلی راحت‌تر کرده است.
  • React Native: این نسخه از react قابلیت استفاده از کدهای وب این فریم ورک برای نسخه‌های اندروید و ios را فراهم کرده؛ بنابراین کار توسعه‌ی برنامه‌های موبایل با فریم ورک ری اکت راحت‌تر شده است.
  • اتصال داده یک طرفه: این قابلیت ریکت یعنی یک توسعه دهنده برای تغییر یک کامپوننت باید از کال بک استفاده کند و نمی‌تواند مستقیما آن را ادیت کند. این کنترل یک طرفه‌ در اپ‌های js، flux نامیده می‌شود و باعث موثرتر و انعطاف پذیرتر شدن آن‌ها می‌شود.
  • رابط کاربری اعلانی: این ویژگی در کدهای react باعث خوانایی بیشتر و راحتی رفع باگ می‌شود. به طور کلی فریم ورک React JS بهترین پلتفرم برای توسعه‌ی رابط‌های کاربری است که هم برای دسکتاپ و هم موبایل کاربرد دارد.
  • معماری Component Based: این قابلیت یعنی فریم ورک ری اکت از اجزای مختلف با منطق خاص خود استفاده می‌کند که نقش مهمی در تعاملات و بصری سازی اپ دارد. در ادامه مقاله بیشتر مفصل توضیح می دهیم که کامپوننت در فریم ورک react چیست و چطور ساخته می شود.

امتیازات زبان ری اکت

امتیازات زبان ری اکت این فریم ورک را به یک فریم ورک پرتقاضا و کاربردی در توسعه‌ی وب تبدیل کرده. اما ببینیم چه چیز باعث شهرت زبان react شد:

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

مزایای فریم ورک ری اکت react

  • با کمک زبان react شما می‌توانید رابط‌های کاربری هیجان انگیزی طراحی کنید که شانس موفقیت شما را نسبت به یک رابط کاربری ضعیف بیشتر می‌کند. علت اصلی برتری زبان react js برای طراحی رابط کاربری استفاده از کامپوننت‌هاست.
  • شاید برایتان سوال باشد بزرگ‌ترین امتیاز ری اکت چیست؟ می‌توان گفت بزرگترین مزیت استفاده از زبان react js قابلیت شخصی سازی کامپوننت‌ها است. شما می‌توانید کامپوننت‌هایی منحصر به فرد بر اساس نیازتان طراحی و پیاده کنید.
  • قابلیت استفاده مجدد از کامپوننت‌ها در زبان ری اکت باعث افزایش سرعت و کارایی کدهای توسعه‌ دهندگان می‌شود. یک برنامه نویس وب می‌تواند با تغییر فیلدها متنی، دکمه‌ها یا هر المان دیگری، از یک کامپوننت در بخش‌های مختلف استفاده کند.
  • ری اکت جی اس برای سئوی سایت هم یک امتیاز به شمار می‌رود. اما علت سئو دوستی react چیست؟ در واقع زبان برنامه نویسی react دو فاکتور مهم دارد که برای سئوی سایت اهمیت دارند. یکی سرعت لود بالا و دیگری سرعت بالای رندرینگ که باعث افزایش رتبه‌ی صفحات در گوگل می‌شوند.

استفاده از سینتکس JSX در ری اکت یعنی چه؟

ری اکت چیست ?

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

اگر بخواهیم خیلی خیلی ساده و خلاصه توضیح بدهیم، XML را همان HTML در نظر بگیرید اما با این تفاوت که در Html تگ های از پیش تعیین شده وجود دارند که فقط مجاز به استفاده از این تگ ها هستیم و نمی توانیم از تگ هایی با اسم دلخواه استفاده کنیم. به عنوان مثال نمی توانیم از تگی به اسم <Amin> استفاده کنیم.

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

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

ری اکت Component Based هست، یعنی چی؟ –  قطره قطره جمع گردد…!

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

حال ممکن هست برایتان سوال شود که این Component Based بودن زبان برنامه نویسی react چه فایده ای دارد و چه قابلیت مثبتی به ما می دهد.

تا اینجا مفهوم کامپوننت را اینطور گفتیم که یک تکه کوچک از وب سایت ما؛ مثل هدر، فوتر، باکس محصول، نوبار و ….

همان طور که می دانیند هدر و فوتر در همه صفحه های یک وب سایت یکسان هستند و تغییری نمی کنند.

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

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

این موضوع خوانایی کدهای مان را افزایش می دهد، تست نویسی را راحت تر کرده، دیباگینگ را راحت تر می کند و … بسیاری مزایای دیگر.

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

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

همان طور که میدانید ری اکت یکی از لایبرری (کتابخونه) های زبان جاوا اسکریپت است. پس در وهله اول متوجه می شویم که یکی از پیش نیاز های آموزش react تسلط داشتن روی جاوا اسکریپت است.

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

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

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

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

برای این سوال جواب های مختلفی می توان ارائه کرد و همین طور هیچ جواب منطقی ندارد(عجب! الان برایتان واضح تر میگم)

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

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

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

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

اما جواب بعدی به این سوال (سوال: برای شروع ری اکت چقدر باید جاوا اسکریپت بلد باشیم؟) را قصد دارم با یک مثال برایتان توضیح بدهم تا کاملا متوجه بشوید.

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

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

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

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

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

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

ری اکت چیست ?

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

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

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

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

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

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

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

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

اگر بخواهیم بازار کار این 3 تکنولوژی (انگیولار، ویو و ری اکت) را مقایسه کنیم، یک سر به سایت جابینجا می زنیم تا ببینیم سهم بازار کار انگیولار، ویو و ری اکت چیست.

ری اکت چیست ?

ری اکت چیست ?

ری اکت چیست ?

همان طور که مشاهده می کنید، بنا به آمار و تعداد آگهی های استخدام موجود در سایت جابینجا 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>

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

منظور از وضعیت (state) و ویژگی (props) در ری اکت چیست؟

حال ببینیم منظور از وضعیت (state) و ویژگی (props) در ری اکت  چیست و چه کاربردی دارند. در واقع هر دو مولفه برای یک کامپوننت در ری اکت استفاده می‌شوند؛ ولی تفاوت‌هایی با هم دارند:

  • وضعیت: به متغیرهایی از یک کامپوننت گفته می‌شود که مستقیما توسط خود کامپننت مقداردهی و مدیریت می‌شوند.
  • ویژگی: به متغیرهایی از یک کامپوننت گفته می‌شود که توسط والد به آن انتقال پیدا کرده است.

یک وضعیت می‌تواند توسط یک ویژگی مقداردهی اولیه شود. مثلا یک کامپوننت والد می‌تواند شامل یک کامپوننت فرزند باشد و یک ویژگی را با سینتکس زیر به او انتقال دهد:

<ChildComponent color=green />

در ساختار کامپوننت فرزند می‌توان به این ویژگی دسترسی داشت:

class ChildComponent extends React.Component {

  constructor(props) {

    super(props)

    console.log(props.color)

  }

}

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

class ChildComponent extends React.Component {

  constructor(props) {

    super(props)

    this.state.colorName = props.color

  }

}

البته کلاس می‌تواند وضعیت را بدون توجه به ویژگی نیز مقداردهی کند. شما نمی‌توانید props را در نود فرزند تغییر دهید؛ بنابراین هر چیزی که تغییر می‌دهید باید متعلق به وضعیت کامپوننت باشد. با این اوصاف بنظرتان کاربرد ویژگی در ری اکت چیست؟ در واقع ویژگی یا همان props در یک کامپوننت به آن اجازه می‌دهد که متدهای کامپوننت والد دسترسی پیدا کند و به نوعی یک کنترل مرکزی روی کامپوننت‌های والد ایجاد می‌کند. جالب است بدانید بعضی از کامپوننت‌ها stateless هستند یعنی فقط بر اساس ویژگی‌ها، چیزهایی را نمایش می‌دهند.

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

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

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

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

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

ری اکت چیست ?

ری اکت چیست ?

ری اکت چیست ?

ری اکت چیست ?

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

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

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

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

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

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

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

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

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

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

سخن پایانی

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

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

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

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

در غیر این صورت وقتی ری اکت را شروع کنید به شدت اذیت می شوید و مسیر یادگیری خودتان را سخت و سخت تر می کنید (حتی ممکنه زده بشین).

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

هرگونه سوال یا پیشنهادی در مورد ری اکت و مقاله داشتید و یا اگر مشکلی در مقاله وجود داشت، در قسمت کامنت های مقاله مطرح کنید.

امیدوارم این مقاله برایتان مفید واقع شده باشد. برای دریافت اطلاعات بیشتر در مورد کتابخانه ری اکت، پیشنهاد می کنم ویدئوی مربوط به این مقاله را حتما تماشا کنید.

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

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

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

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

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

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

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

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

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

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

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

 

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

دیدگاهتان را بنویسید