Pro Frontend Engineer ReactJS + TypeScript + Redux - بالعربى
Loại khoá học: Web Development
Master ReactJS with TypeScript, Redux, Tailwind CSS, API Integration, Performance Optimization, SEO, and More!
Mô tả
ريأكت هي إطار عمل جافا سكريبت شهير ومعروف عالمياً يستخدم لبناء واجهات المستخدم. وهي تتميز بسهولة الاستخدام والقدرة على إنشاء واجهات المستخدم الديناميكية والسريعة. بالإضافة إلى ذلك، يتم استخدام رياكت في العديد من التطبيقات التي تتطلب واجهات المستخدم المتطورة، مما يجعلها أداة قوية للمطورين الذين يسعون إلى تطوير تطبيقات الويب الحديثة والمتطورة.
ريدكس هي إطار عمل يستخدم لحالة التطبيق العالمي في جافا سكريبت. يمكن استخدامها مع ريأكت لإدارة حالة التطبيق بسهولة، وبالتالي تساعد في إنشاء تطبيقات سهلة الصيانة والتوسع.
سيتم تغطية مفاهيم رياكت و ريدكس في هذه الدورة، بالإضافة إلى كيفية استخدامهما معًا لإنشاء تطبيقات الويب المتطورة. ستتعلم كيفية إنشاء مكونات ريأكت وكيفية إدارة حالة التطبيق باستخدام ريدكس. ولتحقيق تجربة تعلم متكاملة، ستتعلم أيضًا كيفية تطبيق الوصول الخارجي للبيانات وكيفية تنفيذ اختبار الوحدات والاختبارات المتكاملة.
سيتم تقديم هذه الدورة من قبل مدربين ذوي خبرة في رياكت و ريدكس وستكون الدورة عملية وتحتوي على العديد من الأمثلة العملية والتمارين العملية للمساعدة في التعلم. وستوفر هذه الدورة للطلاب الذين يرغبون في تعلم كيفية إنشاء تطبيقات الويب المتطورة باستخدام ريأكت و ريدكس الفرصة للتعلم من المدربين المؤهلين والمحترفين في المجال، وهذا سيكون مفيداً بالنسبة للطلاب الذين لديهم خبرة سابقة في جافا سكريبت ويرغبون في تطوير مهاراتهم في بناء تطبيقات الويب المتطورة.
سيتم تغطية مفاهيم رياكت و ريدكس في هذه الدورة، بالإضافة إلى كيفية استخدامهما معًا لإنشاء تطبيقات الويب المتطورة. ستتعلم كيفية إنشاء مكونات ريأكت وكيفية إدارة حالة التطبيق باستخدام ريدكس. ولتحقيق تجربة تعلم متكاملة، ستتعلم أيضًا كيفية تطبيق الوصول الخارجي للبيانات وكيفية تنفيذ اختبار الوحدات والاختبارات المتكاملة.
Bạn sẽ học được gì
Yêu cầu
Nội dung khoá học
15 sections
أحصل على كوبون خصم
01:29
Introduction
03:29
What and Why TypeScript
11:05
TypeScript Setup
09:45
Watch Mode
04:36
Compiler Options
05:21
Catch Errors during Development Mode
06:28
Type Annotations VS Inference
13:36
String, Number, Null, and Undefined
06:16
Object, Array, Tuple, and Void
12:57
Object Spread Operator and Destructuring
06:46
Interfaces
05:27
Extends Interface
02:37
Type Keyword
03:59
Record
05:11
Keyof
06:46
Function With Array Destructuring
05:54
Function Rest Parameters
05:22
Introduction
03:08
Generate New Vitejs Project
07:49
Dependencies Vs Dev Dependencies
07:20
Running And Stopping Our App, And Build
03:11
Folder Structure After Installing Using Vite
10:53
What Is Entry File
05:25
What Are Components In React, And Components In Real Example
04:39
Write Your First Component
11:27
Export Vs Export Default
10:28
Intro To JSX And Babel
05:38
JSX Rules Part 1
06:51
JSX Rules Part 2
09:22
Inline Styles - Made
13:25
Styles Using Sass
11:33
Introduction To Props
07:54
Validate Component Props With Typescript
04:00
Object And Array Destructuring
08:40
Components Children
09:53
Why useState Hook Is So Important
08:02
Understanding useState Hook usage In Depth
12:06
Form Submitting
13:59
Controlled Input Vs Uncontrolled Input
10:02
Listening To User Input
07:02
Catch Input Values With On Function
10:25
Combine Multiple State In One State
09:43
Combine All What We Learn In On Lesson
12:20
Form Inputs Formatting (Important)
16:12
Why Key Attribute Is So Important
11:01
Explain Why Not Use Index As A Key In React Lists
15:31
React Dev Tools
02:31
Make A Github Repo
06:29
Project #1 Challenges
02:09
New Project Setup
02:29
Typescript Component
06:10
Create You Own Vs Code Snippet
10:48
Alert Component
08:10
Alert Style Using Sass
09:26
Dynamic Alert Component
10:32
Sass In Depth
12:43
Alert Types Guards
09:26
Project #2 Challenges
05:20
Initialize New Github Repo
03:33
Add Tailwind CSS To Our Project
08:19
Thinking In Project Card Component
06:29
Tailwind CSS Basics
08:18
Tailwind CSS Mobile First Rule
11:57
Product Card Style With Tailwind CSS
16:46
Reusable Image Component
05:02
Reusable Button Component
08:48
Button Component Design System Basics Part 1
05:16
Button Component Design System Part 2
05:30
Render Product List
06:26
Text Slicer Utility Function
06:26
JSDOC (Clean Code)
03:35
Responsive Time
09:03
Take A Quick Break
02:29
Introduction To Headless Ui
04:21
Modal Component
04:22
Advanced Modal Component
13:39
Reusable Form Input Component
12:31
Enhance Add Product Form
08:26
Strict Product Type
10:19
Fix Static Input Name Type
10:42
Form Submitting
08:09
Build Your Own Validation Schema Part 1
14:39
Build Your Own Validation Schema Part 2
10:24
Thinking In Errors Message
09:05
Error Message Component
09:23
Toggle Error Message
04:06
Circle Color
12:17
How To Get Prev Value From State
12:04
Validate Temp Color
05:11
Post A New Product
12:51
Tailwind Ui Select Menu
04:48
Category Select Menu
06:08
Assign Product Category
06:21
Product To Edit
06:13
Product Edit Modal
07:16
Editiable Product Inputs
07:00
Render Product Input
12:26
Update Product With Array Index
13:03
Concat Product To Edit Colors
08:08
Update Product Category
12:12
Enhance Project UI
07:31
Remove Product And Show A Toaster
09:52
What is Component Lifecycle
02:09
Component Mounting
07:08
Constructor Method
11:26
Re-Render Concept
06:37
ComponentDidMount Method (Fetch Data From API)
10:19
ComponentDidUpdate Method
05:49
ComponentWillUnmount Method
06:41
useEffect Hook Syntax
10:27
Depenency List
09:54
useEffect Cleanup
04:32
Abort Controller (Request Cancelation)
10:32
IIFE
04:40
Routing Setup
05:00
Create Routes From Elements
06:43
Link Component Problem Outside Router Context
05:06
Introduction To Page Layout
07:31
Layout Children (Outlet Component)
05:35
Re-Structure Pages Layout
09:08
Active Link Styles With Navlink
03:43
React.js Docs Learn Layout
07:38
React.js Docs Learn Pages
07:44
Fix Routes Matching Conflict
03:47
Clone React Docs
01:26
Protected Routes Scenario
09:27
Protected Route Component
09:35
Navigate State And Replace Props
09:00
Error Element
06:44
Build Your Own Error Handler Component
12:49
Page Not Found Component
04:51
Push To Github
02:31
Project #3 Challenges
08:21
What Is An API
07:54
What Is A Rest API
11:53
What Are Crud Operations
04:39
What Are Path Parameters
05:44
What Are Query Parameters
04:27
Postman Setup
04:45
API Collection
07:02
Collection Environment Variables
04:14
Organize API Collection Requests
12:03
Post Request
08:40
Put And Delete Requests
04:06
Login User And Get Token
04:32
How JWT Works
08:37
What Is Bearer Token
08:58
Install Strapi Project
02:48
Create A New Collection In Strapi
05:11
Show Todo Via API
03:19
Authenticated Todos
03:22
Login And Register
07:54
Database Relationships
05:26
Get User Profile Data
04:22
CRUD Operations On My Todos
07:38
Clone Starter Repo
05:17
Validation With React Hook Form
08:33
Form Input Errors
07:08
What Is ForwaredRef
09:28
Validation Rules
04:05
Error Message Component
06:36
Axios Setup Instance
06:08
Pending, Fulfilled, And Rejected
05:09
Refactor Register
10:52
Validation Schema With Yup
08:27
Handle User Register With Feedback
11:22
Disabled Button While Submitting
09:17
Axios Error Handling
09:56
User Login
08:47
Project Flow After Login
16:51
User Logout
03:41
Fetch Data Using useEffect
14:03
React Query
11:03
useQuery Hook
14:27
Error Handling And Requst Options
07:40
Build Your Own Authenticated Custom Hook
10:39
Make A Custom Modal
08:56
Todo To Edit Setter
09:18
Update Authenticated Todo Via Api
15:43
Refetch When Query Key Changes
08:22
Remove Todo Modal
02:07
API Delete Todo Request
08:34
Todo Row Skeleton
07:58
Post A New Todo
09:58
Fix Query Key, And Button Type Issues
13:10
Important Update About Models Relationships
08:04
Associate User With Todo
03:44
Generate Fake Todos
10:12
Paginator For API Pagination
12:18
Explain API Pagination
09:10
Build Your Own API Pagination Component Part 1
14:05
Build Your Own API Pagination Component Part 2
11:26
API Sorting And Page Size
13:06
Pain Of Component Re-Render
07:45
What Is Memoization, and memo(HOF)
12:09
Components Profiling
11:05
Introduction Function Recreation
08:09
useCallback Hook
09:06
Problem Behind Objects As Props
09:11
What Is Shallow Comparison In React
09:21
Prevent Object Recreation With uesMemo Hook
08:10
Memoized Expensive Function
09:26
Optimized Product Card
11:25
Create Optimized Branch
03:33
Memoized UI Components
10:05
Modal Optimization
03:26
Optimized onChange
12:12
Optimize Input re-render With useRef Hook
10:43
Don't Worry To Much About Re-Render
10:07
List Virtualization
12:34
Introduction to State Management
04:40
What Is SSOT
07:51
What Is Redux
03:22
How Redux Works
07:06
Redux Toolkit Setup
06:07
Redux Dev Tools
02:23
Your First Slice
13:57
Counter Slice
09:50
useSelector Hook
05:32
Action Dispatch
09:33
Shopping Cart Slice
08:49
Add Item To Shopping Cart
09:44
Add Product To Cart Functionality
11:25
Get Cart Items
04:22
Profilling with Redux In Depth
06:16
Project Challenges
06:35
Basic File Component
06:00
Basic Folder Component
04:55
Basic File Tree Structure
06:25
File Tree Structure Types
07:35
Iterate Through File Tree
07:03
What Is Recursive Component
08:50
Display Nested Child
07:28
Working On File Icons
07:39
Toggle Opening Folder
03:57
Get File Extension
06:19
File Component Icons
09:46
Folder Component Icon
08:15
Refactoring (Important)
11:26
Redux Setup With Ts
01:41
File Tree Redux Slice
07:10
Dispatch Opened Files
09:13
Prevent Duplicate Opened File
10:28
Opened Files Bar
09:49
Dispatch Selected File Content
08:38
Active Tab Styles
09:02
Store And Actions Refactor - Made With Clipchamp
06:19
Code Syntax Highlighter
08:12
Remove Tab Handler
11:13
Fixing A Bug
04:36
Resizable Panel Component
06:44
Resizable Panel Config
07:00
Welcome Tab
07:54
Custom Context Menu
12:26
Fix Context Menu Bug
03:48
Context Menu Reference
07:05
Close Context Menu (Click Outside)
11:02
Close All Tabs
01:34
Close File Tab
08:41
Asynchronous Calls With Redux Toolkit
08:43
CreateAsyncThunk Usage
12:31
Get Data With CreateAsyncThuk
14:30
Access CreateAsyncThunk States
06:32
Introduction To RTK Query
07:46
RTK Query Builder (Query)
09:11
useGetProductsQuery Hook
06:00
RTK Query API Slice Config
12:00
RTK Query (Query Arguments)
07:37
What's Next
00:41
Before Start This Project
05:00
Intro To Chakra Ui
03:36
Chakra Ui Vs Tailwind CSS
06:32
Intro To Strapi (Server Side)
04:17
Generate Strapi Project
03:16
Intro To Strapi Dashboard Ui
03:15
Product Modeling
08:07
Database Modeling Relationships
08:25
Product, Category Entries
05:08
Show Entries Via API
05:04
API Populate
07:21
Fields Filter With Query Params
03:28
Server Side Pagination In Strapi
03:54
API Sorting
03:50
Register And Login
05:47
Client Side Setup
04:32
Intro Chakra Components Syntax
07:05
CSS Properties With Chakra Components
06:39
Product Card
06:41
Products Grid Layout
03:00
Get Products From API
02:41
Environment Variables
08:11
React Query
04:47
Product Card Skeleton
04:07
Product Page
07:14
Navbar With Chakra Ui
10:58
Login Form
08:12
Advanced Form Validation
07:15
Redux Toolkit Setup And User Login Middleware
06:30
User Login Submitting
06:34
Toastify Login Message
05:36
Cookie Service
05:01
Cookies Expire At
08:53
App Layout, And What Is Http Only Cookies
06:03
Protected Routes
06:12
Logout
03:40
Shopping Cart Slice
03:01
Add Product To Cart
06:08
Shopping Cart Drawer
07:28
Control Cart Drawer With Redux Toolkit
07:30
Increase Product Quantity If Exists (Free)
10:20
Shopping Cart Persist
03:40
Display Cart Items In Cart Drawer
06:41
Remove Items From Shopping Cart
04:43
Dashboard Layout
11:32
Products Table With Skeleton
04:30
Get Dashboard Products With RTK Query
07:49
Display Dashboard Products
05:38
Alert Dialog
04:55
Shared Alert Dialog Component
03:36
Mutations In RTK Query
06:14
Destroy Product Without Authorization (Free)
06:09
How API Requests Works
10:16
Send Token In Headers With Delete Request
04:15
Dynamic Product Id To Delete
05:36
Providestags And Invalidatestags In RTK Query
04:51
Custom Shared Modal
09:04
Update Product Form Part 1
09:49
Update Product Form Part 2
06:32
Form Data Vs Raw JSON
05:38
Product Form Data
05:27
onQueryStarted In RTK Query
06:44
Update Exists Product
08:32
Intro To Offline And Online Mode
03:01
Navigatro.Online
02:57
Internet Connection Provider
06:27
Internet Connection Toasts Setup
05:19
Toggle Internet Connection Toast
05:45
Network Slice
03:31
Why Providers Ordering Is So Important
02:35
Remove Event listeners (Important)
09:03
What Is Cloudinary
03:26
Upload Images On Cloundinary
11:32
Intro To Render
03:11
Deployment
05:17
What Is Next.js & Generate A New Project
07:43
Next.js Folder Structure
05:12
Next.js Route & Nested Routes
11:36
Introduction To Dynamic Routes
08:47
Navigation & Access Dynamic Routes
07:49
Data Fetching
11:26
Data Fetching With Server Components
07:35
Next.js Image With Remote Images
06:19
Next.js Image With Aspect Ratio
11:33
Loading UI
05:15
Error Handling
04:30
Pages Layout
07:20
Children With Layout
02:30
Route Groups
02:54
Introduction To Server Components
06:31
Next.js Build Server Component
05:17
Directives In Next.js
09:28
Streaming With Suspense
09:10
Introduction To API Routes
08:23
API Routes Usage
09:52
Improve SEO With Metadata
10:34
Dynamic Metadata
08:10
What Is Open Graph
04:49
CSR and Code Splitting
06:08
Server Side Rendering (SSR)
09:44
How To Choose Between SSR And CSR
05:54
Pre-Rendering Vs No Pre-Rendering
10:29
CSR Vs SSR Behind The Scenes
07:55
Production Build With CSR & SSR
08:45
How Next.js Enhance UX
13:35
List Virtualization In Next.js & Caching
11:53
What and Why Design System
09:00
Building Design System vs Using Frameworks
06:04
Pain without Design System
09:56
Component Base Variants
09:12
Button Variants
06:12
Implement Button Variants
15:13
How to merge variants together
08:17
From Size Variants to Pixel Perfect
13:48
Strings conditionally.
10:46
Control in Brand Color
06:21
HSL or RGB(a) colors
05:24
Apply HSL to tailwind CSS, Dark and Light Mode
08:57
Next.js Theme
07:01
Theme Provider
05:48
Theme Config
12:05
Fix Hydration Error
04:33
Apply colors in the whole project
12:25
Loading Button Skeleton
07:20
Border Radius Customizing
06:48
How to Deal with Figma Files
12:22
Pick components styles from Figma Files
09:16
Router Link Variants
09:04
Project #6 Demo
04:17
Add Shadcn UI
09:14
Toggle Dark Mode
05:49
Add Components With Shadcn UI
05:20
Button UI Component
05:43
Dialog Trigger
07:49
Database Modeling
09:11
How Database Relationship Works
06:12
What Is Prisma
06:08
Create Database On MongoDB
06:18
Connect MongoDB With Next.js App
06:01
Database Modeling With Prisma
14:24
Database Modeling With Relationships
08:35
How To Make DB Collections With Prisma
07:02
How Prisma Support TypeScript
10:40
Execute Non Module Files
07:56
Database Seeding
10:02
How To Generate Fake Data
11:25
How To Update The Database Collections
12:08
Server Actions
09:10
How To Use Server Actions
08:53
Drop Unnecessary Collections
09:38
Prisma Studio
06:42
Validation Schema With ZOD
09:06
Form Inputs with Validation
05:45
Validation Schema
12:48
Formatting
05:58
Fix Form Issues
05:22
Create A New Todo
07:37
Toggle Completed
10:01
Todos Table
10:31
Dynamic Table Data
06:49
Delete Todo Action
06:58
Separate Todos Table Actions
04:44
Update Cached Data
04:54
Data Sorting And Toggle Dialog
06:05
Update Todo Form
09:50
Update Todo Actions
07:13
Add User Id Field
07:48
How To Add Authentication To Nextjs App
10:27
Clerk User Profile
07:10
Store Logged In User in the DB
08:33
Assign Todo To Logged User
10:22
Error Handling
07:29
Deployment
12:11
Deployment Logs
03:55
Viết Bình Luận
Khoá học liên quan
![[NEW] Spring Security 6 Zero to Master along with JWT,OAUTH2](/uploads/courses/udemy/3485044_ef54_2.jpg)
Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!
Get khoá học giá rẻ ngay trước khi bị fix.
Đánh giá của học viên
Bình luận khách hàng