telegram

توضیحات

ری اکت (React.js) یک کتابخانه جاوااسکریپتی برای ساخت رابط کاربری(user interfaces) برای اپلیکیشن های تک صفحه ای (single page applications) هست که در سال ۲۰۱۳ توسط تیم توسعه شرکت متا (فیسبوک سابق) ساخته شده است. بخش اصلی در React.js کامپوننت‌ها هستند. یک کامپوننت ترکیبی از HTML و javascript است و تمام منطق مورد نیاز برای نمایش قسمت کوچکی از یک رابط کاربری بزرگ‌ تر را در خود دارد. هر کدام از این کامپوننت‌ها می‌توانند به بخش‌های پیچیده‌تر یک اپلیکیشن اضافه شوند. همچنین React.js این امکان رو در اختیار ما قرار میدهد که کامپوننت‌های قابل استفاده مجدد (reusable UI components) رابط کاربری ایجاد کنیم. توی این دوره به آموزش پروژه محور react.js بر اساس آخرین ورژن که در حال حاضر 19 هست به همراه hook ها، react router و redux (redux toolkit) میپردازیم. که 3 پروژه توی این دوره ایجاد میشه شامل پروژه spa(single page application) و استفاده از react router ، پروژه مدیریت Todo با useRducer و useContext و همچنین پروژه سبد خرید با redux (redux toolkit)

برای آشنایی بیشتر با react.js و همچنین مشاهده پروژه ای که توی این دوره پیاده سازی میشود، حتما ویدیو معرفی که در پایین قرار گرفته را مشاهده کنید.

همچنین دوره ای نکست جی اس (next.js) و دوره ای آموزش ساخت فروشگاه اینترنتی با نکست جی اس (next.js)  هم توی وبسایت قرار گرفت که نکست جی اس فریمورک، ری اکت جی اس هست و پیشنهاد میکنم حتما بعد از این دوره مشاهده کنید.

مباحثی که در این دوره گفته میشود شامل :
آشنایی با react.js

  • آشنایی با react.js
  • نحوه کار react.js
  • ایجاد و توضیح ساختار پروژه react.js با vite.js
  • آشنایی با JSX (javascript XML)
  • توضیح و ایجاد کامپوننت 

کار با style در react.js

  • افزودن فایل css
  • افزودن فایل sass
  • آشنایی با inline style
  • نحوه افزودن فریمورک bootstrap (بوت استرپ)
  • نحوه افزودن react-bootstrap
  • نحوه افزودن فریمورک tailwindcss (تیلویند سی اس اس)

آشنایی با event و props

  • توضیح و نحوه کار با event ها در react.js
  • آشنایی با مبحث prop در react.js

کار با المان های فرم (form) در react.js

  • کار با input و textarea
  • کار با select box
  • کار با checkbox و radio

آشنایی با هوک useState 

  • آشنایی با useState
  • نحوه استفاده از object و array در useState

آشنایی با هوک useEffect 

  • آشنایی با useEffect
  • اجرای useEffect بصورت شرطی و همچنین یکبار
  • آشنایی با cleanup
  • دریافت دیتا از api با useEffect

آشنایی با use و کامپوننت های Suspense و ErrorBoundary  

آشنایی با هوک useContext

  • آشنایی با مبحث context
  • آشنایی با هوک useContext

آشنایی با هوک useReducer

  • آشنایی با useReducer
  • ترکیب و استفاده از useReducer و useContext

آشنایی با react router

  • توضیح spa (single page application)
  • Link & NavLink
  • useParams
  • useLocation
  • useHistory
  • nested routing

ایجاد پروژه spa (single page application) 

ایجاد پروژه مدیریت Todo با useReducer و useContext

آشنایی با redux(redux toolkit) و نحوه استفاده در react.js

ایجاد پروژه سبد خرید با redux(redux toolkit)

 

دوره های پیشنهادی، بعد از گذراندن این دوره :

پیش نیاز این دوره :

javascript جاوا اسکریپت جاوااسکریپت fetch api asynchronous react ری اکت ری_اکت_جی_اس ری_اکت_جی_اس_ورژن_19 react_js react_js_version_19 ریداکس_جی_اس redux_js ری_اکت_روتر react_router

مدرس دوره علی شیخ
مدت دوره 22:53:57
تعداد ویدیو 144
وضعیت دوره : درحال برگزاری
قیمت دوره : 699,000 524,000 تومان
% 25 تخفیف
ابتدا وارد سایت شوید
دسته بندی دوره ها
HTML CSS طراحی وب FlexBox Bootstrap فریمورک طراحی سایت جاوا اسکریپت اکما اسکریپت پی اچ پی php mysql javascript jquery oop mvc composer laravel emmet npm nodejs webpack vuejs livewire vuex API وب سرویس alpinejs tailwindcss react git github typescript next.js nest.js nuxt.js sass ساس

دوره های پیشنهادی

دوره های آموزشی
آموزش تیلویند(Tailwindcss) پروژه محور
کامل شده
% 25 تخفیف

آموزش تیلویند(Tailwindcss) پروژه محور

Tailwind CSS ورژن 4 یک (utility-first) فریمورک CSS است که ابزارها و class ‌های پر استفاده CSS را در اختیار شما قرار می‌د...

699,000 524,000 تومان
20:14:30
آموزش رایگان html و css (اچ تی ام ال و سی اس اس) پروژه محور
کامل شده

آموزش رایگان html و css (اچ تی ام ال و سی اس اس) پروژه محور

برای اینکه وارد دنیای طراحی وب شوید اولین چیزی که باید با آن آشنا شوید HTML است، HTML یک زبانه نشانگذاری برای ایجاد وبسا...

رایگان
13:47:11
آموزش آلپاین (alpine.js) پروژه محور
کامل شده
% 15 تخفیف

آموزش آلپاین (alpine.js) پروژه محور

alpine.js یک فریمورک جاوااسکریپت است که میتواند جایگزین بسیار مناسب برای جی کوئری باشد. alpine.js به صورت رسمی برای فریم...

449,000 381,000 تومان
06:52:21
آموزش webpack (وب پک) و vite.js (ویت جی اس)
کامل شده
% 10 تخفیف

آموزش webpack (وب پک) و vite.js (ویت جی اس)

webpack یک static module bundler برای برنامه‌های جاوااسکریپتی است. یعنی کدهای شما را آنالیز و تمام ماژول‌ها و وابستگی‌ها...

249,000 224,000 تومان
06:54:04

نظرات ارزشمند شما:

برای ارسال نظر ابتدا باید وارد سایت شوید

  • مرتضی الله دوستی

    سلام آقای شیخ خسته نباشید
    ببخشید یه سوال داشتم اینکه میگن یادگیری redux اوایل سخت و پیچیدست درسته؟ و اینکه تو این دوره کامل به redux پرداخته شده یا فقط یه مرور کلی شده ازش؟

    • علی شیخ

      4 سال پیش

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

  • DanielMedian

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

    • علی شیخ

      4 سال پیش

      سلام وقت بخیر.
      فقط برای آپاجی نیست و همه وب سرور ها بحث redirect را دارند که با توجه به وب سرورتون میتوانید اینکار را انجام بدید، نیاز هست سرچ کنید.

    • علی شیخ

      4 سال پیش

      سلام وقت بخیر.
      ممنون از شما، نظر لطفتون هست.
      انشاا... تا آخر ماه توی سایت قرار میدیم.

    • علی شیخ

      4 سال پیش

      سلام وقت بخیر.
      اینکار اسمش emmet هست، که توی دوره رایگان emmet در سایت، در موردش صحبت کردیم.

  • mahdidev

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

    • علی شیخ

      4 سال پیش

      سلام وقت بخیر.
      ممنون از شما.
      دوره برای next.js و همچنین زمانی که نسخه stable ورژن 3 nuxt.js هم بیاد قرار میدیم.

  • mahdi haghighati

    سلام وقت بخیر
    دو سوال داشتم:
    1- دیتاهایی مثل لیست شهر و استان که ثابت هستند ولی تعداد آیتم ها مقداری زیاد هست را بهتره از سرور بخونیم یا داخل یک آرایه ریکت قراربدیم؟
    2-پردازش استیت ها و محاسبات داخل ریکت ، داخل مرورگر کاربر انجام میشه یا سروری که ریکت رو داخلش قرار دادیم؟

    • علی شیخ

      4 سال پیش

      سلام وقت بخیر.
      سوال اول، شما میتونید برای مواردی که ثابت هستند توی پروژه بصورت یک متغیر داشته باشید اما اگه تغیر میکند از سرور دریافت کنید.
      سوال دوم، ببینید react یک کتابخانه جاوااسکریپتی در سمت فرانت هست، کدهای جاوااسکریپت در سمت فرانت ارسال میشه به مرورگر و اونجا مرورگر اجرا میکنه، بخاطر همین میگیم سمت کلاینت هست.سرور فقط توی درخواستی که بهش ارسال میشه میاد و فایل index.html که توش فایل css و js هم اضافه شده را ارسال میکنه به مرورگر و مرورگر میاد اون فایل ها را میخونه و اجرا میکنه، ری اکت همون جاوااسکریپت هست نه چیزی فراتر

  • mahnaz94

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

    • علی شیخ

      4 سال پیش

      سلام وقت بخیر‌.
      برای درگاه شما درخواست به سرور ارسال میکنید و سرور درخواست به درگاه و لینک درگاه برگشت داده میشه و سرور برای شما یا کلاینت ارسال نیکنه و شما کاربر را میفرستید به لینک درگاه برای پرداخت، بیشتر سمت سرور هست. انشاا... توی دوره فروشگاهی next.js در موردش صحبت میکنیم.

  • marcel

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

    • علی شیخ

      4 سال پیش

      سلام وقت بخیر.
      ممنون از شما، برای ری اکت نیتیو باید درخواست زیاد باشه تا توی برنامه قرار بدیم. دوره بعدی درمورد ری اکت، دوره next.js هست.

    • مهدی سعدونی

      4 سال پیش

      عالیه مرسی از آموزشاتون، منتظر دوره فروشگاهی next js هستم. ریکت نیتیو هم اگه دوره اش رو بذارید عالی میشه!

    • علی شیخ

      4 سال پیش

      سلام وقت بخیر.
      ورژن 5 و 6
      در ابتدا با ورژن 5 دوره ضبط شده و بعد از آمدن ورژن 6، قسمت های که توی ورژن 6 تغییر کرده را ضبط و در انتهای اون قسمت قرار داده شده

    • علی شیخ

      4 سال پیش

      سلام وقت بخیر.
      ممنون از شما?
      دوره بعدی typescript هست.اگه تقاضا زیاد باشه دوره next.js هم قرار میدهیم.