دوره متخصص ریکت و ریداکس

دوره جدید ری اکت 19 و ریداکس با تکیه بر درک عمیق و اصولی مفاهیم به صورت کاربردی در پروژه های مختلف ارائه شده است. پنل های پروژه جامع دوره ریکت، شما را آماده توسعه پروژه های بازار کار می کند.

۵۵:۲۶:۰۰
۲۹۳ جلسه
۵۹۹۶ دانشجو
۴.۹  از  ۳۲  رای
روش دریافت:  اسپات پلیر
تاریخ انتشار :۱۴۰۱/۹/۲۶
آخرین بروزرسانی:۱۴۰۵/۷/۱۰
پشتیبانی: دائمی تلگرام

توضیحات دوره

دوره جدید ری اکت 19 و ریداکس با تکیه بر درک عمیق و اصولی مفاهیم به صورت کاربردی در پروژه های مختلف ارائه شده است. پنل های پروژه جامع دوره ریکت، شما را آماده توسعه پروژه های بازار کار می کند.

ریکت دیگه چیه ؟

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

چرا باید ریکت رو فرا بگیریم ؟

ریکت به عنوان تیر خلاص برای یک هنرجوی فرانت برای استخدام هست. چون این روزا عملا هیچ پروژه ای با جاوااسکریپت خام (vanilla JavaScript) انجام نمی شود. چون که به کمک ریکت پروژه در نهایت سادگی و در کمترین زمان ممکن با بالاترین عملکرد انجام می شود. علاوه بر این، استفاده از ابزار جدیدی مثل ریکت، هزینه توسعه و نگه داری پروژه ها رو تا حد چشم گیری کاهش می دهد. پس طبیعتا شرکت ها هم به دنبال متخصص ریکت هستند.

چرا ریکت بازار کار رو به رشدی داره ؟

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

صاحب، وجه تمایز دوره ت چیه ؟

بیش از 5 دوره کامل یودمی و یوتوب رو کامل دیدم و واقعا تا الان ندیدم که یک دوره ریکت فرآیند احراز هویت (Authorization - Authentication)، ثبت نام، لاگین، سفارش، مدیریت خطاهای سمت سرور (Error handling)، مدیریت استیت ها به کمک context ، Redux را در یک پروژه واقعی فروشگاه آنلاین (shopping) بررسی کند. به همین دلیل، بک اند و دیتا بیس واقعی رو آماده بهتون میدم که یک پروژه واقعی را تمرین کنید.

آیا صرفا یادگیری ریکت کافیه ؟

بله قطعا، رمز موفقیت توی برنامه نویسی تمرکز روی یک حوزه هست. شما رو باید به عنوان متخصص یک حوزه بشناسن تا از بقیه متفاوت باشید. قطعا یادگیری ریکت به تنهایی برای شما کافی خواهد بود و نیازی به یادگیری vue.js یا angular نیست.

چرا این دوره آماده شد ؟

این دوره حاصل کار با بیش از 125 دانشجو به صورت coach خصوصی، بیش از 4 سال سابقه کار با کتابخانه ریکت در پروژه های داخلی و خارجی و مشاوره چندین استارتاپ و پروژه تحت ریکت (React.js ) و نکست (Next.js) هست. ریکت رو مثل بچه خودم میدونم و بعد این همه سابقه تدریس ریکت، واقعا چالش های آموزش ریکت رو شناسایی کرده ام و یک دوره کاملا پروژه محور و حرفه ای برای شما آماده شده است. انتظار من از شما، بعد این دوره یک توسعه دهنده ارشد ریکت هست که بتونید بدون نیاز به هیچ بوت کمپ و کاراموزی با چندین نمونه کار حرفه ای وارد بازار کار شوید.

آیا همین دوره ریکت کافی خواهد بود؟

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

برای پشتیبانی چه برنامه ای داری ؟

این دوره پشتیبانی منحصربفرد دارد. پشتیبانی به صورت گروه های ویژه تلگرامی هست و فقط خودم جوابگوی هر گونه سوال و ابهام شما چه در مسائل فنی و چه در پروسه استخدامی و رزومه سازی هستم.

وبینار توی دوره جریانش چیه ؟

اگه دانشجو احساس کنه، کسی کنارش هست که کل مسیر رو رفته با اطمینان خاطر بیشتری یاد میگیره، در این مسیر تجربه های خودم رو بهش میگم و نمیذارم مسیر اشتباهی بره و یادگیری براش لذت بخش خواهد شد. این دوره یک وبینار داره که در طول دوره برگزار میشه. در این وبینارها مسائل مربوط به فرایند استخدامی، رزومه سازی، نمونه کار و سوالات فنی دانشجویان جواب داده میشه.

صاحب میشه بگی، ساختار کلی دوره چطوریه ؟

مفاهیم class / functional component روی یک پروژه تمرینی بررسی میشه. استیت و پراپس ها رو میگیم. بعدش میرسیم به context و چرخه عمر کامپوننت ها. قدم بعدی، مفاهیم filter, search, sort رو بهتون میگم. بعدش میریم سمت react-router ، http request و پروژه های دیگه برای ترکیب مفاهیم گفته میشه. بعدش Redux رو میگیم و میریم سمت پروژه اصلی دوره.

راجب پروژه ها یکم بیشتر توضیح میدی ؟

تمرین ها، چالش ها و پروژه ها با نهایت حساسیت انتخاب شدن تا همه مفاهیم مثل هوک ها، استیت های global، درخواست های سمت سرور، http requests و چالش هایی با هم ترکیب بشه و مجددا استفاده بشه تا مطالب تثبیت بشه. پروژه های todoList, contactList, shopping cart, expense tracker جزء مهم ترین پروژه های این دوره هست.

این دوره برای چه کسانی توصیه میشه ؟

یادگیری ریکت بعد از جاوااسکریپت، یکی از بهترین انتخاب ها برای ورود به بازار کار در سال 1400 است.

وجه تمایز تدریست چیه ؟

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

بخاطر مبلغ دوره، نمیخواهم در این دوره شرکت نمایم. پیشنهاد شما چیست؟

به دست آوردن هر چیزی بهایی دارد؛ خیلی از هزینه های زندگی به ما برنمیگرده اما شما توی این دوره روی ارتقاء کیفیت زندگی خودتان سرمایه گذاری می کنید. از امروز شروع کنید و روی رشد خودتان و مهارتتان سرمایه گذاری کنید. هر چیز ارزشمندی می‌خواهید به دست بیاورید باید ابتدا بهای آن را بپردازید.

جلسات دوره

۱Wellcome Wellcome
۴′
دانلود ویدیو
۲What is React.js
۱۰′
دانلود ویدیو
۳Install React.js
۱۱′
دانلود ویدیو
۴What is package.json file
۸′
۵React source files
۱۱′
۶Separation of componnet
۱۴′
۷Component in React.js
۱۰′
۸CourseCard componen markup
۹′
۹Extract CourseList Componnet
۱۲′
۱۰Render list in React.js
۱۱′
۱۱JSX in React.js
۱۲′
۱۲props in React.js
۱۴′
۱۳Extract CourseCard component
۱۲′
۱۴Key in React.js
۹′
۱۵Dynamic className in jsx
۷′
۱۶Header and Footer component
۷′
۱Tab component markup
۱۰′
۲Events in React way
۱۰′
۳What is State in React.js
۵′
۴Creating state in useState
۱۲′
۵Do NOT mutate state in React.js
۱۲′
۶Adding another state in React.js
۹′
۷Update state based on previous state
۷′
۸NoteApp project introduction
۵′
۹NoteApp structure for component
۸′
۱۰Building Form and handling submission
۷′
۱۱Controlled component in React.js
۱۲′
۱Thinking in React.js
۸′
۲State management in React.js
۱۰′
۳Lifting state up
۱۰′
۴Update lifted state in parent
۸′
۵NoteList markup
۸′
۶Deleting note from child component
۱۸′
۷Toggle note to complete
۱۲′
۸NoteStatus component
۸′
۹Sort notes
۲۰′
۱۰children prop
۱۲′
۱۱Accordion component V1
۱۹′
۱۲Dynamic style in chevron
۱۲′
۱۳Accordion componnet V2
۱۷′
۱Overview
۶′
۲How to split component
۹′
۳CharacterList and Navbar component
۱۸′
۴CharacterDetail component
۱۴′
۵Component categories
۴′
۶props drilling
۱۲′
۷Component composition
۱۱′
۸Pure component
۱۲′
۹Render logic in component
۲۲′
۱Overview
۲′
۲How react re-renders component
۸′
۳Pure component
۱۲′
۴Rules of render logic
۲۲′
۵State update batching
۱۲′
۱Overview
۳′
۲Component lifecycle
۸′
۳How to NOT fetch data in React.js
۱۰′
۴useEffect hook introduction
۱۰′
۵Async await in useEffect
۷′
۶Adding loading state in React.js
۹′
۷Error handling
۱۸′
۸Error handling in axios
۱۰′
۹Dependency array in useEffect
۱۷′
۱۰Search in characters based on query
۱۵′
۱۱Select a character
۹′
۱۲Fetch a single character
۲۱′
۱۳Load episodes
۱۳′
۱۴Add character to favourite list
۱۲′
۱۵Clean up function
۱۶′
۱۶Clean up data fetching
۱۵′
۱۷Sort episodes
۸′
۱۸Modal component
۸′
۱۹Remove item from favourite list
۱۶′
۲۰Save Favourite list in LocalStorage
۱۰′
۱Overview
۱′
۲Main React Hooks
۸′
۳Rules of React Hooks
۱۲′
۴useRef in React
۸′
۵Dom Manipulation using useRef
۲۲′
۶Persis data between renders
۱۴′
۷Timer challenge with useRef
۱۴′
۸forwardRef in React
۱۸′
۹Custom Hooks in React
۷′
۱۰Create useCharacter Custom Hooks
۹′
۱۱Create useLocalStorage Custom Hook
۱۱′
۱۲useReducer Count Example
۲۵′
۱۳useReducer NoteApp Example
۱۸′
۱۴useReducer fectch Example
۱۳′
۱۵useContext theme Example
۲۰′
۱۶Advanced pattern for useContext
۱۴′
۱۷Mutli Context in App
۱۴′
۱۸Combine context and useReducer
۱۴′
۱Overview
۲′
۲Adding Routes on App
۱۰′
۳Link and NavLink component
۸′
۴Nested Routes
۱۲′
۵More on Nested Route
۹′
۶Dynamic Route
۱۵′
۷SearchParams
۱۷′
۸useNavigate Hook
۱۵′
۹Navigate Component
۸′
۱Overview
۹′
۲Header SearchItems
۱۲′
۳Search options dropdown
۱۱′
۴Operation on option
۱۲′
۵useOutsideClick Hook
۱۲′
۶Date Range
۱۰′
۷LocationList Component
۱۰′
۸Install json-server
۸′
۹setSearchParams and nvaigate to hotels
۱۲′
۱۰Create nested route on hotels
۷′
۱۱Filter based on SearchParams
۱۵′
۱۲Search Result Item
۱۲′
۱۳Create Hotel Provider
۷′
۱۴Show hotel on map
۱۲′
۱۵Sync map center with latitude and longitude
۱۲′
۱۶useGeolocation hook for detect user location
۱۹′
۱۷Single hotel view
۸′
۱۸Current hotel as Context
۱۴′
۱۹Event click on map
۱۴′
۲۰Add bookmark context
۱۳′
۲۱Bookmark list
۱۰′
۲۲Current bookmark
۱۳′
۲۳Add new bookmark
۱۱′
۲۴Fetch location data
۱۹′
۲۵Create new bookmark
۱۹′
۲۶Delete bookmark
۱۱′
۲۷Advanced pattern for context and useReducer on Async actions #1
۱۶′
۲۸Advanced pattern for context and useReducer on Async actions #2
۱۶′
۲۹Fake Auth provider
۱۱′
۳۰Implementing login and logout
۱۵′
۳۱Protected Route
۱۱′
۱Overview
۱′
۲State Managment methods
۱۰′
۳Redux principles
۷′
۴Adding first reducer
۱۱′
۵useSelector and useDispatch
۱۲′
۶Action creator and action types
۶′
۷Multi state in redux store
۱۰′
۸Reducer on Async actions
۱۱′
۹Action creator on async action
۱۹′
۱۰Load async data in component
۷′
۱۱Redux devtool extention
۹′
۱Overview
۱′
۲Local (client) state in redux-toolkit
۱۹′
۳Async (Remote) state in redux-toolkit
۱۷′
۴Emit Async actions
۶′
۵TodoSlice
۱۶′
۶TodoSlice action for local state
۱۲′
۷getAsyncTodo
۱۴′
۸addAsyncTodo
۸′
۹Toggle and Remove asyncTodo
۱۳′
۱Overview
۶′
۲Run backend project
۸′
۳user authentication in postman
۱۵′
۴refresh token and access token approach
۹′
۵Create project and proposal
۱۶′
۶Install tailwindCSS
۱۰′
۷Add color to tailwindCSS
۱۷′
۸authentication scenario
۱۰′
۹Feature based folder structure
۱۵′
۱۰SendOTP form
۱۶′
۱۱Customzie tailwind class
۷′
۱۲CheckOTP markup
۱۷′
۱۳HttpService module
۱۰′
۱۴sendOTP handler
۱۵′
۱۵Mutate getOTP
۱۲′
۱۶Mutate check OTP
۱۷′
۱۷Resend OTP
۱۶′
۱۸Edit PhoneNumber
۷′
۱۹Complete profile form
۹′
۲۰RadioInput Component
۶′
۲۱Complete profile
۸′
۲۲push user after complete profile
۱۰′
۱AppLayout
۱۱′
۲useUser Hook
۱۲′
۳Owner sidebar
۱۷′
۴useOwner Projects
۸′
۵ProjectTable V1
۱۳′
۶Utils function
۸′
۷Compound componnet on Table
۱۳′
۸Modal markup
۱۴′
۹Confirm Delete Componnet
۱۵′
۱۰useRemvoe Projects
۱۸′
۱۱useOutsideClick hook
۱۲′
۱۲Introducing React Hook Form
۱۰′
۱۳TextField with React Hook Form
۱۷′
۱۴Apply React Hook Form on all forms
۲۰′
۱۵Select Option,Tags and DatePicker Component
۱۶′
۱۶useCategories hook
۸′
۱۷Create New Project
۱۱′
۱۸useEditProject
۱۶′
۱۹Toggle Project Status
۱۸′
۱AppHeader
۱۱′
۲User Logout
۱۲′
۳Adding Dark Mode on Application
۱۸′
۴useLocalStorageState
۱۹′
۵Dynamic App Layout
۱۲′
۶Owner Dashboard
۹′
۷Stat Component
۱۵′
۱Freelancer Layout
۷′
۲Freelancer Stats
۱۷′
۳ProposalTable
۱۰′
۴ProjectList (لیست پروژه های کارفرما ها)
۱۵′
۵Create Proposal Form
۱۱′
۶useCreateProposal
۱۵′
۷Filter Drop Down (فیلتر داده ها به کمک کوئری استرینگ)
۱۳′
۸Filter Component (فیلتر داده ها به کمک کوئری استرینگ)
۱۶′
۹Query String For Filtering Data
۱۵′
۱۰Convert Query String to Quer Object
۵′
۱۱useAuthroize (بررسی سطح دسترسی کاربر)
۱۹′
۱۲Protected Route (ایجاد گارد بر اساس نقش کاربر)
۸′
۱Overview
۲′
۲Admin Layout
۷′
۳Admin Dashboard
۹′
۴UsersTable
۱۰′
۵useChangeUserStatus
۱۵′
۶Projects and Proposals Route
۵′
۷Fix minor bugs
۷′
۱Overview
۲′
۲Importance of Testing
۵′
۳Types of Tests
۶′
۴Vitest VS. Jest
۷′
۵Install Vitest
۹′
۶Testing Sum Function
۸′
۷Grouping Tests
۲′
۸Coverage
۸′
۹In-source Testing
۶′
۱۰Install Vitest in React.js
۴′
۱۱First test in React.js
۹′
۱۲Test Structure
۲′
۱۳Query Methods
۸′
۱۴Using query methods -1
۱۰′
۱۵Using query methods -2
۱۵′
۱۶Priority in query types
۶′
۱۷Asserstions
۱۳′
۱۸fireEvent
۱۵′
۱۹Testing Note App
۱۵′
۲۰Integration Test
۱۱′
۲۱Custom render
۸′
۲۲Custom hooks
۶′
۲۳act utility
۳′
۲۴mock function
۱۴′
۲۵mock request
۴′
۲۶Install MSW
۹′
۲۷Testing with MSW
۶′
۲۸MSW error handling
۶′
۱Overview
۴′
۲CSS Module
۱۱′
۳Why Styled-component
۱۰′
۴Basic Styling
۵′
۵Props on component
۴′
۶Extending Styles
۵′
۷Pseudoclass selectors
۴′
۸Reusable Handling
۷′
۹Global Style
۱۵′
۱۰Button Component
۹′
۱۱Adding Attrs
۵′
۱۲ButtonIcon
۷′
۱Deploy Overview
۳′
۲Deploy Methods
۷′
۳Build vite.js apps
۱۱′
۴Deploy on netlify
۷′
۵Deploy on vercel
۴′
۶Deploy Manually
۳′
۷Adding domain to liara
۴′
۸Create database
۴′
۹Deploy backend app
۱۲′
۱۰Environment variable
۱۰′
۱۱Create frontend platform
۶′
۱۲Deploy frontend
۹′
۱۳Connect to local DB
۳′
۱what is webpack and babel
۱۴′
۲adding gitignore and run scripts
۵′
۳compile javascript with babel in project
۶′
۴adding webpack to Application
۸′
۵adding webpcakc.config.js file
۸′
۶adding babel in webpack
۱۲′
۷adding css and style loader
۹′
۸adding webpack devServer
۶′
۹minimizing and uglifying code
۶′
۱۰چرا لازمه اپلیکیشن های ریکت (CRA) کانفیگ بشه؟
۹′
۱۱نصب ریکت با webpack - babel
۱۸′
۱۲اضافه کردن لودرهای css - image
۵′
۱۳تغییر ساختار برنامه
۶′
۱۴ایجاد تنظیمات جداگانه webpack بر اساس فاز توسعه و تولید
۱۹′
۱۵اضافه کردن react-refresh به برنامه
۷′
۱۶اضافه کردن prettier - eslint
۴′
۱۷استفاده از CRACO برای کانفیگ CRA
۱۳′
۱۸ایجاد react-scripts fork
۶′
۱۹publish custom CRA on NPM
۱۱′
۲۰استفاده از CRA کاستوم خودمان
۶′
۱دوره در مسیر فریلنسری و گیت هدیه دوره ریکت هست و همه مباحث فریلنسری کامل ارائه شده.
۲۰۰′

سوالات متداول

بله قطعا. این دوره در تابستان ۱۴۰۲ به صورت کامل بر اساس ریکت ۱۸ و ریکت روتر دام ۶ ضبط مجدد شده است.

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

یکی از مزیت های این دوره جدا از سرفصل های جامع، تدریس مباحث پیشرفته هم چون Redux, Redux-thunk. Redux-saga, Context, کار با دیتابیس و API بک اند Redux-toollkit, custom hooks, بهینه سازی ریکت و اعتبار سنجی فرم هاست.

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

۴,۶۹۸,۰۰۰
saheb mohamadi | صاحب محمدی

صاحب محمدی

مدرس دوره

داستان برنامه نویس شدن من برمیگرده به سال ۹۳. همون موقع که برای پروژه های دانشگاه (رشته مهندسی نفت) برنامه نویسی میکردم. کم کم با MATLAB آشنا شدم و بعدا وارد حوزه برنامه نویسی وب شدم و الان حدود ۱۰ ساله که شغل تخصصی من برنامه نویسی وب هست. علاقه من جاوااسکریپت و خاندانش است. به همین دلیل فرانت هوکس رو بنا کردم تا تجربه چند ساله رو در قالب دوره های پروژه محور به علاقه مندان این حوزه انتقال بدم ☘️🤍.

میتوانید دیدگاه خود را ثبت کنید