دوره آموزش react js (مقدماتی تا پیشرفته) : ری اکت جی اس به زبان ساده اما اصولی

بهترین و اصولی ترین آموزش صفر تا صد React js ری اکت جی اس. در این آموزش به زبان ساده اما از مبتدی تا پیشرفته Reactjs آموزش داده شده است. برای تماشای این آموزش کامل front-end فقط باید html و css و javascript را بلد باشید. اگر دوست دارید برنامه نویسی react را را رایگان اما اصولی یاد بگیرید این آموزش صفر تا صد برنامه نویسی وب را از دست ندهید.
برای یادگیری پیش نیازهای برنامه نویسی React آموزشهای زیررا تماشا کنید:
برای یادگیری ری اکت باید html , css , Javascript را در حد متوسط باد باشید. برای یادگیری آنها آموزشهای زیر را تماشا کنید :
Html : • آموزش HTML از صفر
Css : • آموزش Css از صفر
Javascript 1 : • آموزش زبان برنامه نویس...
Javascript 2 : • آموزش زبان برنامه نویس...
Javascript 3 : • آموزش برنامه نویسی جاو...
source code:
github.com/sarvinstyle/React....
برای تماشای این دوره در قستهای کوتاه تر و تفکیک شده لینک زیر را کلیک کنید
• بهترین و کاملترین آموز...
سرفصل
00:00:00 reactjs چیست؟ ری اکت جی اس به زبان ساده
00:04:57 نصب و راه اندازی reactjs
00:19:36 React Componnet, props and JSX
00:39:40 conditional rendering
01:07:46 useState hook
01:31:10 پیاده سازی پروژه با ری اکت جی اس
02:07:25 useEffect hook
02:22:06 دریافت داده از API
02:52:06 Route and navigation در Reactjs
03:16:13 useContext hook
03:38:03 react-query
03:56:25 react-hook-form
04:21:21 React Custom hook
04:43:52 useReducer hook
05:16:03 Redux
05:37:14 TypeScript
06:03:42 ساخت فروشگاه آنلاین با react js بخش اول
06:46:08 ساخت فروشگاه آنلاین با react js بخش دوم useContext
07:22:44 ساخت فروشگاه آنلاین با react js بخش سوم custom hook
07:37:49 ساخت فروشگاه آنلاین با react js بخش چهارم LocalStorage
08:20:16 ساخت فروشگاه آنلاین با react js بخش پنجم Deploy کردن پروژه ری اکت

[@alirezak5870]

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

[@Mohsen7b]

بهترین آموزشی که تا الان در مورد ری اکت دیدم اموزش شما است . عالیه

[@shukofehesfahani7218]

ممنون از شما بابت زحمت زیادی که برای تهیه این ویدیو کامل و مفید کشیدین،❤❤❤،اگه امکانش هست مثل همین ویدیو یک آموزش در خصوص یک پروژه فول استک هم درست کنید که عالی میشه،واقعا شما پرچم خانومارو بالا بردین😊

[@DudesVerses]

بنده در فهم ریداکس کمی مشکل داشتم اما شما به معنای واقعی ریداکس رو فوق العاده عالی و قابل فهم توضیح دادید, بسیار متشکرم از شما

[@hosseinyarali3456]

استاد فوق العاده ،عااالی

[@itone3438]

فوق العاده

[@hamedghafouri5451]

فعلا فقط قسمت یوز استیت گوش دادم واقعا خوب توضیح دادن .ممنون ❤

[@itsanaz]

مفهوم use state و خیلی خوب فهمیدم از این ویدئو. ‌در حالی که از ویدئو دیگه ارور داشتم همش.‌ممنونم ازتون❤

[@persiantwins]

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

[@mohammadhassanwaseq4840]

So excellent dear teacher allah bless you💕

[@abdolrahimpajang4546]

درود بر شما سپاسگزارم

[@maedemahavi314]

عالی بود تشکر فراوان

[@majidabbasilarki3118]

مطالب روان و عالی توضیح داده شدن.

[@user-nh6yl7fo5d]

خیلی خوب وعالی،ممنون از آموزش خوبتون❤

[@HJamii]

ممنون از شما بابت تمام زحماتتون ❤

[@metraneekoo6527]

واقعا عزیز بهترین این نمیشد براتون بهترینها را ارزومندم مممممنون🎉

[@hosseinwl]

Appreciate it that

[@user-bu9gp5jk8m]

عالی اموزش میدید خلی ممنون

[@mariyan1506]

ممنونم ازتون خیلی عالی بود❤

[@BoredBearLife]

useful and complete lessons👌✌

[@sarvinStyle]

Glad to hear that

[@miladshahsavari1788]

عالی بود

[@simahamdollahpour7860]

عالیه❤

[@movieyab2941]

خیلی ممنونم❤❤❤❤❤

[@forever-zy3id]

خیلی خوب اموزش میدین مرسی

[@erfanheshmati]

Great job, keep going on...👌👍

[@sarvinStyle]

Thank you, I will

[@user-zh1qe1cw8s]

عالییی🎉🎉❤

[@sarvinStyle]

مرسی

[@AMIR-pd1vg]

عالی

[@hoseinkamali8459]

خیلی زحمت کشیدین برای آموزش ممنون ولی انگار دارین برای خودتون مرور میکنین

[@MiladJoodi]

واقعاً یک سری افراد برای آموزش دادن ساخته شدن. عالی بود ممنون ♥

[@laraveldev9044]

ممنون منتظر ادامه هستیم

[@itsjavad1997]

ممنون

[@MSEIN2303]

بسبار عالی

[@seyedmahdihosseini4202]

ممنون از وقتی که برای ما گزاشتید
انرژی پاک الهی و سلامتی و موفقیت و ایمان و ثروت روز افزون براتون آرزو می کنم💫

[@sarvinStyle]

مرسی از اینهمه محبتتون

[@Pj-ft5yc]

واقعا باعث دلگرمی هستید❤❤❤❤❤ لطفا مارو تنها نذارید

[@maryamghorbani1333]

بی نظیر بود واقعا

[@sarvinStyle]

ممنونم

[@Pj-ft5yc]

خدا خفظتون کنه❤

[@HJamii]

Nice💯

[@sarvinStyle]

Thanks 💯

[@mirkarimmajidi83]

thank you

[@sarvinStyle]

You're welcome

[@Mnnjo2024]

سلام شما خیلی زیبا هستید

[@mostafafartaj7270]

آموزش هاتون عالیه ممنون میشم اگه در ارتباط با monorepo کردن پروژه فرانت و module federation آموزش بدید

[@gima3493]

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

[@musiccpedit]

واقعا تدریستون خیلی خوبه ممنونم 😍

[@ahmadjalali7587]

یک دنیا تشکر بابت زحماتی که برای اموزش کشیدن و رایگان در اختیار گذاشتین خیر ببینید

[@elahe7757]

ممنونم از آموزش های عالی و توضیحات واضحتون
امکانش هست لطفا یک آموزش از login page و نحوه authorization کاربر در React بذارید؟ ممنونم از لطفتون❤

[@techguy766]

یکم مصیبته من از dave gray یادگرفتم تقریبا راه رهای متفاوتی داره

[@sarvinStyle]

حتما

[@niloofar_baniasadi]

🙏💖 واقعا عالی هستید. سپاس از وقتی که میذارید‌.
🌸دوستان اگر میتونید تبلیغ ها رو رد نکنید و ببینید تا هم ما تشکرمون رو در عمل ابراز کرده باشیم هم ایشون انگیزه برای تولید محتوای بيشتر برای ما بگیرند. موفق باشید.

[@hosseinwl]

❤🙌

[@alirezabagher5391]

به تازگی با صفحتون آشنا شدم آموزش ها عالی و روان توضیح داده شده ممنون از زحماتتون

[@alisilent85]

سلام ویقتتون بخیر من هر چه npm start رو میزنم ران نمیشه بره رو پورت شما مشکل رو میدونی؟؟؟؟

[@arshamna3076]

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

[@samaelthemorningstar]

سلام ای کاش در صورت امکان دوره next هم بگذارید. ممنونم از آموزش های عالی و بی بدیلتون.

[@sarvinStyle]

حتما

[@AMIR-pd1vg]

😍😍❤️❤️❤️

[@polo-jk6eo]

ممنون از زحماتتون واقعا توضیحات خوبی دادید

[@sina_tec1]

عالی سروین جان 🌹🌹
فقط یکم مفهومی تر و با مثال بیشتر آموزش بدین خیلی ممنون 🌹🌹

[@sarvinStyle]

چشم

[@k012m2]

سلام خیلی عالی بود ,دوره ریکت با آموزش های شما دارم یاد میگیرم

[@sarvinStyle]

عالیه

[@alikazemi2028]

کاش سمت موبایل نبودم و از دانشتون بهره میبردم ولی فقط میتونم حمایت کنم ازتون موفق باشین

[@sarvinStyle]

مرسی از حمایتتون 🙏

[@SarahPiri-ut6ex]

همه چی عالی هست بجز اونجاهایی که آب دهنتو قورت میدی وسط تدریس خیلی تومخیه

[@maryamghorbani1333]

لطف بزرگی کردید که فارسی دوره گذاشتید . من به زبان انگلیسی گوش‌میدادم دوره هایی رو ولی مفاهیم تو ذهنم نمیموند ولی اینجوری با. زبان مادری واقعا جا میفته برامون

[@sabatahmasebi7055]

سلام وقت بخیر من یک سوال داشتم وقتی ما ریکت رو نصب میکنیم باید برای هر جلسه که درس میدید باید node-models نصب بشه اخه حتی تو گیت هابتون هم node-modeles نصب نبود و هیچ کدم از کدهاتون run start میکردم جوابی نمیگرفتم. و چه کار میشه کرد که این node -modeles کمتر بشه و تمام کدها run بشه

[@user-zh1qe1cw8s]

استاد اگر امکانش هست میشه لطفا استفاده از فایربیس در ریکت رو هم به این دوره اضافه کنید سپاس فراوان🎉

[@Yassi_english]

سلام استاد وقت بخیر،من در ابتدای کار به باگ خوردم
در قسمت ترمینال دقیقا دستور npxرو وارد می کنم و نود جی اس در سیستم نصبه
اما یکسری خطای enonet که میگه
No Such directory
در فولدر appdata/Roaming/npm
عکسشو ایمیل هم کردم❤
ممنون از آموزشتون

[@MSEIN2303]

خیلی عالی. ببخشید دوره نکست جی اس نمیذارین؟

[@itsanaz]

باز هم ممنونم ازتون
من این و کامل میرم و بعدش میخوام react native هم یاد بگیرم .‌آموزش اون رو هم میزارید؟

[@sarvinStyle]

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

[@rahneshin752]

❤❤❤❤❤🎉🎉🎉

[@mohamadshaterzadeh2353]

اول ممنون بابت زحماتی که میکشید من هنوز آموزش رو ندیم خواستم بدونم این اموزش با آخرین آپدیت های ReactJS ارائه شده؟ ایا با تغییرات جدید React و قابلیت های جدید برنامه ای برای آموزش قابلیت های جدید هم دارین؟ ممنونم.

[@sarvinStyle]

سلام بلی شامل آخرین آپدیتهای reactjs هست

[@SHAYANkarimi-ct2gf]

سلام خسته نباشید
شما تخصص در فلاتر ندارین که آموزشی در مورد اون نمیزارین؟

[@sarvinStyle]

نه متأسفانه فراتر کار نکردم

[@parvanehzareie7561]

ممنون از آموزش خوبتون. فقط آموزش Local Storage نبود، گفتید که آموزش میدید اما ویدیو تکراری ازآموزشهای قبل بود.

[@sarvinStyle]

اینجا می تونین تماشاش کنید
th-cam.com/video/NQY25swkLKo/w-d-xo.html

[@minaataei0415]

سروین جانم عالیه. ولی کاش چند قسمتی کنی راحتتره

[@sarvinStyle]

چند قسمتی بود، قبلا در 20 قسمت منتشر کردم اما برای کسایی که دوست دارم همه یه جا باشه هم همه اش را یه جا جمع کردم
لینک 20 قسمتیش در توضیحات هست

[@sina_tec1]

بازم ویدئو آموزشی بسازین 🌹🌹🌹🌹

[@sarvinStyle]

هر هفته یه آموزش جدید منتشر می کنم

[@amirhosseinrazavi7701]

سلام ممنون از وقتی که برای آموزش خوب تون گذاشتین. خیلی عالی بود فقط یه مشکلی هست قسمت یکی مونده به آخر این آموزش بخش ۴ که قرار بود لوکال استوریج باشه اشتباه آپلود شده.

[@sarvinStyle]

مرسی که اطلاع دادین متاسفانه نمی شه تغییرش داد
اما قسمت مربوط به لوکال استوریج اینجا هست لطفا اینجا تماشاش کنید
th-cam.com/video/NQY25swkLKo/w-d-xo.html

[@elahehatami1669]

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

[@sarvinStyle]

اینجا
th-cam.com/video/NQY25swkLKo/w-d-xo.html

[@Azyta123]

ایابایدسی اس اس گرید وفلکس باکس روهم یادبگیرم بعدش برم سراغ اموزش جاوا؟؟؟

[@ninjaduty9565]

جاوا نه جاوا اسکریپت این دو تا فرق دارن
بعد از html css برو سراغ جاوا اسکریپت

[@easyenglishati]

سلام استاد ببخشید این دوره ریکت با دوره ریکت قبلی چه فرقی میکنه؟؟ ممنون از تدریس عالی تون 😍😍😍😍😍🌷🌷🌷🌷🌷

[@sarvinStyle]

همان دوره است اما کلیه قسمتها یکجا

[@easyenglishati]

@@sarvinStyle ممنون استاد 😍😍😍

[@user-nv8iq9dx2n]

خداوند شما عزت بده

[@sarvinStyle]

مرسی

[@zahranarimani-gk3oz]

سلام وقت بخیر vs من در تگ return , div برای فایل app.js ارور میده ، حتی کد های شما رو هم کپی کردم اوردم از گیت ارور داد ، مشکلش چیه؟

[@zahranarimani-gk3oz]

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

[@sarvinStyle]

کدهاتون را برام بفرستین تا بگم

[@ali.Haddad67]

ممنون از آموزشتون و انتقاد من اینه که بخش پروژه بخش شمارندش اصلا گفته نشد .

[@sarvinStyle]

حق با شماست احتمالا از قلم افتاده

[@mkhn20002000]

سلام،ممنون از آموزشتون
فقط اینکه بخش آموزش مربوط به localStorage به اشتباه همون بخش اول نصب React هست.

[@sarvinStyle]

چی ؟ متوجه نشدم

[@mkhn20002000]

از تایم 7:38:17 به جای تدریس مبحث localStorage دوباره از ابتدای فیلم قرار گرفته . البته پارت deploy کردن درست هست و فقط همین بخش مشکل داره@@sarvinStyle

[@rezadbn]

ba salam, bakhsh "Local Storage" mesle inke eshtebahi va tekrari be video ezafe shode.

[@sarvinStyle]

حق با شماست اما دیگه کاری نمی تونم‌بکنم لطفا قسمتی که لز قلم افتاده را از پلی لیستش تماشا کنید تو قیمت توضیحات هست

[@rezadbn]

Bale haminkaro kardam. Hamchenin babat videohaye khoobetoon kheyli azatoon mamnoonam @@sarvinStyle

[@musiccpedit]

سلام وقت بخیر، چرا انقدر از پکیج های زیادی استفاده شده برای هر کاری باید پکیج نصب کرد

[@sarvinStyle]

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

[@musiccpedit]

جسارتا یک سوال، اگر من بخواهم سایت را با react توسعه بدم و بخواهم هدرم رو در همه پیج هام ایمپورت کنم
نباید فایل html جدا درست کنم؟ و طراحی هدرم باید داخل فایل .js باشد؟

[@sarvinStyle]

نه لازم نیست ، اگر آموزش را تماشا کنید هدر را کامل توضیح دادم که کجا باید قرارش بدین .
اشتباه نکنم در بخش15 یا 16 هم توضیح دادم
به هر حال تماشا کنید پیدا می کنید کامل توضیح دادم

[@musiccpedit]

بله دیدم فقط جهت اطمینان گفتم که این راه حل اصولی هستش که پاسخ دادین. ممنون@@sarvinStyle

[@mahdi.akp10]

سلام دوره ۸ ساعته همون فایل یکجا اموزشای قسمتیه؟

[@sarvinStyle]

بلی

[@jafarazadiyan3619]

سلام استاد من نصب کردم ولی همون اول دستور خطا میده
توی cmd نود رو میشناسه و میگه نصب شد
ولی دستور nmp create-react-app کار نمیکنه و چند خط ERR! میده

[@sarvinStyle]

Npx هست نه nmp

[@jafarazadiyan3619]

@@sarvinStyle هر دو رو تست کردم باز همین مشکل رو دارم

[@sarvinStyle]

شاید نود را نصب نکردید@@jafarazadiyan3619

[@mohsenfakori8555]

توی تمرین آخر پارت دریافت داده از Api خطا داره کدی که نوشتید .

[@sarvinStyle]

من اجراش کردم خطا نداره

[@user-ps4xb2xu3g]

سلام من موقع راه اندلزی ریکت ب خطا میخورم

[@sarvinStyle]

احتمالا نود را نصب نکردید به هر حال خطا را گوگل کنید تا راه حل را بهتون نشون بده

[@yasaminghaedinia3616]

سلام لینک گیت هابتون رو از کجا میتونم بردارم؟

[@sarvinStyle]

لینکش تو قسمت توضیحات همین ویدئو هست

[@user-zl8qm5pm1i]

عزیزم در سال 2013 فیسبوک درسته کرده

[@MikMiki-cm2ze]

استاد عرض کردن که در سال ۲۰۱۱ نوشته شده که کاملا درست هستش و خود فریمورک در سال ۲۰۱۳ عرضه شده بصورت اپن سورس!

[@amirreza017]

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

[@sarvinStyle]

ایمیل [e-mail]

[@marziimaghames]

سلام از طراحی لباس چی شد

[@sarvinStyle]

متاسفانه دیگه طراحی لباس کار نمی کنم

[@soheilsecurity]

مودال اشتباهه
درستش ماژول

[@abbasjafari6826]

مچکر مچکر فقط استایل کدتون رو مخه 😅

[@sarvinStyle]

چی رو مخه ؟؟

[@abbasjafari6826]

@@sarvinStyle نحوه نوشتن کد اینکه تب گزاری اینارو نمیکنین البته ببخشینا شما تجربتون بیشتر از منه اما خب چیزی که برام اتفاق افتاد گفتم با احترام

[@sarvinStyle]

بلی حق با شماست اما من معمولا تب گذاری را با کلید میانبر انجام می دهم در vs با یک alt shift f خودش تب گذاری را انجام می ده معمولا من در پروژه های خودم هرزگاهی مرتب می کنم با این میانبر@@abbasjafari6826

[@Ap-parakhsh]

همه چی عالی بود با تسلط خیلی خوب فقط متاسفانه تلفظ کلمات انگلیسی و اصطلاحات اشتباه هستش که حیفه درست ادا نشه مثلا:
Key: کی (بشکل چه زمانی) نیست و کییییی(بشکل چه کسی )تلفظ میشه
Index: عندکس نیست و ایندکس تلفظ میشه
Length: لنز نیست بلکه لنگت تلفظ میشه

[@MSEIN2303]

🤩