آموزش ویدئویی react js - از ساده تا فوق پیشرفته
( فیلم آموزشی ) ،توسط مهندس حسین فروغی
به کلیک سایت خوش اومدی ،
اینجا میتونی هر فیلم آموزشی که مد نظر داری رو پیدا کنی.
آموزش های کلیک سایت کاملا از صفر تا صد طراحی شده و تمامی آموزش ها به زبان فارسی و مناسب جهت ورود به بازار کار تولید شده.
پس از دیدن آموزش ها ، بدون تردید شما آماده ورود به بازار کار و کسب درآمد خواهید شد.
برای شروع ، ابتدا فیلم معرفی دوره رو مشاهده نمایید.
سپس میتوانید در ادامه همین صفحه ، سایر قسمت های این مجموعه را دانلود نمایید.
برای مشاهده فیلم با سرعت بالا ، از آی پی ایران استفاده نمایید.
موضوعات:
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش HTML5
آموزش CSS
آموزش ساخت فروشگاه اینترنتی
آموزش react native
معرفی سرفصل های این دوره:
با سلام خدمت کلیک سایتی های عزیز،
به دوره ی صفر تا صد طراحی سایت با react js خوش آمدید.
نکته:این دوره کاملا پروژه محور میباشد
نکته:این دوره هیچ پیش نیازی ندارد
ReactJS چیست؟
ReactJS اساساً یک کتابخانه ی جاوا اسکریپت منبع باز است که برای ایجاد رابط کاربری مخصوص برای برنامه های یک صفحه استفاده می شود. این برای مدیریت لایه های نمایشی برای برنامه های وب و تلفن همراه استفاده می شود. React ابتدا توسط یک مهندس نرم افزاری برای فیس بوک یعنی Jordan Walke ساخته شد. برای اولین بار در ماه فوریه 2011 و در Instagram.com در سال 2012 اعمال می شود.
نکته ی مهم:هم چنین شما با یادگیری react میتوانید طراحی اپلیکیشن را نیز با react native انجام دهید.
دوره ی صفر تا صد react native:
https://clicksite.org/tutorial/آموزش_ویدئویی_React_Native_-_ ری_اکت_نیتیو_از_ساده_تا_فوق_پیشرفته/203
در این دوره از صفر شروع میکنیم و درمورد تاریخچه ی react و دلیل بوجود آمدن آن توسط شرکت facebook صحبت میکنیم.
بعد از صحبت درمورد تاریخچه، درمورد محیط های و ابزار مورد نیاز برای شروع کد زنی صحبت میکنیم.
بعد از پروژه ی کوچکی را شروع خواهیم کرد و در آن پروژه درمورد مباحث ابتدایی React صحبت مکنیم.
بعد از صحبت درمورد پروژه ی کوچکمان،نوبت به یک پروژه ی بزرگ و حرفه ای که ساخت یک فروشگاه است میرسد.(طراحی این فروشگاه شبیه یکی از سایت های فروشگاهی خارجی میباشد)
ما این فروشگاه را با تکنولوژی های مختلفی انجام میدهیم و تا آخر دوره بر روی همین فروشگاه کار میکنیم.
دیتابیس این فروشگاه هم با firebase و هم با php نوشته میشود.(کار با phpmyAdmin و ... را هم برای کار با php آموزش میدهیم)
زبان php را از صفر یاد میگیریم و با کویری های مختلف در php آشنا میشویم.
درمورد مبحث مهم و پرکاربرد redux صحبت میکنیم،هم چنین درمورد Context Api صحبت میکنیم.
Responsive کردن را یاد میگیریم.
سایت را برای نمایش در مرور گر های گوشی آماده میکنیم.
در مورد روش ها ی مختلف استایل دهی از جمله sass و css in js استفاده میکنیم و با انیمیشن های مختلف آشنا میشویم.
در ادامه به اختصار فصل ها را بررسی میکنیم:
فصل 1:
در این فصل از مقدمات شروع کرده و کلیت کار React را بررسی میکنیم و یک پروژه ی کوچک را مینویسیم،
برخی از موضوعات گفته شده در فصل اول:
-React js و تاریخچه ی آن
-Don’t touch the Dom,I’ll do it
-ساخت لوگو وار
-جریان یکطرفه اطلاعات
-چگونه یک برنامه نویس حرفه ای react شویم؟
-توضیحات کلی درمورد مباحث پیش رو
-نصب موارد مورد نیاز
-تفاوت های بین yarn و npm
-ساخت اولین پروژه
-توضیح پیرامون فایل های ساخته شده
-class component
-state
-set state
-jsx
-مرحله اول ساخت پروژه
-گرفتن اطلاعات از سرور
-استایل دهی و ساخت کامپوننت اولیه
-Responsive کردن برنامه با کوچک تر کردن کامپوننت ها
-معماری برنامه
-props
-React Events
-filtering
-searchField
-محل قرار گیری state
-Class method and arrow function
-LifeCycle
-React Events
-Asynchronous setState
فصل 2:
در این فصل ساخت پروژه ی مهم و بزرگ فروشگاه را شروع میکنیم و همراه با آن مباحث جدیدی را یاد میگیریم،
دقت کنید که تا آخر دوره این پروژه فروشگاه را با تکنولوژی های مختلفی انجام میدهیم...
مختصری از مباحث این فصل:
-مسیر پیش رو و پیش نمایش پروژه
-شروع ساخت پروژه
-sass
-تصمیم برای ساخت کامپوننت های مختلف
-ساخت کامپوننت ها
-نمایش دادن عکس و استایل دادن به آن
-استایل دهی به menu item
-به طور مفصل درمورد react router صحبت میکنیم
-withRouter
-صفحه ی shop را میسازیم
-ساخت collection-item
-ساختن header برنامه
-فرمت svg را میشناسیم
-درمورد form ها در html صحبت میکنیم
-صفحه ثبت نام را میسازیم
-ساخت sign in component
-مفصلا درمورد firebase و تمام جزییات آن صحبت میکنیم
-ورود با اکانت گوگل را انجام میدیم
-اطلاعات را در firebase میریزیم
-Async/await
-ورود به برنامه را با email , password انجام میدهیم
-حال شروع میکنیم به جای استفاده از firebase با php فروشگاه را مینویسیم
-نصب ابزار لازم برای نوشتن php
-متغییر ها در php
-آرایه ها در php
-حلقه ها در php
-عبارات شرطی در php
-بحث درمورد 4 کویری موجود در php
-Select
-update
-insert
-delete
-اطلاعات فروشگاه را در جداول دیتابیس میریزیم
-اطلاعات از از سرور با php میگیریم
-در مورد متد های post , get صحبت میکنیم
فصل 3:
در این فصل فروشگاهی را که با firebase نوشتیم با php مینویسیم،
مباحث این فصل به اختصار:
-شروع ساخت market با php
-شروع نوشتن عملیات ثبت نام
-ارسال اطلاعات از سمت برنامه برای ثبت نام
-کنترل ثبت نشدن ایمیل تکراری در دیتابیس
-برگرداندن اطلاعات بعد از ثبت نام موفقیت آمیز
-ورود به سایت
-ارسال اطلاعات از سمت برنامه
فصل 4:
در این فصل مهم تریم مبحث موجود در react یعنی redux را به طور مفصل مورد بررسی قرار میدهیم،
این فصل را خوب یادبگیرید،
کد های مربوط به این فصل را خودتون حتما بنویسین...
دقت کنید redux مبحث پیچیده ای هست و اگر خوب تمرین نکنید یاد نخواهید گرفت...
مباحث این فصل به اختصار:
-Redux
-جریان داده ها در redux
-Redux در برنامه ی نوشته شده
-Action & Reducer
-شروع کار با redaux
-Connect() & mapStateToProps
-mapDispatchToProps
-Redirect
-ورود به برنامه در marketPhp
-خروج از برنامه در marketPhp
-ساخت cart component
-ساخت cartDropDown
-نمایش و عدم نمایش cart dropdown
-Style دادن به item ها برای اضافه کردن به سبد
-اضافه کردن محصول به سبد خرید
-Reduce
-selector
-Memoization
-کتابخانه ی reselect
-User selectors
-ساخت صفحه ی checkout
-بسته شدن cartdropdown هنگام رفتن به صفحه ی checkout
-ساخت checkout item
-پاک کردن محصول از سبد
-کم و زیاد کردن محصول از صفحه ی checkout
-Loacal Storage و Session Storage
-ذخیره اطلاعات سبد خرید
-بردن اطلاعات directory به redux
-بردن اطلاعات shopبه redux
-کامپوننت collectionOverview
-nasted routing
-currying
-ساخت صفحات مختلف
فصل 5:
در این فصل درمورد استفاده از css در js صحبت میکنیم:
-Css in js
-Styled-components
-استفاده از Styled-components در برنامه ی
فصل 6:
در این فصل redux را با firebase استفاده میکنیم:
مباحث این فصل:
-Redux firebase
-ریختن اطلاعات مربوط به shop در firebase
-گرفتن اطلاعات از دیتابیس
-اضافه کردن shopData به redux
-spinner
-درمورد ساخت spinner بیشتر بدانیم
-شروع قرار دادن اطلاعات در سرور و گرفتن با php
-گرفتن اطلاعات php از سرور
-روشی دیگر برای گرفتن اطلاعات
-گرفتن اطلاعات سمت برنامه
فصل 7:
در این فصل درمورد مباحث پیشرفته ای که در redux وجود دارد صحبت میکنیم
از جمله:
redux thunk
redux saga
Generator function
Take
TakeEvery
TakeLatest
RootSaga
googleSignIn with saga
EmailSignIn with saga
فصل 8:
مباحث این فصل بسیار مهم و کاربردی میباشند،
ب یادگیری مباحث این فصل میتونین پروژه های مد نظرتون رو بدون استفاده از مبحث سنگین redux انجام بدین،
پس خیلی خوب یاد بگیرید.
هم چنین درمورد باز شدن سایت روی گوشی و responsive کردن آن صحبت میکنیم.
از جمله مباحث این فصل:
-React hook
-useEffect Hook
-قوانین استفاده از هوک ها
-تبدیل class به func
-استفاده از useEffect در برنامه
-componentWillUnMount با استفاده از useEffects
-customHook
-useReducer Hook
-Context Api
-Context Consumer
-useContext Hook
-Context Provider
-Consume
-Provider Pattern
-Mobile Responsive
فصل 9:
در اصل فصل در مورد performance صحبت خواهیم کرد :
-React Performance
-Lazy
-Error Boundaries
و سایت را بر روی هاست واقعی قرار میدهیم
بخش های رایگان این مجموعه آموزشی:
React js و تاریخچه ی آن ( بخش 1 ) دانلود مستقیم Don’t touch the Dom,I’ll do it ( بخش 2 ) دانلود مستقیم Build website like logo block ( بخش 3 ) دانلود مستقیم Unidirectional data flow ( بخش 4 ) دانلود مستقیم UI,the rest is up to you ( بخش 5 ) دانلود مستقیم چگونه یک برنامه نویس حرفه ای react شویم؟ ( بخش 6 ) دانلود مستقیم توضیحات کلی درمورد مباحث پیش رو ( بخش 7 ) دانلود مستقیم نصب موارد مورد نیاز ( بخش 8 ) دانلود مستقیم توضیحاتی پیرامون گرفتن اطلاعات از سرور ( بخش 18 ) دانلود مستقیم شروع ساخت پروژه ( بخش 46 ) دانلود مستقیم شروع کار با firebase ( بخش 69 ) دانلود مستقیم ذخیره اطلاعات کاربرانی که با گوگل وارد میشوند ( بخش 77 ) دانلود مستقیم استفاده از WAMPSERVER ( بخش 84 ) دانلود مستقیم ابزار های مورد نیاز برای نوشتن کدهای php ( بخش 85 ) دانلود مستقیم آرایه ها در php ( بخش 88 ) دانلود مستقیم آشنایی با phpmyAdmin ( بخش 89 ) دانلود مستقیم خروجی json ( بخش 91 ) دانلود مستقیم شروع ساخت market با php ( بخش 100 ) دانلود مستقیم Css in js ( بخش 150 ) دانلود مستقیمبرخی از موضوعات گفته شده در فصل اول:
-React js و تاریخچه ی آن
-Don’t touch the Dom,I’ll do it
-ساخت لوگو وار
-جریان یکطرفه اطلاعات
-چگونه یک برنامه نویس حرفه ای react شویم؟
-توضیحات کلی درمورد مباحث پیش رو
-نصب موارد مورد نیاز
-تفاوت های بین yarn و npm
-ساخت اولین پروژه
-توضیح پیرامون فایل های ساخته شده
-class component
-state
-set state
-jsx
-مرحله اول ساخت پروژه
-گرفتن اطلاعات از سرور
-استایل دهی و ساخت کامپوننت اولیه
-Responsive کردن برنامه با کوچک تر کردن کامپوننت ها
-معماری برنامه
-props
-React Events
-filtering
-searchField
-محل قرار گیری state
-Class method and arrow function
-LifeCycle
-React Events
-Asynchronous setState
( React js و تاریخچه ی آن )
( Don’t touch the Dom,I’ll do it )
( Build website like logo block )
( Unidirectional data flow )
( UI,the rest is up to you )
( چگونه یک برنامه نویس حرفه ای react شویم؟ )
( توضیحات کلی درمورد مباحث پیش رو )
( نصب موارد مورد نیاز )
( تفاوت های بین yarn و npm )
( ساخت اولین پروژه )
( توضیحاتی پیرامون فایل های ساخته شده )
( توضیحاتی پیرامون فایل های ساخته شده )
( Class component )
( State )
( setState )
( jsx )
( مرحله اول ساخت پروژه )
( توضیحاتی پیرامون گرفتن اطلاعات از سرور )
( گرفتن اطلاعات از سرور )
( معماری برنامه )
( ساخت کامپوننت card-list و مفهوم probs و children )
( استایل دهی و ساخت کامپوننت card-list )
( Responsive کردن برنامه با کوچک تر کردن کامپوننت ها )
( استایل دهی به card )
( چرا کامپوننت card و card-list ساخته شد؟ )
( تفاوت بین state و probs )
( searchField )
( React Events )
( Filtering state )
( ساخت کامپوننت searchBox )
( State را کجا قرار دهیم؟ )
( Class method and arrow function )
( انجام تمرین برای درک بهتر مباحث گفته شده )
( اضافه کردن فونت و استایل دهی و ... )
( React and react-dom )
( React and react-dom )
( Virtual Dom and unidirectional Data Flow )
( Asynchronous setState )
( Asynchronous setState )
( LifeCycle )
( LifeCycle )
( LifeCycle(Mounting) )
( LifeCycle(Updating) )
( LifeCycle(Unmounting) )
تخفیف تا تاریخ 1404/3/31 (تخفیف فوق،صرفا به خرید کل پکیج،و یا خرید فصل ها تعلق می گیرد و به خرید تک بخش ها،اعمال نمی گردد)
وضعیت دوره: تکمیل شده
تعداد قسمت ها : 215 قسمت
سطح آموزش: صفر تا صد
به همراه کدها و فایل های آموزش
تعداد فصل ها: 9 فصل
مدت زمان: 30 ساعت و 18 دقیقه
افزودن پکیج به سبد خرید
جهت اطلاع از بروزرسانی این دوره آموزشی و اطلاع از بخش های جدید،ایمیل خود را وارد نمایید:
نظر/پرسش/پیشنهاد شما
در صورت تمایل به دریافت پیامک به هنگام پاسخ به سوال شما و یا به هنگام درج نظر شما در سایت، شماره همراه خود را وارد نمایید.
جهت بزرگنمایی،ماوس را روی تصویر حرکت دهید
در حال بارگزاری تصاویر...
نظرات/پرسش ها/پیشنهادات ( صفحه 3 )
Iman
میگه:
سلام استاد
من js بلد نیستم،میتونم این دوره را ببینم؟
پاسخ:
سلام بله ، در دوره كاملا موارد مورد نياز گفته شده
داودمنزه
میگه:
سلام وقت بخیر پیش نیاز این دوره اشنایی با جاوا اسکریپته درسته چون سرفصلهای جاوا اسکریپت نبودند
پاسخ:
سلام وقت بخير،
خير اين دوره پيش نيازي نداره و مباحث كامل گفته شده
مسعود
میگه:
جناب فروغی سلام
خواستم در خواست کنم از شما که اگه امکانش هست برای درک بیشتر این دوره دمویی از پروژه نهایی در سایت قرار بدید .
ممنون
پاسخ:
سلام وقت بخير
بله به زودي اين كار رو انجام ميدم
مهناز کاوه
میگه:
ببخشید من میخواستم پک React js رو تهیه کنم تا کی کامل میشه؟خیلی هزینش بالاست باتوجه به اینکه تخفیف هم زدین یه کد نخفیف نمیدین؟
پاسخ:
سلام وقت بخير،حدود ١٥ قسمت ديگه داره...
چشم در قيمت تجديد نظر ميكنيم
Ebrahim
میگه:
با توجه به این نسخه که در حال حاضر نسخه ۱۶.۱۲ هستش آیا تفاوت زیادی وجود داره یا اینکه این پروژه به روزرسانی خواهد شد ؟ البته گویا دوره هنوز کامل نشده درسته ؟
پاسخ:
نه تفاوت زیادی نداریم...
و در صورتی که در اپدیت های جدید تغیرات زیادی اعمال شد جلسات جدید ضبط خواهند شد...
بله حدو 15 جلسه دیگه از دوره باقی مونده.
شهريار
میگه:
سلام
ايا براي ياد گيري دوره react native نياز به پيش نياز react js هست؟؟؟
پاسخ:
سلام اگر هدفتون حرفه اي شدن و به طور كامل ياد گرفتن هست بله،ولي توي دوره ي react native هم مباحث لازم گفته شده
ebrahim
میگه:
سلام
از کدوم نسخه برای پروژه استفاده شده ؟
پاسخ:
سلام 16.9.0
سعید
میگه:
سلام
وقتتون بخیر
وقتی از ریداکس استفاده شده آیا نیازه که از context استفاده کنیم؟
یا برعکسش.وقتی از context استفاده شده آیا نیازه که از ریداکس استفاده کنیم؟
آخه هردوتاش توی سرفصلاتون هست. آیا فقط اموزش میدین و توی پروژه از یکیش استفاده میشه یا توی پروژه هم از هر دو استفاده میشه؟
پاسخ:
سلام وقت بخير نه نياز نيس كه از هر دو استفاده كرد...
چرن هر دو يك كارايي دارن
ولي چون ممكنه يه جايي براي استخدام روي يكي از اين دو دقت كنن هر دو رو در دوره قرار داديم...
و فروشگاه را هم با redux و هم با context api اوكي ميكنيم
مهدی راستینه جوان
میگه:
سلام استاد برای طراحی وب و یک وطراح وب خوب شدن کاربرد داره؟ و اینکه فرموشی رمز عبور داره؟ ممنون
پاسخ:
سلام بله بعد از دوره میتونین به یک طراح حرفه ای تبدیل بشین...و سایت های مورد نظرتون رو بنویسین...
درمورد فراموشی رمز صحبت نشده
وحید
میگه:
سلام استاد
اگر بخوایم دمویی از فروشگاهی که دارید میسازید رو ببینیم ، دیدن کودومو قسمت ها رو پیشنهاد می کنید؟
پاسخ:
سلام وقت بخیر
عکس ها و دمو را به زودی قرار خواهم داد.
امير
میگه:
سلام درمورد هوك هم صحبت ميكنين؟
پاسخ:
سلام بله،به طور مفصل توضیح داده خواهد شد