آموزش ریکت قسمت اول برای طراحی سایت

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

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

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

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

ریکت در اصل یک virtual DOM بوجود میاره و به صورت کلی آنچنان تگ های html نمیبینیم.

برای آموزش ریکت در طراحی سایت چه پیش نیازهایی لازم است؟

برای شروع در این دوره باید با مففاهیم زیر به خوبی آشنا باشید 

1. html
2. css
3. js
4. ES6-ES7-ES8

اکما اسکریپت چیست؟

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

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

در ریکت نیز از ES6 نیز استفاده میشود و باید با تعاریف زیر آشنا باشید 

1. کلاس ها
2. Arrow function
3. متغیرها
4. متدها
5. مفاهیم Destructuring
6. ماژول ها
7. دستورات شرطی با Ternary Operator
8. مفاهیم spread Operator

تعاریف کلاس ها در ES6 ریکت

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

 constructor  زمانی که شی مقداردهی اولیه میشود به طور خودکار فراخوانی میشود .

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

به مثال زیر توجه کنید

present() یک متد است 

Model از کلاس car ارث بری کرده است یعنی تمام ویژگی های کلاس والد را دارد و کلمه رزرو شده برای ارث بری  extends است

و متد Super() به کلاس والد اشاره دارد. به واسطه صدا زدن آن در constructor به سازنده والد و همه متد هایش دسترسی پیدا میکند.

تعریف Arrow Function

دو نوع تعریف تابع داریم

1. توابع Regular
2. توابع Arrow Function

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

عملا arrow function ها this ندارند و در صورت استفاده از آن به نزدیکترین regular function  برمیگردد و از چرخه زندگی آنها خارج است

توابع regular قابل فراخوانی هستند و میتوان از new برای آنها استفاده کرد

ولی در توابع arrow function میتوان آنها را فراخوانی کرد ولی شی جدیدی از آنها new نمیشود و نمیتوان ساخت

تعریف متغیرها

در این قسمت نیاز است با دو اصطلاح آشنا شویم 

1. scope
2. Hoisting

اسکوپ به جاهایی گفته میشود که متغیرها قابل دسترسی هستند 

هوستینگ در جاوااسکریپت به معنای آن است که متغیرها یا توابع به بالاترین سطح اسکوپ خودشان جا به جا شوند

در ES6 به بعد سه نوع تعریف متغیر داریم 

1. var
2. let
3. const

var قبل از ES6 تنها راه تعریف متغیر بود 

این متغیرها هم به صورت عمومی و هم در توابع تعریف میشوند اگر به صورت عمومی تعریف شوند در توابع نیز قابل استفاده هستند

ما میتوانیم دوبار یک متغیر را با var تعریف کنیم که همین باعث بوجود آمدن دو نوع دیگر شد .

let به صورت block scope هست . هرچیزی که درون {} قرار میگیرد دارای یک حوزه خاص می باشد و در تعاریف متغیرها با let فقط درون آکولادی که آنرا تعریف کردیم قابلیت دسترسی دارد .

در let میتوانیم دوبار مقداردهی کنیم ولی نمیتوانیم دوبار یک متغیر را تعریف کنیم

و باید قبل از مقداردهی و صا زدن این متغیرها آنها را تعریف کنیم 

const تنها یکبار تعریف و یکبار مقدار دهی میشود

این نکته باید توجه کنید وقتی ابجکتی با const تعریف میشود , آیتم های موجود در ابجکت میتوانند تغیر کنند. این به آن معناست که کل ابجکت نمیتواند جایگزین شود .

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

مفهوم Destructuring در ریکت

توضیح درمورد این مفهوم رو با یک مثال شروع میکنیم 

وقتی میخواهید یک ساندویچ درست کنید آیا همه موارد غذایی و آیتم های موجود رو از یخچال باهم درمیارید؟

یا متناسب با ساندویچ که میخواهید مواد غذایی را از یخچال درمیاورید؟

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

به مثال زیر توجه کنید

jsx چیست؟

به معنای javascript extention یا javascript xml میباشد با توجه به تحقیق هایی که انجام شد هردو مدل قایبل مشاهده بود 

در کل jsx به ما اجازه میدهد که کدهای html را درون ریکت بنویسیم , اینکار به سادگی قابل انجام است

چند نکته مهم در jsx

1. در صورت استفاده از Expressions ها باید از { } استفاده کنید
2. حتما تگ ها را ببندید 
3. اگر از if استفاده میکنید باید آنهارا خارج از jsx تعریف کنید
4. برای استایل دهی و تعریف کلاس هم از className استفاده میشود

ادامه این آموزش را از اینجا دنبال کنید