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

مدرس دوره علی شیخ
مدت دوره 32:29:27
تعداد ویدیو 198
وضعیت دوره : کامل شده
قیمت دوره : 999,000 599,000 تومان
% 40 تخفیف
ابتدا وارد سایت شوید
دسته بندی دوره ها
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 ساس

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

دوره های آموزشی
آموزش ساخت وب سرویس با لاراول (Laravel Rest Api) پروژه محور
کامل شده
% 40 تخفیف

آموزش ساخت وب سرویس با لاراول (Laravel Rest Api) پروژه محور

APIها (مخفف Application Programming Interface) رابط‌هایی نرم‌افزاری هستند که نرم افزارها و سخت افزارها با کمک آن می توان...

799,000 479,000 تومان
10:16:14
آموزش ساخت فروشگاه اینترنتی با نکست جی اس (next.js)
کامل شده
% 40 تخفیف

آموزش ساخت فروشگاه اینترنتی با نکست جی اس (next.js)

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

999,000 599,000 تومان
36:41:55
آموزش رایگان گیت و گیت هاب (git & github)
کامل شده

آموزش رایگان گیت و گیت هاب (git & github)

گیت (Git) یک سیستم کنترل ورژن است که با آن می‌توانید تغییرات اعمال شده در فایل‌ها را ساده‌تر پیگیری کنید. مثلاً، اگر فای...

رایگان
07:58:20
آموزش webpack (وب پک) و vite.js (ویت جی اس)
کامل شده
% 30 تخفیف

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

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

549,000 384,000 تومان
06:54:04

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

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

  • دانشجو 4659

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

    • علی شیخ

      5 سال پیش

      ببینید شما از هر دو توی ورژن ۱۶.۸ به بالا میتونید استفاده کنید و کلاس کامپوننت چیز خیلی سخت و مشکلی نیست، ممکنه توی یک پروژه کلاس کامپوننت استفاده شده باشه

  • دانشجو 4659

    سلام
    در مستندات react قسمت هاي مثل فرم ها به صورت كلاس نوشته و توضيح داده شده و توضيحي به صورت فانكشنال در اين قسمت و برخي قسمت هاي ديگر مستندات داده نشده.
    كتابخانه هاي ري اكت هم با كلاس نوشته شده يا فانكشنال؟
    براي من كه بيشتر به صورت فانكشنال كار ميكنم react و مستنداتش و كتابخونه هاش مناسب تره يا vuejs ؟
    تشكر

    • علی شیخ

      5 سال پیش

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

  • دانشجو 4659

    در react چون كتابخونه هست و فريمورك نيست يكسري تنظيمات بايد خودمون انجام بديم يا به صورت پيش فرض مثل فريمورك دارن؟
    مثلاً تنظيمات script در npm كه اسكريپت هاي مهم رو در vuejs به صورت پيش فرض و با vue cli ميتونيم داشته باشيم اما چون ري اكت كتابخانه هست اين اسكريپت هارو خودمون بايد بنويسيم؟

    • علی شیخ

      5 سال پیش

      سلام وقت بخیر.
      ری اکت هم این مورد را داره، پکیجی به اسم create-react-app، برای آشنایی بیشتر با ری اکت چند قسمت رایگان بخش اول را مشاهده کنید.

    • علی شیخ

      5 سال پیش

      سلام وقت بخیر.
      React کار کردن با جاوااسکریپت را براتون ساده تر میکنه، قسمت های رایگان دوره را میتونید مشاهده کنید و بیشتر آشنا بشید.

    • علی شیخ

      5 سال پیش

      سلام وقت بخیر.
      شما فایل را از input دریافت میکنید و حالا با fetch یا axios به سرور ارسال میکنید، میتونید از کتابخانه های مربوط به react هم استفاده کنید.

  • دانشجو 4659

    سلام
    هركدوم از فريمورك يا كتابخانه react يا فريمورك vue يكسري ويژگي هاي خاص خودشونو دارن اما گفته ميشه يادگيري react نسبت به vue زمان بر تر و چالشي تر هست ولي پر استفاده تر از vue هست
    ممنون ميشم اگر تجربه خودتونو براي راهنمايي ما راجع به اين دو فريمورك و كتابخانه بيان كنيد كه آيا react پيچيده تر هست يا نه؟
    چون الان در معرفي ديدم پروژه هايي كه پياده سازي كرديد مشابه دوره vue شما هست
    تشكر

    • علی شیخ

      5 سال پیش

      سلام وقت بخیر.
      ببینید جفتشون کار کردن باهاشون ساده هست، از طرفی ری اکت کتابخانه هست و vue فریمورک و این باعث میشه ساختار کاریشون و استفاده ازشون متفاوت باشه،حرفتون درست هست ری اکت ممکنه کمی چالشی تر بشه اما نه اون چالش های بزرگ، چون جفتشون کار کردن باهاشون ساده هست.پس اونقدرا پیچیده نیست، از طرفی شما با یک کدومشون آشنا بشید خیلی ساده میتونید با اون یکی هم آشنا بشید، در کل من vue و nuxt را بیشتر دوست دارم و ترجیح میدم.صد در صد آینده خیلی خوبی داره vue