شبی را به یاد دارم که کلافه و سردرگم در حال بالا و پایین کردن نتایج گوگل بودم. حس میکردم سایتم به بنبست رسیده و سرم شبیه یک علامت سوال بزرگ شده! تا اینکه چشمم خورد به تیتر React js چیست و چه کاربردی دارد؟ یکهو سرم تبدیل شد به یک لامپ روشن و نورانی. باید اعتراف کنم کلیک روی این تیتر، سرنوشت سایتم را تغییر داد!
مدتها بود که از راهاندازی سایتم میگذشت. با وجود اینکه برای محتوایش چیزی کم نگذاشته بودم ولی سایت دیده نمیشد و درست در همان لحظه، فهمیدم که یک چیز را فراموش کردهام: یک رابط کاربری خوب! خب چیز کمی هم نبود، راستش را بخواهید در گیر و دارِ همین بالا و پایین کردنها بود که فهمیدم یک سایت یا اپلیکیشن بدون داشتن یک رابط کاربری مناسب تفاوت چندانی با کشک ندارد!
سرتان را درد نیاورم، بالاخره فرشتهی نجاتم از بین انبوه سرچ ریزالتها برایم چشمک زد، فریم ورک React jS ! حالا اینکه چرا از بین این همه فریمورک، تصمیم گرفتم با سر به سمت یادگیری React jS بدوم، سوالی است که جوابش را بعد از معرفی React jS برایتان خواهم گفت.
اگر شما هم برای سایت یا اپلیکیشنتان به دنبال ایجاد طراحی یک رابط کاربری پیشرفته هستید تا در بازار کار حرفهای خودی نشان دهید، پس دستتان را به من بدهید تا راه را به شما نشان بدهم.
ری اکت (React JS) چیست و چه کاربردی دارد؟
حتی اگر کمی هم با دنیای برنامهنویسی آشنا باشید، حتماً چیزهایی درباره فریمورکها شنیدهاید. کتابخانههایی که مثل یک نقشهی برنامه نویسی به شما کمک میکنند عملیات کدنویسی را با سرعت هرچه بیشتر انجام دهید و به بهترین ساختار ممکن دست پیدا کنید.
React هم یک کتابخانهی قدرتمند است که تحت زبان برنامه نویسی جاوا اسکریپت (JS) عمل میکند. یک کتابخانهی منبعباز یا اوپن سورس (Open-Source) که به کمکش میتوانید برای برنامههای مختلف علیالخصوص برنامههای یکصفحهای (Single-page)، رابط کاربری ایجاد کنید. قابلیتی که به شما این امکان را میدهد تا بهراحتی لایههای نمایشی برنامههای وب یا موبایل را مدیریت کنید.
یکی دیگر از کاربردهای مهمReact این است که توسعهدهندهها به کمکش میتوانند برنامههای تحت وب ویژهای طراحی کنند. برنامههایی که بدون نیاز به بارگذاری دوبارهی صفحه (Refresh) میتوانند دادهها را تغییر دهند. با اینکه بسیاریReact را یک فریم ورک فرانت اند میدانند اما باید بدانید که از نظر فنی تفاوتهایی با فرانتاندها دارد و هدف اصلیاش جنریت (Generate) یا ایجاد رابط کاربری است.
تا یادم نرفته بگم: React JS اولین بار در سال 2011 توسط جردن واک (Jordan Walk)، یکی از مهندسین نرمافزار در شرکت فیسبوک به دنیای IT پا گذاشت و به یک رقیب سرسخت برای Angular JS تبدیل شد. از شما چه پنهان از آن طرف هم یک غول بزرگ یعنی شرکت گوگل از Angular JS پشتیبانی میکند. به همین خاطر هم هیچ کدام از رقیبها برای برای جلو زدن از آن یکی کم نمیگذارند.
بهطورکلی فریمورکهای React، Angular و Vue.js از شناختهشدهترین کتابخانههای رابط کاربری هستند که به توسعهدهندهها کمک میکنند بدون سروکله زدن با کدهای پیچیده با استفاده از کدهایی آسان و قابلدرک رابط کاربری موردنظرشان را طراحی کنند. البته درست است که Angular از مباحث زیادی پشتیبانی میکند اما React نسبت به آن، کتابخانهی بهروزتر، جمعوجورتر و آسانتری است. در ادامه از این مزایا بیشتر برایتان میگویم.
مزیت استفاده از ری اکت (React JS)
اینجا همان قسمت جذابی است که سرم را به آن لامپ نورانی تبدیل کرد. بعد از آشنایی با ری اکت، متوجه شدم این کتابخانهی رابط کاربری مزایایی دارد که به هیچ وجه نمیشود ازشان گذشت. مزایایی که علاوه بر قابل فهم کردن کدها قرار است جادهی سنگلاخِ طراحی کاربری را به یک راه آسفالت تبدیل کند. حالا با هم این مزایا را مرور میکنیم.
1. یادگیری ری اکت آسان است
چه چیزی میتواند بهتر از قورت دادن یک هلوی پوست کنده باشد؟ اگر شما کمی از برنامه نویسی سر دربیاورید دیگر ری اکت برایتان فرقی با هلو نخواهد داشت. داشتن دانش پایه در حوزهی CSS و HTML، یادگیری React و کار کردن با آن را برایتان به یک سرگرمی تبدیل میکند.
2. کار با ری اکت بسیار ساده است
شاید باورتان نشود اما شما میتوانید به سادگی با استفاده از ویژگی JSX، زبان جاوا اسکریپت را با HTML ترکیب کنید و بدون هیچ دردسری برنامهی مورنظرتان را بنویسید.
تا یادم نرفته بگم: JSX، یک جاوا اسکریپت ساده است که به شما این امکان را میدهد که برای کدنویسی از کدهای HTML استفاده کنید.
3. ری اکت دارای رویکردی بومی (Native Approach) است
یکی از ویژگیهای ری اکت، React Native است. با کمک این ویژگی میتوانید برای موبایل یا وب، یک اپلیکیشن طراحی کنید و هم برای اندروید و هم IOS خروجی بگیرید! بدون اینکه نیازی به یادگیری و تسلط به زبانهای برنامهنویسی جاوا و سوییفت داشته باشید.
4. ری اکت برقراری اتصال دادهها (Data binding) را ساده میکند
ری اکت دارای یک معماری برنامهی کاربردی به اسم Flux است. به همین خاطر این فریم ورک به کمک Flux و یک اتصال یکطرفه میتواند جریان دادهها به اجزا را به کمک یک نقطهی کنترل-توزیعکننده کنترل کند.
5. قابلیت تستپذیری (Testability) بالایی دارد
درصورتی که از فریم ورک React استفاده کنید به راحتی میتوانید برنامهتان را تست کنید. شما با پردازش وضعیت (State) و انتقالش به View میتوانید خروجیتان را بررسی کنید و اکشنها، توابع، رویدادها (Events) و … را تریگر کنید.
6. با کامپوننتهای ری اکت، طراحی UI سادهتر میشود
کامپوننت (Component)ها در ری اکت به شما کمک میکند به جای طراحی کلی رابط کاربری، آن را به قسمتهای کوچکتر تقسیم کنید. بهاینترتیب میتوانید تعیین کنید که هر قسمت چطور کار کند.
7. ری اکت، پشتیبان بزرگی مثل فیسبوک دارد
شکی نیست که بسیاری از نابغههای عرصهی IT در شرکت فیسبوک فعالیت دارند، بنابراین تعجبی ندارد که با هر تغییری در عرصهی تکنولوژی، React هم توسعه و بهبود پیدا کند. به همین خاطر روزبهروز به کامپوننتهای این فریمورک اضافه میشود.
8. با React سایتتان سئوی بهتری خواهد داشت
یکی از مهمترین مزایای ری اکت نسبت به سایر فریمورکهای جاوا اسکریپت این است که به شما این امکان را میدهد تا کدها را در سمت سرور کامپایل کنید. بهاینترتیب موتورهای جستجو سایتتان را راحتتر پیدا میکنند و این موضوع مطمئناً به موفقیت سئوی سایتتان کمک میکند.
9. با React کار حرفهایتری ارائه خواهید کرد
اگر میخواهید کدهایی که برای عملیات برنامهنویسیتان استفاده میکنید همگی به زبان جاوا اسکریپت باشد، پس بهتر است از فریم ورک ری اکت استفاده کنید. چراکه تمام اجزای این کتابخانه با زبان جاوا اسکریپت طراحی شده است.
10. با ری اکت خطاهایتان را راحتتر پیدا میکنید
اگر سابقه برنامه نویسی داشته باشید، حتماً در طول کار با این پرسش مواجه شدهاید: «یک جایی یک مشکلی هست، اما کجا؟!». یکی از مزیتهای کاربردی فریم ورک ری اکت، خصوصاً برای افراد آماتور، امکان مشاهدهی خطاها در طول عملیات کدنویسی است. شما میتوانید در قسمتی از این کتابخانه شرح تمام خطاهای کدنویسیتان را ببینید! مهمتر اینکه این بخش دقیقاً به شما میگوید که چه خطایی کردهاید یا این خطا در کدام خط وجود دارد!
11. React بکاند را با سرعت بالاتری اجرا میکند
نمیدانم تجربهی کار با سایر کتابخانههای جاوا اسکریپت را داشتهاید یا نه؟ در هر صورت باید بگویم که اغلب این فریمورکها در قسمت بکاند مشکلاتی دارند و بسیار کُند هستند. اما در ری اکت تا حد زیادی این مشکلات رفع شده و کدنویسی را برای برنامهنویسها بیدردسرتر کرده است.
12. React اینترنت کمتری مصرف میکند
از آنجایی که ری اکت به جای DOM مجازی از DOM کلاسیک استفاده میکند، برای همین نیازی نیست که کاربران هر بار کل بخش رابط کاربری را رفرش کنند. بنابراین هنگام کار با ری اکت میتوانید فقط قسمتهای موردنیازتان را رفرش کنید. بهاینترتیب حجم کمتری از اینترنتتان مصرف خواهد شد.
13. در React امکان حذف کامپوننتهای اضافی وجود دارد
در صورت استفاده از ری اکت به راحتی میتوانید کامپوننتهایی را که لازم ندارید حذف کنید تا فضای بیشتری را در اختیار داشته باشید.
محدودیت ها و معایب React JS
همه میدانیم که «گُل بیعیب خداست»! پس دیگر از یک فریمورک چه انتظاری میشود داشت؟! حتی فریم ورک React هم با داشتن یک تریلی مزیت، باز هم چندان بیعیب نیست. برای همین پیش از آنکه خودتان با این حقیقت روبرو شوید، تصمیم گرفتم پا روی دلم بگذارم و معایب React دوستداشتنیام را با شما در میان بگذارم.
• اگر بخواهید برای طراحی اپلیکیشنتان از ریاکت استفاده کنید به ناچار باید از دیگر کتابخانهها و کامپوننتهای موجود هم استفاده کنید. این موضوع باعث میشود سرعت برنامهنویسی یا توسعه کاهش پیدا کند. بنابراین برای پروژههایی که فرصت محدودی دارند، استفاده از ری اکت انتخاب مناسبی نیست!
• ری اکت فقط دارای یک View است، برای همین هم اگر بخواهید بعد از پایان پروژه به سایر فریمورکهای قدیمی متصل شوید، محدودیتها برایتان آشکار میشود. رفع این محدودیتها هم تا حدی زمانبر است.
تا یادم نرفته بگویم: گاهی اوقات ممکن است React تنظیمات مربوط به رابط کاربری را پیچیده کند. به همین دلیل برای انجام پروژههای ساده نیازی به استفاده از چنین ابزار قدرتمندی نیست. همچنین معمولاً توصیه میشود افرادی که دانش زیادی در زمینهی طراحی وب ندارند، بهتر است کارهای پیشرفته را با این فریم ورک انجام ندهند.
تفاوتهای زیرپوستی React JS و React Native
حتماً میدانید که برنامهنویسها معمولاً برای طراحی اپلیکیشنهای قابل اجرا روی سیستمعامل اندروید و IOS به ترتیب از زبان برنامهنویسی جاوا و سوییفت استفاده میکنند. یعنی اگر شما بخواهید یک برنامه را برای هر دو سیستمعامل طراحی کنید، باید به هر دو زبان مسلط باشید. اما خبر خوب اینکه در سال 2015 فیسبوک تحول جدیدی به نام React Native خلق کرد! فریمورکی که به شما این امکان را میدهد تا یک بار با زبان جاوا اسکریپت، کد بنویسید اما دو خروجی بگیرید. یعنی برنامهای که طراحی میکنید در نهایت هم روی پلتفرم اندروید قابل اجراست و هم iOS.
خب برای یک برنامهنویس چه چیزی میتواند از این بهتر باشد؟!
با یک نگاه سطحی ممکن است React Native وReact بسیار شبیه به هم به نظر برسند اما دل ذره را که بشکافید و کمی عمیقتر که نگاه کنید متوجه تفاوتها خواهید شد. در ادامه، این تفاوتها را با هم بررسی میکنیم.
• برای شروع پروژهای که قرار است آن را با React js انجام دهید، معمولاً به یک زیرشاخه (bundler) مثل Webpack نیاز پیدا خواهید کرد اما در React Native به استفاده از هیچ زیرشاخهای نیاز ندارید.
• اغلب کامپوننتهای React Native به HTML قابل ترجمه هستند. از آنجا که React Native برای طراحی اپلیکیشن از HTML استفاده نمیکند، به همین دلیل کتابخانههای کاربردی در React js برای ری اکت نِیتیو کارایی ندارند.
• در React js برای متحرکسازی عناصر (انیمیشن) به افزونههایی مثل React CSS Transition Group احتیاج دارید اما در React Native میتوانید به سادگی از APIهای موجود در خودِ فریمورک استفاده کنید.
• در React Native نسبت به React js ابزارهای برنامهنویسی بیشتری برای طراحی اپلیکیشن در اختیار دارید.
تا یادم نرفته بگویم: React Native فریمورکی است که از React بهعنوان کتابخانهی زبان جاوا اسکریپت استفاده میکند. برای همین قبل از شروع کار با React Native باید به مفاهیم و اطلاعات پایهی ری اکت مسلط باشید.
چگونه آموزش React را شروع کنیم؟
اگر شما هم مثل من واله و شیدای ری اکت شدهاید، پس وقتش رسیده که بهترین منابع یادگیری ری اکت را به شما معرفی کنم. منابعی معتبر که توسط برنامهنویسهای حرفهای تهیه شدهاند. خوب است بدانید منابعی که قصد دارم در ادامه معرفی کنم هم برای آماتورها مفیدند و هم حرفهایها.
1) Intro to React- Reactjs.org
اگر مبتدی هستید میتوانید برای شروع یادگیری React js از این منبع آموزشی استفاده کنید. یک بازی تعاملی که پایتان را به میدان آموزش ری اکت باز میکند. شما با این روش، مقدمات لازم برای ساخت یک برنامه با استفاده از کتابخانهی ری اکت را یاد میگیرید.
البته قبل از اینکه بازی را شروع کنید توضیحات سایت را بخوانید. توضیحاتی که حسابی برایتان از چموخم کار میگوید تا با اطلاعات کافی بازی و یادگیری را شروع کنید.
2) Learn React.js in 5 minutes – Freecodcamp.org
عنوان این مقالهی آموزشی بیشتر شبیه این شعارهای تبلیغاتی است که همیشه بهمان توصیه میکنند گولشان را نخوریم! اما توصیه میکنم گول این یکی را بخورید! چون این مقاله یک منبع آموزشی کاملاً مختصر و مفید است که مفاهیم مقدماتی ری اکت را به خوبی به مبتدیانِ عجول یاد میدهد.
3) Learn ReactJS: Part I – Codecademy.com
برای استفاده از این آموزش رایگان، فقط کافی است که در سایت codecademy عضو شوید و با کلیک روی دکمهی استارت قدم به دنیای ری اکت بگذارید. در این دوره آموزشی شما با اجزا و نحوهی تعاملشان در JSX آشنا میشود و علاوه بر مفاهیم مقدماتی، مفاهیم پیشرفتهی ری اکت را هم یاد میگیرید.
4) React for Beginners – Reactforbeginners.com
فیلمهای آموزشی این سایت برای کسانی که در آغاز راه یادگیری ری اکت هستند، بسیار مفید است. 29 فیلم آموزشی که مرتب بهروز میشوند. البته این فیلمها رایگان نیستند اما مطمئناً هزینه کردن برای خریدشان ارزشش را دارد.
5) React 101 – Ihatetomatoes.net
اگر در زمینهی ری اکت سطح دانش متوسطی دارید و به اطلاعات و مفاهیم پایهی ری اکت مسلط هستید، پس این درسها برایتان مفید خواهد بود. خبر خوب اینکه این درسها رایگان هستند و شما میتوانید بدون هیچ هزینهای از سطح متوسط به پیشرفته جهش کنید.
6) Learn React By Itself- Reactarmory.com
این دوره آموزشی دو مزیت دارد؛ اول اینکه رایگان است و هم بهطور کامل مبتی بر مرورگر است. بنابراین به نصب هیچ ابزاری نیاز پیدا نخواهید کرد. مزیتی که کمک میکند در ابتدای راه یادگیری کمتر سردرگم شوید.
7) Learn React Track – Teamtreehouse.com
شما با عضویت در سایت Teamtreehouse میتوانید از 10 ساعت آموزشی مفید استفاده کنید. آموزشی اصولی که چگونگی ساخت برنامههای React و Redux را بهخوبی به شما یاد میدهد.
حالا بد نیست در ادامه هم چند منبع آموزشی مفید هم برای یادگیری React Native به شما معرفی کنم.
منابع آموزشی برای یادگیری React native
8) Facebook.com -Introducing React Native
اگر دوست دارید کار با فریم ورک React Native را هم یاد بگیرید، پس چه بهتر که از منابع آموزشی خود فیسبوک استفاده کنید. آموزشی که کمک میکند به اصول مقدماتی ری اکت نیتیو مسلط شوید.
9) Facebook.com – Official React Documentation
اگر دلتان میخواهد با یادگیری نکات و تکنیکهای React Native به زیروبم این فریورک مسلط شوید، باز هم میتوانید از فیسبوک کمک بگیرید. فیسبوک در این صفحه اطلاعات منحصربهفردی را درباره این فریمورک در اختیارتان قرار میدهد.
10) Appacoda.com – React Native Introduction
سایت آپاکودا بهطور تخصصی هر چیزی را که باید دربارهی فریم ورک React Native بدانید به شما آموزش میدهد. این منبع به آموزش نصب و چگونگی استفاده از این فریمورک میپردازد و علاوهبر این شما را بهطور کامل با کامپوننتهای آن آشنا میکند.
11) Ray Wenderlich – Introduction to Apps With Javascript
اگر در حوزهی طراحی سایت فعالیت داشته باشید حتماً اسم ری وندرلیچ به گوشتان خورده و یا ممکن است مقالات آموزشیاش در زمینه IOS را خوانده باشید. اما این لینک شما را به مقالهای دربارهی React Native میرساند. مقالهای که بسیاری از نکات و تکنیکهای لازم را به شما آموزش میدهد.
چگونه در React حرفهای شویم؟
حتماً تا الان متوجه شدهاید که چرا من اینقدر به ری اکت ارادت پیدا کردهام! بگذارید برایتان بگویم که من با یادگیری این فریم ورک چه کارها که نکردم! با یادگیری ری اکت هم توانستم سایتم را نجات بدهم و هم با طراحی یک وب اپلیکیشن، خودم و توانمندیهایم را به برنامهنویسهای اندروید و iOS معرفی کردم!
حالا شاید بپرسید من چه راهی را برای یادگیری انتخاب کردم؟ راستش را بخواهید چند وقتی مشغول مطالعهی مقالات آموزشی بودم. اما مدتی که گذشت فهمیدم سطح یادگیریام هنوز چالههایی دارد که پر کردنش کار یک استاد حرفهای است. این شد که به فکر پیدا کردن یک دورهی حضوری خوب افتادم. در حال حاضر هم به شما دورههای آموزشی بامداد را پیشنهاد میکنم. بامداد کجاست؟ خبر خوب اینکه شما همین حالا وسط بلاگ سایت بامداد ایستادهاید!
مطمئن باشید یادگیری صفر تا صد ری اکت در یک دورهی آموزشی و در کنارش خواندن مقالههای معتبر آموزشی از شما یک برنامهنویس درجه یک خواهد ساخت. پس قبل از اینکه مثل من و سایتم به بنبست برسید خودتان دست به کار شوید و راهتان را هموار کنید. راهی که شما را به بازار کار خوب و یک آینده حرفهای روشن میرساند.