چه چیزی یاد خواهید گرفت؟
فصل اول- ریکت چیست
فصل دوم- مروری مباحث اكما اسکربیت ۶
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 و نحوه استفاده از آن ها
props در class components
مفهوم Prop و نحوه استفاده از آن ها در Functional Component
استفاده از Destructuring برای دریافت props
استفاده از spread برای ارسال راحت‌تر prop
مقدار دهی default برای propها در Functional Components
تغییر اسم prop در شرایط لازم
مفهوم children special prop
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
lifting state up
پیاده کردن lifting state up در ریکت
passing function as props
passing Jsx as props
passing component as props
بررسی Life cycle ها در ریکت
هوک useEffect
ارسال درخواست به api
نشان دادن دیتای fetch شده در UI
بررسی Loading
استفاده از async/await
هندل کردن error ها
بررسی dependency ها
ارسال http request ها در event
بررسی Cleanup function
معرفی Single Page Application(SPA) ها-ایجاد route های مختلف
ویژگی های کامپوننت NavLink
استفاده از Link برای جا به جایی بین صفحات
ایجاد صفحه 404
بررسی Dynamic Route ها
هوک useParams
هوک useNavigate
استفاده از Navigate و redirect کردن کاربر
بررسی Nested Route ها
مفهوم Context در ریکت
استفاده از useState با یک مثال
هوک useContext
لایبرری Axios
ارسال در خواست GET
ارسال درخواست POST
ارسال درخواست DELETE
ارسال درخواست PUT & PATCH
هندل کردن ارور ها
بررسی Simultaneous Requests و متد spread
مفهوم Interceptor
پیاده سازی Interceptor برای request های ارسالی
پیاده سازی Interceptor برای response های برگشتی
بررسی Instance ها
react-query
چطور از React Query در ری اکت استفاده کنیم
مقدار isLoading-isError -error -data در React Query
قابلیت Focus Refetching
React-Hook-Form
hookform/resolvers - yup
مقدمه و پیاده سازی مثال اولیه با State
ساختار هوک useReducer
هندل کردن action ها
بررسی type و payload
هندل کردن initialState
multiple reducers
استفاده از Api و Http request در useReducer (قسمت اول)
استفاده از Api و Http request در useReducer (قسمت دوم)
تفاوت useState و useReducer
change-form
color
todolist-01
todolist-02
قسمت 1
قسمت 2
قسمت 3
قسمت4
قسمت 5
قسمت 6
قسمت 7
فایل پروژه
