آموزش مقدماتی React

دوره مقدماتی React js

دوره رایگان React برای آشنایی هرچی بهتر با کتابخونه محبوب React هست. در این دوره React js تمرکز ما روی مباحث Fundamental و داستان اصلی react هستش. این دوره کاملا رایگان برای اون دسته از دوستانی که تو انتخاب ری اکت شک دارن خیلی مناسبه و با گذروندن این دوره میتونن مسیر خودشونو انتخاب کنن که آیا ریاکت مناسبشون هست یا نه. در این دوره React کاملا با ساختار و معماری این کتابخونه آشنا میشید و میفهمید که جاوااسکریپت چه نعمت بزرگی برای برنامه نویسا و توسعه دهنده های وب است. کتابخونه React  یکی از سه کتابخونه و فریمورک معروف جاوااسکریپت برای front-end محسوب میشه، یعنی از بین React و Vue و Angular در حال حاضر بیشترین محبوبیت جهانی و بهترین بازارکار در ایران رو داره.

React چیه؟

react کتابخونه ای که سال ۲۰۱۳ توسط شرکت قدرتمند facebook ساخته شده و به تعبیر وبسایت رسمی react یعنی reactjs.org ری اکت یه کتابخونه جاوااسکریپتی برای ساخت ظاهر و Interface وبسایت ها و اپلیکیشن ها استفاده میشه. البته بحاطر بزرگی و امکانات منحصر به فرد این کتابخونه خیلی از وبسایت ها ایرانی و خارجی بهش فریمورک هم میگن و همیشه با فریمورک های Angular و Vue مقایسه میشه در ادامه دربارش صحبت کنیم چرا به reactjs فریمورک میگن. پس اگه جایی شنیدید که من یا دوستان به ‌react میگیم فریمورک تعجب نکنید چون امکانات React خیلی خیلی فراتر از یه کتابخونه سادس. حالا فاز اصلی react چیه؟ react یه کتابحونه Component base هست. حالا کامپوننت (component) چیه؟ شما در نظر بگیرید که هر سایت یه سری قسمت مختلف داره مثل کل سایت، هدر، فوتر، کامنت و… . هر کدوم از قسمت ها میشه یه کامپوننت. پس ما یه کامپوننت اصلی داریم که خودش از کامپوننت های دیگه تشکیل شده مثل کامپوننت کامنت و خود کامپوننت کامنت از یه سری کامپوننت کوچیک تر به اسم کامنت هر کاربر تشکیل شده است که در ادامه تو ویدئوهای کامل  توضیح دادم با مثال که داستان چیه و اصلا نگران نباشید و گیچ نشید.

مزایای React

• سینتکس بسیار ساده و تشکیل شده از جاوااسکریپت html یا همون JSX

• ساخت DOM مجازی

• دیباگ ساده و معماری قوی و قابل فهم

• ساخت یک سایت کامل با کامپوننت های کوچک

• بالا بردن سرعت سایت با تک صفحه شدن سایت یا spa

• سرعت بسیار بالا موقع render گرفتن کامپوننت ها

• کتابخونه React native برای ساخت اپلیکیشن های Android و IOS

• یادگیری ساده در چند ساعت

• بازار کار عالی

مزیت اصلی Reactjs

به نظر مزیت اصلی و جالب React که سبب محبوبیتش شده ساخت وبسایت های Single Page Application یا SPA هست. یعنی چی؟ به زبان ساده بگم React برای ما DOM مجازی میسازه و برای تغییر صفحات و المان های صفحه فقط View مد نظر و عوض میکنه و دیگه کل سایت از اول Render نمیشه و فقط کامپوننت مورد نظر تغییر میکنه. برای درک بهتر این موضوع میتونید به سایت رسمی Reactjs.org مراجعه کنید. میبینید که با کلیک روی هر منو بدون اینکه صفحه Reload بشه، فقط اون قسمت ها که لازم باشه تغییر میکنه و قسمت های دیگه مثل هدر سایت یا ساید بار تغییر نمیکنه و همین قضیه باعث میشه سرعت سایت ما به شدت افزایش پیدا کنه. برای مثال ایرانیش هم میتونید به سایت divar.ir مراجعه کنید که میبینید بعد از کلیک روی هر آگهی بدون اینکه صفحه  و رفرش بشه و شما منتظر لود شدن سایت بشید، به سرعت آگهی مدنظر به شما نمایش داده میشه و خبری از لود شدن صفحه نیست.

به بهشت React خوش آمدید!

چرا باید فریمورک یا کتابخونه یاد بگیریم؟

از موقعی که با css آشنا شدید قطعا اسم bootstrap به گوشتون خورده و تو همه آگهی های استخدام front-end شما میبینید باید یه کتابخونه مثل bootstrap بلد باشید. خب ممکنه بگید من همون ویژگی های bootstrap رو با css pure پیاده سازی میکنیم. اما وقتی با کتابخونه کار میکنید اول از همه سرعت کدنویسی شما جند برابر میشه و نیازی به نوشتن کلاس های اولیه نیست و نکته مهم تر کدهای شما طبق معماری کتابحونه توسعه داده میشه و نفر بعد شما یا در تیم شما کامل از کدها و کلاس های شما سر در میاره و نباید بشینه دونه دونه کلاس های شمارو بخونه و همین دلیل باعث میشه شرکت ها اصرار به کار روی کتابخونه ها دارن. React هم دقیقا همینه و در ۸۰ درصد آگهی های استخدامی javascript در شرکت ها و تیم ها میبینید که شما باید از کتابخونه ای مثل React بلد باشید. پس برای استخدام به عنوان برنامه نویس جاوااسکریپت باید React یاد بگیرید!

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

خب اول از همه این تفکر اشتباه که فریمورک مجموعه ای از کتابخونه هاس رو بریزید دور. کتابخونه یا Library مجموعه ای از کلاس ها، متدها و ماژول هاست که هر زمانی نیاز داشته باشیم به کدهامون اضافش میکنیم و یه جورایی به ساده سازی و ساختار بندی کدها کمک میکنه. و یه سری کتابخونه built-in مثل math که هر جا خواستی مثلا اعمال ریاضی (ماکسیمم، مینیمم، رند کردن، اعداد رندوم، قدر مطلق) رو میتونی پیاده کنی. در واقع موقع کار با کتابخونه این شمایی که مشخص میکنی کجا باید از کدها و متدهای کتابخونه استفاده کنی .اما داستان فریمورک فرق داره.

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

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

حالا چرا به React فریمورک هم میگن!