آموزش ReactJs ( مقدماتی تا پیشرفته )

ری اکت , یک کتابخانه open-source جاوا اسکریپت برای ایجاد رابط کاربری به خصوص برای برنامه های تک صفحه ای است. با ترکیب سرعت و کارایی جاوا اسکریپت با روشی کارآمدتر برای دستکاری DOM، موجب می‌شود تا صفحات وب‌سایت‌ها به‌صورتی سریع‌تر در دسترس قرار بگیرند. ایجاد برنامه های React نیاز به استفاده از کتابخانه های اضافی برای مدیریت state و تعامل با API دارد نمونه مربوط به چنین کتابخانه هایی ری داکس است. با استفاده از ریداکس، State های اپلیکیشن در یک مخزن نگهداری می‌شوند و دسترسی هر کامپوننت به تمامی State ها نیز امکان پذیر است.  

افراد علاقه مند به توسعه و برنامه نویسی فرانت اند می توانند ری اکت را در برنامه نویسان به طور کامل بیاموزند.

قیمت این دوره: رایگانــ
  • مدرس دوره : محمد مطواعی
  • تعداد ویدیوها : 20 ویدیو
  • مدت زمان دوره : 3:43:00
  • سطح دوره : پیشرفته
  • وضعیت دوره : به اتمام رسیده
  • تاریخ آخرین بروزرسانی : 1399/04/25
دوره آموزش مقدماتی Next JS

دوره آموزش مقدماتی Next JS

سلام به ری اکت نویسای عزیز

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

خب همه برنامه نویسای ری اکت میدونن که ری اکت کنار همه خوبی ها و قشنگیایی که داره این مشکل رو داره که رابطش با گوگل خیلی خوب نیست و seo خوبی نداره ینی سایتایی که با ری اکت زده میشن خیلی دیر تر توسط ربات های گوگل ایندکس میشن و توصفحات اول دیرتر میان بالا اینم بخاطر client side rendering بودن ری اکته

Client side rendering ینی چی ؟ ینی تقریبا همه محتواهایی که باید توسط گوگل ایندکس بشن داخل مرورگر کاربر رندر میشن و نه سمت سرور و اینجوری باعث میشه سایتی که ربات گوگل تحویل میگیره یه سایت خالی از محتوا باشه و اینجوری دیگه seo سایت خیلی خوب درنمیاد

اما راه حل چیه ؟ راه حل اینه که ما به عنوان برنامه نویس بیایم و اپمون رو ssr کنیم ssr ینی server side rendering کردن اپ

next js اومده تا این بار سنگین رو ب دوش بگیره این کتابخونه میاد و صفحات سایت مارو یه دور prerender میکنه ینی از قبل جاوااسکریپتایی ک نوشتیم رو رندر میگیره و به کاربر یه صفحه html  پر از محتوا تحویل میده و زحمت کاربر رو کم میکنه اینجوری سرعت لود سایت هم خیلی بیشتر میشه و پروفورمنس بالا میره.

ما تواین آموزش نکس جی اس رو از صفر شروع میکنیم و کامل مفاهیم بیسیک اون رو پوشش میدیم بعد که مفاهیم تموم شدن میریم سراغ اینکه دانشمون رو تثبیت کنیم و سایت کافه بازار رو با next js طراحی میکنیم سایتی که درحال حاضر با فریم ورک ویو جی اس زده شده و با کتابخانه همتای next js ینی nuxt js ssr شده

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

لیست صفحاتمون به این صورته

صفحه فیلم و سریال

صفحه بازی ها

صفحه برنامه ها

لیست دسته بندی های بازی ها و برنامه ها

و صفحه جزییات هر برنامه که شامل اسکرین شات های برنامه و نظرات اون میشه

دو سه تا صفحه استاتیک ساده درباره ما و تماس با ما هم اضافه کردیم سایتمون همه جوره کامل باشه

بعد ازین دوره شما قادر خواهید بود با کتابخونه ری اکت و به لطف next js انواع لندینگ ، سایت های محتوایی و واکنش گرا ، همینطور سایت های اشتراک ویدیو و اشتراک عکس بسازید و به راحتی محتوای شما تو نتایج گوگل به نمایش گذاشته بشه

اگرم هنوز دقیق متوجه نشدی که next js  چیه و به چه کارت میاد میتونی 4 5 قسمت اول دوره که رایگان هست رو ببینی بعدش روی ثبت نام دوره فک کنی

اوکی توضیح دیگه کافیه بریم سراغ مباحث فنی دوره

تو دوره میبینمتون

پیش نیاز این دوره آشنایی با ری اکت میباشد




فهرستـــ ویدیوها

مدت زمان دوره 3:43:00
  • با مشاهده آنلاین جلسات در سایت ، هزینه اینترنت شما به صورت نیم بها محاسبه خواهد شد.

1
  • معرفی دوره

00:03:30

معرفی دوره

2
  • آشنایی با مفهوم CSR و SSR

00:17:00

تو این قسمت یاد میگیریم که csr , ssr چین و روش کار هرکدوم به چه شکله

3
  • کانفیگ پروژه جدید Next JS

00:10:30

تو این قسمت یه پروژه next js رو ایجاد میکنیم و با بخش های مختلفش اشنا میشیم

4
  • صفحات در Next JS

00:09:00

تو این قسمت یادمیگیریم چطوری با صفحات کار کنیم و صفحه جدید ایجاد کنیم

5
  • جابجایی بین صفحات

00:13:00

تو این قسمت یاد میگیریم چطور میشه بین صفحات جابجا شد

6
  • Dynamic Routing

00:17:00

تو این قسمت یاد میگیریم چطور route های داینامیک بزنیم بین صفحات

7
  • کار کردن با asset ها

00:05:30

تو این قسمت یاد میگیریم چطور میتونیم عکس و فایل به پروژمون اضافه کنیم

8
  • Meta data in Next JS

00:06:30

تو این قسمت یاد میگیرم با متا دیتا هایی مث title تو صفحاتمون کار کنیم

9
  • استایل دهی گلوبال

00:09:10

تو این قسمت استایل دهی به شیوه گلوبال رو یاد خواهیم گرفت

10
  • استایل دهی کامپوننت بیس

00:09:00

تو این قسمت به کامپوننت هامون استایل میدیم بدون اینکه استایل ها باهم به تداخل بخورن

11
  • مدیریت تم با استفاده از کتابخانه متریال

00:19:30

تو این قسمت کتابخونه متریال رو به پروژه اضافه میکنیم و یک تم واحد رو به پروژه میدیم

12
  • لیوت کلی پروژه

00:14:30

تو این قسمت یاد میگیریم چطور میشه ی لیوت کلی واسه اپمون داشته باشیم

13
  • فلسفه Prerendering در در Next JS

00:19:00

تو این قسمت حسابی در مورد prerendering تو next js صحبت میکنیم

14
  • prerendering به روش static generation - قسمت اول

00:18:30

تو این قسمت ب معرفی روش اول prerendering همراه با کد زنی و مثال میپردازیم

15
  • prerendering به روش static generation -قسمت دوم

00:13:00

تو این قسمت ب معرفی روش اول prerendering همراه با کد زنی و مثال میپردازیم

16
  • Prerendering به شیوه SSR

00:09:00

تو این قسمت روش دوم prerendering که همون ssr هست رو یاد خواهیم گرفت

17
  • تلفیق Static Generation و Client Side Data fetch

00:13:30

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

18
  • دیتا فچ با استفاده از SWR

00:10:30

تو این قسمت با swr اشنا میشیم و یاد میگیریم چطور میشه باهاش دیتافچ رو انجام داد

19
  • جمع بندی دوره و معرفی و نظرسنجی برای دوره پیشرفته

00:06:00

دوستان حتما در نظر سنجی انتخاب پروژه دوره پیشرفته شرکت کنید 1 - پیاده سازی پروژه کافه بازار در دوره پیشرفته 2 - پیاده سازی پروژه تاپ لرن در دوره پیشرفته

20
  • سورس کلی دوره

00:00:00

سورس رو میتونید ازینجا دانلود کنید

دوره های دیگر مدرس

مشاهده همه دوره ها

نظرات کاربران در رابطه با این دوره

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