احسان گازار

برنامه نویس، مدرس، بلاگر و صخره نورد

دوره آنلاین React JS پیشرفته

دوره آنلاین React JS پیشرفته

طول دوره: بیش از ۱۲ ساعت

تعدا ویدئو‌ها: بیش از ۸۰ ویدئو

بعد از پیشرفتی که در دوره React مقدماتی از دانشجویان دیدم، بیش از پیش علاقه‌مند شدم که دوره‌ای را به عنوان React پپیشرفته برگزار کنم.

مشخصا FrontEnd تنها به React ختم نمی‌شه و تکنولوژی‌های زیادی کمک می‌کنند تا یک وب‌سایت حرفه‌ای برنامه‌نویسی شود.

دوره‌ی پیشرفته با هدف معرفی و کار با ابزار‌های مختلف ضمن برنامه‌نویسی چندین پروژه متعدد قرار هست به دانشجویان کمک کند تا بهتر و بیشتر تکنولوژی‌ها را در کنار همدیگر قرار دهند و یک وب‌سایت حرفه‌ای را برنامه نویسی کنند.

مطمئنا اطلاعاتی که در این دوره عرضه می‌شود در حد دانش یک Senior FrontEnd Engineer هست و تنها برای داشتن این شغل در یک شرکت شما لازم است تا به این تکنولوژی ها پروژه‌های متعددی را برنامه‌نویسی کنید.

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

در این دوره از Eslint, EditorConfig و Prettier شروع می‌کنم که محیط یک پروژه و ابزار‌های کمکی هستند و بعد بیشتر و عمیق تر وارد React و فریم‌ورک‌هایی مثل Gatsby و NextJs می‌شوم.

سپس بیشتر به Server Side Rendering می‌پردازم و با Restful API ها و GraphQL Endpoint ها پروژه‌هایی را برنامه نویسی میکنم.

پیچیدگی مطالب و میزان محتوایی که در این دوره عرضه می‌شود بسیار زیاد است و لازم هست در هر کدام از این ویدئو ها تمرکز بیشتری کرد.

مطئمنا بخش رفع ایرادات و سوالات پیش‌امده برای دوره کمک بیشتری خواهد کرد که یادگیری بهتری داشته باشید

سوالات متداول:

  • چه پیش‌ نیازی برای شرکت در دوره لازم است؟

اگر با React کار کرده اید، یا FrontEnd Developer هستید این دوره برای شماست، دانش شما را در حد یک FrontEnd Engineer عالی بالا خواهد برد و سپس نمونه‌کار‌های شما می‌توانند اثباتی از دانش شما برای کاریابی یا ارتقاء شغلی باشد.

فرانت اند با سرعت زیادی تغییر می‌کند، ابزار‌های جدیدی هر روز ارائه می‌شوند و من مطمئن خواهم شد که این دوره همچنان آپدیت بماند.

  • چرا این تکنولوژی‌ها انتخاب شده‌اند؟

من سال‌هاست که به بخشی از کارم FrontEnd هست و این ترکیب تکنولوژی‌هایی است که در حال حاضر استفاده میکنم. شاید بسیاری از فرصت های شغلی این همه ابزار برای یادگیری لازم نداشته باشند، ولی در ازای دوره‌ای که برگزار میکنم هدف کامل بودن هست و تمام دانشی که مرتبط با React پیشرفته هست در این دوره ارائه شده و با تغییر تکنولوژی‌ها و سوالات دوستان در حال آپدیت هستم

پروژه‌ها

رای این که بعد از دیدن ویدئو ها مطمئن بشیم که به خوبی محتواها رو به خاطر سپردید و میتونین استفاده کنین لازم هست پروژه‌ی عملی ای انجام بدین.


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


پروژه‌هایی که در طول دوره انجام شده‌اند:

پروژه Remote Jobb

پروژه سایت فارسی شخصی

  • پروژه فروشگاهی برای یادگیری WebPack
    (در طی دوره پروژه‌ای فروشگاهی تعریف می‌شود و با استفاده از Webpack کار Bundle سازی آن را انجام میدهیم.)

پروژه فروشگاهی برای یادگیری WebPack

  • پروژه‌ی ساده برای یادگیری PWA
    (در طول این پروژه یاد میگیرید چطور با Service Worker ها کار کنید و یک PWA بسازید)

    پروژه‌ی ساده برای یادگیری PWA

محتوای دوره

  • مقدمات

  • چه تکنولوژی‌ها در این دوره یاد خواهیم گرفت؟ از Eslint، Prettier, GraphQL,Webpack, Testing
  • بررسی پشت صحنه‌ی تکنولوژی‌های استفاده شده در Create React App و تنظیمات پیش‌فرض
  • Eslint چیست و چگونه از آن استفاده کنیم
  • استفاده از editorconfig در پروژه
  • Prettier چیست و چگونه از آن در کنار ESlint استفاده کنیم
  • کار با NextJs

  • معرفی NextJs و نصب آن و بررسی کارهای پشت زمینه آن
  • چگونه در NextJs بتوانیم صفحات مختلف داشته باشیم و Routing برای آن‌ها پیاده‌سازی کنیم
  • Server Side Rendering یا SSR چیست و چه کاربردی دارد
  • کار کردن با SSR و ویرایش HTML و داشتن Layout برای پروژه
  • کار با CSS و روش‌های مختلف Style دادن به پروژه

  • معرفی و مرور CSS و LESS و SASS و روش کار با آن
  • معرفی و نحوه‌ی کار با CSS MODULE
  • معرفی و کار با CSS in JS
  • کار با کتابخانه StyledComponents
  • کار با کتابخانه Emotion
  • شروع پروژه Remote Jobb برای پیاده‌سازی تمامی دانش‌های این ‌دوره
  • معرفی Design Pattern ها و Best Practice ها در پروژه های React

  • معرفی ساختار Components و Containers یا کامپونتت‌های ساده و باهوش!
  • معرفی ساختار HOC یا Higher Order Components
  • برنامه نویسی یک Custom Hook و معرفی این ساختار
  • شروع پیاده‌سازی یک Design System و برنامه ‌نویسی کامپوننت‌های Basic و Reusable پروژه

  • پیاده‌سازی صفحه لاگین و کامپوننت‌های Input و ‌Button
  • چگونه در پروژه Theming را پیاده‌سازی کنیم
  • چگونه به پروژه Font اضافه کنیم و Global Styling داشته باشیم
  • پیاده‌سازی Typography در پروژه
  • تعریف Design System چیست و چه راه‌کارهایی برای آن وجود دارد
  • معرفی پروژه Storybook JS
  • معرفی پروژه Styleguidist و روش پیاده‌سازی آن و استفاده از MDX Format ها
  • پیاده‌سازی Design System برای پروژه Remote Jobb
  • پیاده‌سازی Routing و استفاده از Next Js Route

  • پیاده‌سازی Form ها و Routing بین آن‌ها
  • استفاده از Link و پیاده‌سازی Hyperlink Component
  • کار با Redux

  • معرفی State Management و آشنایی با Redux
  • راه‌اندازی و نصب Redux
  • کار با API ها در Redux
  • کار و نصب Redux Thunk برای راه‌اندازی Asynchronous Calls
  • پیاده‌سازی fetchUrl
  • پیاده‌سازی state های مختلف برای صدا کردن API ها, LOADING, STARTED و FAILED
  • صدا کردن API در SSR برای NextJS با Dispatch در Redux
  • پیاده ‌سازی و معرفی Testing

  • معرفی Testing و انواع آن
  • معرفی و برنامه‌نویسی Snapshot Testing
  • نوشتن Testingبرای DOM و کارکردن با صفحه
  • روش Deploy کردن پروژه

  • پروژه را در git قرار دهیم و در Vercel روی دامنه قرار دهیم
  • معرفی Restful APIs

  • تعریف Restful API ها و نحوه‌ی کار کردن با آن‌ها
  • متصل کردن API ها Register و Login به App و کار با Swagger یا Postman
  • درست کردن صفحه مختص و routing در NextJs به اضافه ارسال Request برای دریافت از API
  • کار با Cookie و برنامه نویسی حالت های Authenticated در پروژه با SSR

  • معرفی کتاب‌خانه Cookie Universal و کار کردن با Cookie ها
  • کار کردن با Cookie و Dispatch کردن در سمت سرور و انتقال State به کلاینت ساید
  • کار کردن با Cookie ها و بررسی Log Out کردن با کلیک روی خروج یا به صورت اتومات
  • معرفی و کار با GraphQL

  • معرفی GraphQL و کتاب‌خانه‌های Client Side کار با آن
  • چگونه با Documentation برای GraphQL کار کنیم و معرفی GraphiQL
  • برنامه نویسی با Apollo Client
  • کار با Apollo Client و ApolloProvider و آشنایی با هوک useQuery
  • ارسال POST به API ها و آشنایی با useMutation
  • کار کردن با Polling و آپدیت کردن صفحه با Refresh
  • کار کردن با Gatsby JS

  • آشنایی با پروژه Gatsby JS
  • چطور در Gatsby JS یک پروژه جدید را شروع کنیم
  • برنامه‌نویسی بلاگ خودم یا fa.ehsangazar.com با پروژه Gatsby
  • آموزش Webpack

  • معرفی Webpack و چرایی استفاده‌ از آن
  • شروع برنامه‌نویسی با Webpack برای یک پروژه‌ ساده
  • برنامه نویسی Webpack در یک پروژه‌ی ساده React
  • پیاده‌سازی محیط و تجربه‌ی Development با Webpack Dev Middleware و Webpack Dev Server
  • پیاده‌سازی و معرفی Babel Loader برای JSX
  • پیاده‌سازی Webpack برای یک پروژه‌ی بزرگ همراه با CSS Loader
  • استفاده از Mode و Webpack Clean Plugin و contentHash در تنظیمات Webpack
  • پیاده‌سازی Terser برای مینیفای کردن JS ها و معرفی Webpack DefinePlugin
  • پیاده سازی Code Splitting و Hot Module Reloading یا HMR در Webpack
  • معرفی و پیاده سازی یک Progressive Web App یا PWA

  • PWA چیست و چه نکاتی می‌بایست برای پیاده سازی آن رعایت شوند
  • معرفی و کار با سایت‌های CanIUse و BrowserStack
  • معرفی PostCSS و AutoFixer و آشنایی با روش استفاده
  • ثبت کردن Service Worker و تشخیص آنلاین و آفلاین بودن App
  • کار با Notification API ها
  • نصب ServiceWorker, کنترل Fetch ها و کار با Cache API
  • لینک Repository پروژه و مراحل کد زدن و URL پروژه PWA
  • نحوه‌ی آپدیت کردن Service Worker ها در صورت نیاز
  • آموزش‌های بیشتر

  • آشنایی با تایپ اسکریپت