مقدمه آموزش react

با سلام

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

حالا میخواهم به شما بگویم که اصلا react js چیست و چه کاربردی دارد؟

ابتدا به سایت http://reactjs.org/ مراجعه کنید این سایت یک سایت مرجع برای تمام کسانی است که قصد دارند از این کتابخانه برای توسعه سمت فرانت اند وب سایت خود استفاده کنند.

دقت کردین؟ گفتم کتابخانه.

اگر به سایت react مراجعه کنید در بخش هدر سایت واژه‌ای بصورت زیر نوشته شده است:

React به گفته فیسبوک (شرکت سازنده آن):

React a JavaScript library for building user interfaces

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

نحوه کارکرد این کتابخانه

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

این کتابخانه سرتاسر مربوط به frontend می‌باشد و کاری به بخش سمت سرور ندارد و نیازی به کامپایل شدن کد سمت سرور ندارد.

برای لود دستورات react باید مرورگر سمت کاربر وارد عمل شود تا ابتدا react را اجرا سپس نتیجه را بر روی مرورگر نمایش دهد.

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

دقت کنید که React یک کتابخانه است نه فریم ورک.

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

از آنجایی که React یک کتابخانه است بنابراین روی مرورگر کاربر کار می کند و سمت سرور اجرا نمی شود. این مسئله باعث می شود که همه چیز در react بسیار سریع باشد و نیازی به انتظار برای پاسخ سرور نداشته باشیم. معمولا برنامه های React آنقدر سریع هستند که ترکیب آن ها با یک سرور خوب نتیجه ای مانند اپلیکیشن های موبایلی را می دهد!

منظور از Ui چیست؟

UI به زبان بسیار ساده یعنی چیزهایی که کاربر می بیند (دکمه ها، تصاویر، فرم ها و…) و React از عناصری به نام component (به معنی جزء یا مولفه) برای ساختن UI استفاده می کند. Component یعنی یک قسمت از یک سایت!

چرا باید وب سایت ها را به صورت اجزاء جداگانه (component) در نظر بگیریم؟

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

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

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

کامپوننت های React انواع خاصی دارند اما در ساده ترین حالت آن ها چیزی جز یک تابع جاوا اسکریپتی نیستند!

نکته: حرف اول نام توابع شما باید حتما بزرگ باشد؛ این موضوع از ملزومات React است.

بنابراین می توانیم برای شروع بنویسیم:

حتما این کد برایتان عجیب است! انگار HTML را در جاوا اسکریپت نوشته ایم. این syntax خاص JSX نام دارد.

علت استفاده از این کتابخانه؟

اگر هر توسعه دهنده ای قصد داشته باشد که وب اپلیکیشن (وب سایت) خود را بصورت تک صفحه (single page) و در سمت کاربر ایجاد کند می‌تواند از کتابخانه react استفاده نماید.

در گذشته و حتی همین حالا استفاده از صفحات متعدد برای طراحی وب سایت ها مورد استفاده قرار می‌گرفت. راه اتصال صفحات بهم با استفاده از تگ a و خصوصیت href مربوط به html صورت میگرفت.

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

البته روش هایی برای افزایش لود صفحه وجود دارد و آن این است که فایل های css, js را کش کنیم. اما وقتی react وجود دارد چرا کش کردن؟

و اما سایت تک صفحه ای…

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

در صورت کلیک مشاهده می‌کنیم که صفحه موردنظر لود نمی شود و در کسر ثانیه صفحه جدید نمایش داده میشود.

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

برخی از سوالات شما عزیزان در هنگام کار کردن با Reactjs

آیا این آموزش پیش نیاز دارد؟

بله، برای شرکت در این سری باید با HTML و CSS و جاوا اسکریپت آشنا باشید. از بین این سه مورد، جاوا اسکریپت از همه مهم تر است و منظورمان از آن نسخه ES6 (و شاید بعضا ES7) می باشد.توجه کنید که آشنایی متوسط با جاوا اسکریپت ES6 برای این سری کافی است و به مهارت بالا نیازی ندارید.

آیا این سری آموزش کامل است؟

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

این سری برای چه کسانی طراحی شده است؟

این سری مخصوص این دسته از افراد است:

• افرادی که می خواهند تازه با react شروع کنند و برنامه های بسیار سریع جاوا اسکریپتی بنویسند.
• افرادی که به دنبال کار می گردند. (react یکی از بزرگترین بازارهای کار را در دنیا و حتی ایران دارد)
• افرادی که می خواهند دانش توسعه خود را ارتقاء بدهند و پا به عرصه جهانی بگذارند.

آیا از ویرایشگر خاصی برای کدنویسی استفاده می کنید؟

ما در این سری از VSCode (و بعضا برخی از ویرایشگر های دیگر) استفاده می کنیم اما شما می توانید از هر ویرایشگر دیگری نیز استفاده کنید.