ری اکت یکی از کتابخانه های اوپن سورس (متن باز) جاوا اسکریپت هست که طبق گفته داکیومنت خود آن برای ساخت رابط های کاربری وب سایت ها مورد استفاده قرار می گیرد. در این مطلب به طور کامل کاربرد، ویژگی ها و مزایای ری اکت را مورد بررسی قرار میدهیم و به شما میگوییم که ری اکت چیست.
در پاسخ به سوال خصوصیات فریم ورک react چیست؟ باید بگوییم فریم ورک ری اکت نسبت به سایر فریم ورک‌های جاوا امتیازات زیادی دارد. از جمله مهم‌ترین خصوصیات فریم ورک ری اکت که آن را از سایر فریم ورک‌ها متمایز میکند، می‌توان به موارد زیر اشاره کرد:
امتیازات زبان ری اکت این فریم ورک را به یک فریم ورک پرتقاضا و کاربردی در توسعه‌ی وب تبدیل کرده. اما ببینیم چه چیز باعث شهرت زبان react شد:
در این قسمت به این سوال پاسخ می دهیم که استفاده از سینتکس JSX در ری اکت یعنی چه؟ همان طور که اطلاع دارید کتابخانه زبان برنامه نویسی react از سینتکسی به اسم JSX استفاده می کند. Jsx مخفف Java Script XML هست. برای این که نحوه نوشتن این سینتکس را یاد بگیرید باید با مفهوم XML آشنا باشید.
اگر بخواهیم خیلی خیلی ساده و خلاصه توضیح بدهیم، XML را همان HTML در نظر بگیرید اما با این تفاوت که در Html تگ های از پیش تعیین شده وجود دارند که فقط مجاز به استفاده از این تگ ها هستیم و نمی توانیم از تگ هایی با اسم دلخواه استفاده کنیم. به عنوان مثال نمی توانیم از تگی به اسم <Amin> استفاده کنیم.
اما شما در XML می توانید تگ هایی با اسامی دلخواه را ایجاد کرده و از آنها استفاده کنید. داخل ری اکت هم شما می توانید قسمت های مختلف وب سایتتان را با اسم های دلخواه ایجاد کرده و استفاده کنید.
اکنون که دانستیم منظور از xml در تعریف ری اکت یعنی چه، به معنای jsx بپردازیم. به طور کلی Jsx یعنی این که ما داخل صفحات جاوا اسکریپت کد هایی در قالب Html و Xml بنویسیم. به همین دلیل در پروژه هایی که با فریمورک ری اکت توسعه داده میشوند هیچ خبری از فایل Html نیست و تمام کد های Html توسط فایل های جاوا اسکریپت Render میشوند.
همان طور که در داکیومنت آموزش react گفته شده، ری اکت یک لایبرری کامپوننت بیس هست. ممکن هست برایتان سوال شود که معنی و مفهوم کامپوننت چی هست؟! کامپوننت یعنی یک تکه کوچک از یک چیز بزرگ.
یعنی ری اکت وب سایت شما را تبدیل به تکه های کوچیک کرده و با قرار دادن این تکه های کوچک در کنار همدیگر، وب سایت شما ساخته میشود.
حال ممکن است برایتان سوال شود که این Component Based بودن زبان برنامه نویسی react چه فایده ای دارد و چه قابلیت مثبتی به ما می دهد.
تا اینجا مفهوم کامپوننت را اینطور گفتیم که یک تکه کوچک از وب سایت ما؛ مثل هدر، فوتر، باکس محصول، نوبار و ….
همانطور که میدانید هدر و فوتر در همه صفحه های یک وب سایت یکسان هستند و تغییری نمی کنند.
حال فرض کنید وب سایت ما 10 صفحه دارد و قطعا فوتر همه صفحات باید یکی باشد. به جای این که تمام کد های فوتر را در همه 10 صفحه بنویسیم، فوتر را تبدیل می کنیم به یک کامپوننت، با اسم مثلا Footer.js.
از این به بعد در هر کدام از صفحه های وب سایتمان که به فوتر نیاز داشتیم، به جای تکرار چند خط کد های فوتر فقط اسم کامپوننت Footer را می نویسیم.
این موضوع خوانایی کدهای مان را افزایش می دهد، تست نویسی را راحت تر کرده، دیباگینگ را راحت تر می کند و … بسیاری مزایای دیگر.
در ادامه موضوع ری اکت چیست به بررسی پیش نیازهای یادگیری آن می پردازیم. همان طور که میدانید ری اکت یکی از لایبرری (کتابخانه) های زبان جاوا اسکریپت است. پس در وهله اول متوجه می شویم که یکی از پیش نیاز های آموزش 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 (درخت دام) می گویند، در کنار هم میچیند و در نهایت برای کد های بالا ساختار زیر را در نظر می گیرد.
حالا شما وقتی با جاوا اسکریپت یک پروژه را می نویسید و در پروژه تان یک قسمتی از سایت را با جاوا اسکریپت تغییر بدهید. یعنی شما می خواهید یک قسمت از Html و Dom وب سایت را با Js تغییر بدهید.
در همین ساختار بالا که توضیح داده شد اگر شما بخواهید تگ img را تغییر بدهید، بقیه قسمت هایی از Dom که به img متصل هستند و با آن ارتباط دارند را هم تغییر داده و آپدیت می کند.
اگر منطقی نگاه کنیم، وقتی تگ img میخواهد اپدیت شود دیگر نیاز نیست هیچ تگ دیگری آپدیت شود و اگر همچین اتفاقی بیفتد ممکن است در سایت های کوچک تاثیر چشمگیری نداشته باشد ولی در سایت های بزرگ به سرعت به وب سایتتان آسیب جدی وارد می کند.
زبان برنامه نویسی react این مشکل را حل کرده. ری اکت عزیز به جای این که با دام واقعی (Real Dom) کار کند، برای خودش یک دام مجازی (Virtual Dom) در نظر میگیرد و به این ترتیب به محض این که تغییری در یکی از قسمت های سایت اتفاق بیفتد، ری اکت قبل از این که تغییری روی Real Dom انجام دهد، اول خودش داخل Virtual Dom بررسی می کند تا متوجه بشود کدام المنت تغییر کرده و باید آپدیت شود.
بعد از این بررسی، تغییر های لازم را روی Real Dom اعمال می کند. ری اکت به کمک دام مجازی فقط قسمتی که آپدیت شده را تغییر میدهد و به این ترتیب هیچ تاثیر منفی روی سرعت سایت نخواهیم داشت.
چون که مبحث دام مجازی و نحوه عملکردش داخل فریم ورک ری اکت تقریبا بحث تخصصی است، ممکن است با این توضیحات تئوری مفهومش را آنطور که باید متوجه نشوید.
منظور از وضعیت (state) و ویژگی (props) در ری اکت چیست؟
حال ببینیم منظور از وضعیت (state) و ویژگی (props) در ری اکت چیست و چه کاربردی دارند. در واقع هر دو مولفه برای یک کامپوننت در ری اکت استفاده میشوند؛ ولی تفاوت‌هایی با هم دارند:
یک وضعیت می‌تواند توسط یک ویژگی مقداردهی اولیه شود. مثلا یک کامپوننت والد می‌تواند شامل یک کامپوننت فرزند باشد و یک ویژگی را با سینتکس زیر به او انتقال دهد:
1
<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 native از همان سینتکس ری اکت برای ساخت وب اپلیکیشن‌های نسخه‌ی اندروید و ios استفاده میکند.
می‌توان گفت درک و react به صورت خودکار انجام میشود. این زبان رویکردی مبتنی بر کامپوننت دارد و استفاده از جاوا اسکریپت ساده در آن، یادگیری، ساخت و پشتیبانی از برنامه‌های حرفه‌ای وب و موبایل را راحت کرده است. به طور کلی react از سینتکس JSX استفاده میکند که خیلی راحت بوده و به شما امکان میدهد html و جاوا اسکریپت را با هم ترکیب کنید .
شاید ندانید که علت محبوبیت ری اکت چیست. می‌توان گفت زیبایی و جذابیت این زبان به این است که از قدرت و محبوبیت html، استفاده میکند ولی قرار نیست جایگزین آن باشد. شما در ری اکت میتوانید از سینتکس ساده‌ی html برای ساخت رابط و از ویژگی‌های داینامیک جاوا اسکریپت در کنار هم استفاده کنید.
منبع:
