توضیحات

ری اکت (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

مدرس دوره علی شیخ
مدت دوره 32:29:27
تعداد ویدیو 198

وضعیت دوره : کامل شده
قیمت دوره : 999,000 599,000 تومان
% 40 تخفیف

کامنت های ارزشمند شما:

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

  • سلام استاد خسته نباشید من در create-react-app مشکل پیدا کردم . هر کاری میکنم هر کدی میزنم درست نمیشه از npx هم استاده کردم . npm start میزنم هم درست نمیشه.لطفا کمک کنید.

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

  • سلام وقتتون بخیر
    تشکر بابت همه دوره های مفید و عالی که در سایت قرار میگیره.
    لطفا دوره reactNative را هم اموزشش رو در سایت بزارین .
    ممنون.

    • سلام وقت بخیر.
      ممنون از شما، با توجه به اینکه فلاتر هست، خیلی کمتر شده استفاده از react native

  • سلام
    خداقوت
    استاد من واقعا اندکی راهم رو گم کردم متاسفانه! :(
    بنده دوره های html,css,javascript,asynchronous,OOP رو دیدم و آماده یادگیری ریکت هستم
    منتها مسئله ای که ذهنم رو درگیر کرده کاربرد ریکت هستش که آیا فقط برای استفاده از api ریکت رو پیاده سازی میکنیم؟!
    ینی در واقع مثلا بخوایم اطلاعات رو در صفحات مختلف سایتمون نمایش بدیم باید حتما از api اطلاعات رو دریافت کنیم و نمیشه بصورت لوکال از سیستم شخصی بعنوان مثال دیتاهایی رو در صفحات سایت قرار داد؟ (امیدوارم تونسته باشم منظور سوالم رو برسونم -_-)
    آیا اصلا سایتی با ریکت و بدون استفاده از api کدنویسی میشه؟!
    این سوالات رو یه مقدار من رو برای تصمیم گیری متاسفانه گمراه کرده که میخوام قبل شروع دوره راهم رو پیدا کنم :/

    • سلام وقت بخیر.
      ببینید react برای پروژه های spa مناسب هست، ویدیو معرفی و قسمت های رایگان ابتدای دوره را ببینید توضیح دادیم. یا همون صفحاتی که از api استفاده میکنند و شما میفرمایید مناسب هست، در غیر اینصورت شما اگه توی پروژه برای بعضی از صفحات نیاز به js دارید میتوانید از فریمورک alpine که دوره اش توی سایت هست و یا js خام استفاده کنید.

  • عرض سلام و احترام
    با تشکر از اموزش های خوبتون
    یک سوال داشتم که ممکنه مستقیما زیاد به خود دوره مربوط نباشه
    اگر ممکن هست تم vs code مورد استفاده تون در این دوره رو نامش رو بفرمایید
    چون ضمن اینکه چشم رو خسته نمیکنه . با رنگ بندی مناسبی که داره خیلی خوب توابع و متغیر و رشته و... سایر اجزا رو از هم متمایز کرده . بسیار ممنون از لطف شما .

  • سلام وقتتون بخیر
    من بک اند کار هستم و css رو در حد ابتدایی بلدم و تاحالا قالب html درست نکردم
    بنظر شما این دوره برای من مفیده؟
    روال کار ریکت چطوریه حتما باید خودش html css بزنه یا میتونه یک قالب html یکی دیگه رو به کامپوننت react تبدیل کنه؟

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

  • خیلی ممنون از شما ببخشید یعنی من بعد دیدن این دوره React را کامل یاد میگیرم و بعدش میتونم برم سراغ React Native ??? خیلی ممنون از شما

    • بله برای یادگیری ری اکت میتوانید از این دوره استفاده کنید.
      خواهش میکنم

  • سلامو عرض خسته نباشید ببخشید استاد یه نقشه را برای react native به من میگید میخاستم بدونم برای اینکه کامل به تمام react native مسلط شد باید چه دوره هایی را گذروند خیلی ممنون از شما

    • سلام وقت بخیر.
      شما باید دوره react و بعد از اون دوره react native را ببینید، برای دوره react native دوره ای نمیشناسم.
      همچنین میتوانید بجای react natibe، فلاتر یادبگیرید.

  • علی اقا مرسی از اموزش های خوبت واقعا خیلی یاد گرفتم
    ولی اگه امکانش بود یه دوره mongoDb و نود جی اس کامل تر برامون ضبط کن مثل همون لارولی که ضبط کردید و خیلی جامع و کامل بود . که ما جاوا اسکریپتی ها هم بی نصیب از بک اند نمونیم? مرسی بازم

  • سلام استاد:
    من با استفاده از React و Laravel یک File upload ساختم. می خوام علاوه بر سمت Laravel، سمت کلاینت هم از آپلود فایلهای اجرایی یا مخرب جلوگیری کنم. راهنمایی می فرمایید. آیا در این زمینه دوره ای دارین؟

    • سلام وقت بخیر.
      شما میتوانید پسوند و حجم فایل دریافتی را بررسی یا validation کنید و یا از پکیج استفاده کنید.

    • والا من پکیج خاصی مدنظرم نیست و باید سرچ کنید و ببینید که کدام پکیج بیشترین نیاز شما را بطرف میکند.

  • ممنون از دوره های بسیار خوبتون. شما استاد فوق العاده ای هستین و بسیار خوب درس می دین. من دوره های زیادی رو دیدم ولی بنظر من بهترین مدرس دوره ها تا الان شما هستین و من بیشتر دوره هاتون رو خریدم و استفاده کردم. امیدوارم همیشه موفق باشین. و امیدوارم React Native رو هم قرار بدین.

    • سلام وقت بخیر.
      ممنون از شما و پیشنهادتتون
      خداروشکر که دوره براتون مفید بوده

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

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

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

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