دوره جامع فرانت اند | پیشرفته و پروژه محور

Name: دوره جامع فرانت اند | پیشرفته و پروژه محور - ساخت و بررسی ساختار فولدر استراکچر یک پروژه CRA
Uploaded: 2025-08-16T15:17:52.959246+00:00
Duration: 25 min
Channel: پوریا باباعلی
Description: با هم ساختار Create React App رو بررسی میکنیم

دوره جامع فرانت اند | پیشرفته و پروژه محور

فهرست پخش

فصل 1

معرفی و پیش نیاز های این دوره

معرفی دوره

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

نصب nodejs با nvm و بررسی دستورات nvm

بررسی ساختار یک پروژه Nodejs بیس و استراکچر

بررسی روند مدرن شدن وب (‌ چی شد که اینطور شد !‌ )

بررسی ساختار پروژه های مبتنی بر React

بررسی Vite و ساخت اولین پروژه React ایمون باهاش !

فصل 2

دوره جامع کتابخانه ReactJs

بررسی ساختار داخلی ReactJs و اینکه چطوری کار میکنه !؟

ساخت و بررسی ساختار فولدر استراکچر یک پروژه CRA

ساخت و بررسی فولدر استراکچر یک پروژه Vite و مقایسه با CRA

مفهوم Component در React به چه معناست؟

مفهوم App.jsx و main.jsx و کامپوننت های اصلی در React

بررسی FunctionalComponent و ClassComponent ها در React

بررسی جامع JSX در React: نکات تکمیلی و تکنیک‌های پیشرفته برای توسعه‌دهندگان

استیت (State) در کامپوننت‌ها

بررسی ساختار State و قوانین آن در React + مینی پروژه Counter

پراپس در ری‌اکت چیست؟ آموزش کامل Props در React با مثال و کاربردها

آموزش لیست‌ها و key در ری‌اکت | نحوه نمایش لیست‌ها در React با مثال عملی

کاندیشنال رندرینگ در ری‌اکت | آموزش شرطی‌سازی در React با مثال‌های کاربردی

آموزش هوک‌های پرکاربرد ری‌اکت | useEffect و useRef در React با مثال‌های عملی

فصل 3

آموزش تایپ اسکریپت مقدماتی

تایپ اسکریپت چیه و چرا بهش احتیاج داریم !؟

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

آموزش Type Annotation در تایپ اسکریپت

آموزش تایپ any در typescript

آموزش tupels در Typescript

آموزش Enum در تایپ اسکریپت

مقدمه‌ای جذاب بر توابع در TypeScript | درک پایه‌ای از Functionها

تسلط بر پارامترها و محدوده‌ها در توابع | TypeScript پیشرفته

کار با اشیا در TypeScript | ساختاردهی حرفه‌ای داده‌ها

آشنایی با Type Alias در TypeScript | ساخت نوع‌های دلخواه خودت!

قدرت Interface در TypeScript | قراردادهایی برای کد تمیز و قابل توسعه

Union Types در TypeScript | انعطاف و ایمنی هم‌زمان!

Literal Types در TypeScript | محدود کردن مقادیر برای کد بی‌نقص

فصل 4

پروژه جلاتو هاوس : بستنی فررو با طعم ReactJS

پیش‌نیازهای آغاز پروژه جلاتو هاوس و معرفی ساختار یک تیم استارتاپی حرفه‌ای

فیگما و دیزاین‌سیستم پروژه جلاتو هاوس

تقدیر از دلینو، جلاتوهاوس و آقای وثوقی در پروژه آموزشی جلاتو هاوس

شروع ساخت پروژه با Vite و انتشار ریپوزیتوری روی گیت‌هاب

نصب و کانفیگ Tailwind همراه با PostCSS و نحوه استفاده آن در پروژه ری اکتی

اضافه کردن CI/CD به پروژه و دپلوی روی Vercel

طراحی ساختار Layout در اپلیکیشن جلاتوهاوس

طراحی ساختار دکمه‌های جلاتوهاوس و استفاده از دیزاین پترن Factory در ساخت کامپوننت – قسمت اول

طراحی ساختار دکمه‌های جلاتوهاوس و پیاده‌سازی با دیزاین پترن Factory – قسمت دوم (کدنویسی)

تکمیل پیاده‌سازی دکمه‌های جلاتوهاوس و بهینه‌سازی ساختار Factory – قسمت سوم

افزودن ویژگی‌های رنگ و سایز به دکمه‌ها با استفاده از clx برای مدیریت کلاس‌ها

ریفکتور کامپوننت Button با افزودن رنگ‌های سفارشی و رعایت اصول Component Composition

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

ساخت بنر سفارش می‌پذیریم در پروژه جلاتو هاوس

ساخت اسلایدر و کروسل به وسیله پکیج swiper در پروژه ری اکتی

اضافه کردن آیکن های کاستوم به پروژه ری اکتی به وسیله SVGR از صفر تا صد

اضافه کردن سکشن Information و دیزاین کردن Modal شعبات و محدوده دسترسی پیک

تکمیل سکشن Information و دیزاین نهایی

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

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

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

دیزاین سکشن تب در موبایل - قسمت ۱

دیزاین سکشن تب در موبایل قسمت پایانی