چه چیزی یاد خواهید گرفت؟
فصل اول- ریکت چیست
فصل دوم- مروری مباحث اكما اسکربیت ۶
1- تفاوت let و var و const
2- مفهوم reference type و primitive type
3- استفاده از Spread operator
4- نحوه Object destructuring جاوااسکریپت
5- مبحث Arrow function
7- Import و export
6-map کردن آرایه ها
8- کلاس ها
9- ارث بری
12- مفهوم ماژول و برنامه نویسی ماژولار
13- کار با متد filter در جاوا اسکریپت
14- کار با متد reduceدر جاوا اسکریپت
15- مفاهیم Truthy – Falsy values
فصل سوم-class component ها و مفاهیم اولیه ریکت
1- مفهوم virtual DOM در ریاکت
2- بررسی آخرین تغییرات ریکت
3- راه اندازی یک پروژه ریاکت
4- JSX چیست؟
5- بررسی ساختار فایل ها و فولدر ها(folder structure)
6- ایجاد پروژه ریکتی با استفاده از vite
7- Class component ها
8- مفاهیم JSX
9- مفهوم reusable component(کامپوننت های با قابلیت استفاده مجدد)
10- Functional component ها
11- بحث dynamic content
12- props در کلاس کامپوننت ها
13- props در فانکشنال کامپوننت ها
14- مفهوم state
15- استفاده از setState
16- React snippets
17- Destructuring در ریاکت
فصل چهارم- روش های مختلف استایل دهی و اضافه کردن css به پروژه های ریکت
فصل پنجم- فرم ها و event ها
فصل ششم- Conditional rendering و List Rendering
فصل هفتم - چرخه حیات (Lifecycle)
فصل هشتم-مفاهیم پیشرفته ریکت
فصل نهم-ajax و درخواست های https در ریاکت
فصل دهم- سایت های تک صفحهای یا Single Page Application (SPA)
فصل یازده- hook ها و functional component ها در ریکت
فصل دوازده- تمرین چندین پروژه کاربردی
فصل سیزده-دیپلوی کردن پروژه بر روی هاست های رایگان vercel و netlify
فصل چهارده-ارتباط با API بک اند (Promise, Async await, Axios)
فصل پانزده-بررسی کامل Redux و Redux-thunk
فصل شانزده- پروژه ریداکس
فصل هفده- آموزش کامل GraphQL و اتصال آن به ریکت
فصل هجده-پروژه وبلاگ | GraphQL - Material UI
فصل نوزده-متغییرهای محیطی
فصل بیست- کانفیگ پروژه های ریکت با Webpack & Babel
فصل بیست و یک - پروژه ها
1- وبسایت فروشگاهی که به صورت SPA هست و از api داخل آن استفاده شده است.
2- سبد خرید با استفاده از context و useReducer
3- سبد خرید با استفاده از Redux و redux-thunk
4- صرافی ارز دیجیتال برای نشان دادن قیمت ارز های دیجیتال و قابلیت سرچ کردن
5- فرم ثبت نام و ورود به همراه اعتبار سنجی.
6- پیامرسان شبیه واتساپ با قابلیت چت بین چند نفر، ساختن گروه، ارسال عکس و… .
7- پروژه وبلاگ با قابلیت مدیریت محتوا، کامنت گذاشتن برای هر مقاله، صفحه نویسنده و ...
8- پروژه Dashboard Admin حرفه ای با ریاکت
9- پروژه فروشگاه آنلاین با احزار هویت و بک اند واقعی
در مورد این دوره
ریاکت چیست؟
ریاکت یک کتابخانه محبوب و پرطرفدار جاوااسکریپت برای ساخت رابط کاربری و توسعه فرانت است، این کتابخانه توسط Facebook پشتیبانی میشود و در پروژه های بزرگی مانند Instagram و Twitter و Paypal استفاده شده است.
چرا ریاکت مهم است؟
ممکنه خیلی از برنامه نویس ها مهارت هایی مثل HTML&CSS و جاوااسکریپت رو داشته باشند که البته برای یک توسعه دهنده فرانتاند این مهارت ها کاملا مهم و ضروری است. اما باید دقت کنید که امروزه بدون شک برای توسعه هر سایتی علاوه بر جاوااسکریپت، از فریم ورک ها و لایبرری های جاوااسکریپت هم استفاده میشود، پس باید با ابزار های به روز و پرکاربرد آشنایی داشته باشید.
پس اگر به HTML,CSS و Javascript تسلط داری، وقتشه که با آموزش ری اکت تیرخلاص رو بزنی و خودتو به همه اثبات کنی! برو بریم
چرا باید ریکت رو فرا بگیریم ؟
ریکت به عنوان تیر خلاص برای یک هنرجوی فرانت برای استخدام هست. چون این روزا عملا هیچ پروژه ای با جاوااسکریپت خام (vanilla JavaScript) انجام نمی شود. چون که به کمک ریکت پروژه در نهایت سادگی و در کمترین زمان ممکن با بالاترین عملکرد انجام می شود. علاوه بر این، استفاده از ابزار جدیدی مثل ریکت، هزینه توسعه و نگه داری پروژه ها رو تا حد چشم گیری کاهش می دهد. پس طبیعتا شرکت ها هم به دنبال متخصص ریکت هستند.
ساختار کلی دوره چطوریه ؟
مفاهیم class / functional component روی یک پروژه تمرینی بررسی میشه. استیت و پراپس ها رو میگیم. بعدش میرسیم به context و چرخه عمر کامپوننت ها. قدم بعدی، مفاهیم filter, search, sort رو بهتون میگم. بعدش میریم سمت react-router ، http request و پروژه های دیگه برای ترکیب مفاهیم گفته میشه. بعدش Redux رو میگیم و میریم سمت پروژه اصلی دوره.
ویژگی های دوره:
پروژه محور بودن دوره (پروژه های کاربردی که در پروژه های واقعی هم پیاده میشوند)
آپدیت بودن دوره:شامل ریکت ورژن ۱۸و react-router-dom ورژن ۶
پوشش مباحث مربوط به Redux - Redux-thunk در پایان همین دوره.
آموزش GraphQL و انجام پروژه وبلاگ
بررسی مفاهیم مهم و کاربردی ریاکت و همچنین استفاده از آن در پروژه های دوره.
دیپلوی کردن پروژه ها بر روی هاست های رایگان.
مزیت های دوره:
این دوره پشتیبانی دائمی دارد و همیشه پاسخگوی سوالات دانشجویان خواهم بود.
تمام دانشجو های،آکادمی الما وب از وبینار های ماهانه برخوردار خواهند شد که باعث میشود مشکلات خود را چه در زمینه آموز و چه در زمینه استخدام سریعتر حل کنند و زودتر به نتیجه برسند.
با آپدیت های جدید ریاکت این دوره هم آپدیت خواهد شد و به صورت رایگان در اختیار دانشجویان دوره قرار خواهد گرفت.
در صورت تقاضای دانشجویان قسمت های جدید بسته به نیاز آن ها اضافه خواهد شد.
پذیرای انتقادات و پیشنهادات شما هستم و همیشه سعی در ارتقای دوره ها خواهم داشت.
قطعا نه، هر آنچه که برای تسلط شما به ریاکت و ورود به بازار کار لازم است در این دوره گفته شده است و بعد از این دوره به مهارت بالایی خواهید رسید که شما را از هر دوره دیگری بی نیاز میسازد.
پروژه ها:
وبسایت فروشگاهی که به صورت SPA هست و از api داخل آن استفاده شده است.
سبد خرید با استفاده از context و useReducer
سبد خرید با استفاده از Redux و redux-thunk
صرافی ارز دیجیتال برای نشان دادن قیمت ارز های دیجیتال و قابلیت سرچ کردن
فرم ثبت نام و ورود به همراه اعتبار سنجی.
پیامرسان شبیه واتساپ با قابلیت چت بین چند نفر، ساختن گروه، ارسال عکس و… .
پروژه وبلاگ با قابلیت مدیریت محتوا، کامنت گذاشتن برای هر مقاله، صفحه نویسنده وپروژه حرفه ای با ریاکت
پروژه فروشگاه آنلاین با احزار هویت و بک اند واقعی
نظرات (0)
تفاوت های بین var, let و const
مفهوم و ویژگی های Arrow Function
مفهوم Array Destructuring در Es6
نحوه کار با Object Destructuring
نحوه کار با Ternary Condition در جاوا اسکریپت
Import و export
نحوه کار با متد map برای آرایهها
کار با متد filter در جاوا اسکریپت
نحوه استفاده از متد بسیار مهم reduce
مفهوم reference type و primitive type
کلاس ها
ارث بری
بررسی مفاهیم اولیه ریاکت
نصب و پیشنیازهای ریکت
ایجاد پروژه ریکتی
کامپوننت ها در ریکت
JSX چیست و چرا باید از آن استفاده کنیم؟
چطور باید به کامپوننت های ریاکت استایل بدیم؟
پیاده سازی مینی پروژه جذاب با ریکت
طراحی بخش محتوا سایت
طراحی بخش بنر سایت
طراحی بخش فوتر سایت
Virtual Dom چیست و چه کاربردی دارد؟
نصب اکستنشن React Snippets
کامپوننت های کلاسی استفاده کنیم یا فانکشنال
مفهوم Class Components و نحوه استفاده از آن ها
مفهوم Prop و نحوه استفاده از آن ها در Functional Component
استفاده از Destructuring برای دریافت props
استفاده از spread برای ارسال راحتتر prop
مقدار دهی default برای propها در Functional Components
تغییر اسم prop در شرایط لازم
مفهوم children special prop
props در class components
state چیست
چرا نمیتوانیم اسم ویژگی state را تغییر دهیم؟
3 روش برای this binding در class components
2 روش برای تغییر state به کمک متد setState
Event ها در ریاکت
نحوه استفاده از useState در کامپوننت های Functional
event ها در ریکت
بررسی انواع input ها
select option ها
افزودن radio button به فرم
هندل کردن تمام event ها در یک فانکشن
نحوه submit کردن فرم
ClassName در ریکت
Inline styling
CSS Modules
global css
styled-components
Props on component
Extending Styles
Pseudoclass selectors
ThemeProvider
Mixins
ButtonIcon
lifting state up
پیاده کردن lifting state up در ریکت
passing function as props
passing Jsx as props
passing component as props
change-form
color
todolist-01
todolist-02
قسمت 1
قسمت 2
قسمت 3
قسمت4
قسمت 5
قسمت 6
قسمت 7
فایل پروژه
بررسی Life cycle ها در ریکت
هوک useEffect
ارسال درخواست به api
نشان دادن دیتای fetch شده در UI
بررسی Loading
استفاده از async/await
هندل کردن error ها
بررسی dependency ها
ارسال http request ها در event
بررسی Cleanup function
Demo
part2-0-1
part2-0-2
part3
part4
part5-01
part5-02
فایل پروژه
معرفی Single Page Application(SPA) ها-ایجاد route های مختلف
ویژگی های کامپوننت NavLink
استفاده از Link برای جا به جایی بین صفحات
ایجاد صفحه 404
بررسی Dynamic Route ها
هوک useParams
Dynamic Route MinProject
Dynamic Route MinProject
هوک useNavigate
استفاده از Navigate و redirect کردن کاربر
بررسی Nested Route ها
مفهوم Context در ریکت
استفاده از useState با یک مثال
هوک useContext
part1-Demo
part2-FormContext
part3-FormContext
Part4-StepContext
Part5-ComponnetForm
Part6-FormComponent
Part7-ComponnetForm
Part8-RenderStep
Part9-EndFile
Ant Design
Button
FloatButton
Typography
Alert
Modal
Drawer
Message
Menu
Grid-Flex
Card
Layout
Ant Design-End
ConfigProvider
Demo پروژه
طراحی navbar
روترهای سایت
Data-item
componentProduct
productand shop
modal
context
getProduct
addItemToCart
removeItemFromCart
getTotalAmount
CartContextProvider
CartProduct
end
لایبرری Axios
ارسال در خواست GET
ارسال درخواست POST
ارسال درخواست DELETE
ارسال درخواست PUT & PATCH
هندل کردن ارور ها
بررسی Simultaneous Requests و متد spread
مفهوم Interceptor
پیاده سازی Interceptor برای request های ارسالی
پیاده سازی Interceptor برای response های برگشتی
بررسی Instance ها
مقدمه و پیاده سازی مثال اولیه با State
ساختار هوک useReducer
هندل کردن action ها
بررسی type و payload
هندل کردن initialState
multiple reducers
استفاده از Api و Http request در useReducer (قسمت اول)
استفاده از Api و Http request در useReducer (قسمت دوم)
تفاوت useState و useReducer
Demo
TICK
NEXT_QUESTION
FINISH_QUIZ
SELECT_OPTION
INCREMENT_SCORE
SAVE_ANSWER
RESTART_QUIZ
QuizProvider
Quiz
FINISH_QUIZ
Quize-isQuizFinished
handleOptionClick
Result
ProgressBar
Timer
OptionButton
Question
Loader
App
result
End
Ref
useRef in React
usememo
memo
useid
customhook
customhook
useDebug
deref
useforward
usecallback
localstoreg
Part1-Demo
part2-initialstate
part3-action-SET_POSTS
part4-action-ADD_POST
part5-action-DELETE_POST
part6-Action-EDIT_POST
part7-action-SET_SEARCH_QUERY
part8-action-SET_LODING
part9-action-SET_ERROR
part10-action-CLEAR_POSTS
part11-PostProvider
part12-useCallback-set
part13-useCallback-addpost
part14-useCallback-deletpost
part15-useCallback-editPost-search
part16-filteredPosts-usememo
part17-sortedPosts-usememo
part18-postprovider
part19-postlist
part20-postform
part21-usePosts
part22-MAin
part23-Result
part24-SearchPosts
part25-Header
part25-Header
part27-List
part28-TopPosts
part29-Posts
part30-result
معرفی ریداکس
مفاهیم ریداکس
راه اندازی ریداکس
ساخت action
reducer
store
dispatch
payload
Redux Toolkit
slice
store
provider
useselectore
dispatch
payload
middlewer
extraReducers
Async action و https – قسمت اول
Async action و https – قسمت دوم
کتابخانه Zustand
store
تابع Set
تابع Get
ساخت Async action
تقسیم کردن State های مرتبط
تقسیم کردن State های مرتبط
react-query
چطور از React Query در ری اکت استفاده کنیم
مقدار isLoading-isError -error -data در React Query
قابلیت Focus Refetching
React-Hook-Form
hookform/resolvers - yup
GraphQL چیست؟
آشنایی با سینتکس و نحوه نوشتن Query
پاس دادن متغییر به query و فیلتر کردن
آشنایی با سینتکس Mutation و نحوه نوشتن آن
آپدیت کردن دیتا با Mutation
حذف کردن دیتا با Mutation
متصل کردن پروژه ریکتی به GraphQL
گرفتن اطلاعات با هوک useQuery
استفاده از هوک useLazyQuery
کار با هوک useMutation برای ارسال دیتا
آپدیت کردن دیتا با هوک useMutation
حذف کردن دیتا با هوک useMutation