Pro Frontend Engineer ReactJS + TypeScript + Redux - بالعربى

Name: Pro Frontend Engineer ReactJS + TypeScript + Redux - بالعربى
Rating: 4.5 (899 reviews)

Created byMuhammad Naga (Codeawy)

Last updated 8/2024

Arabic

What you'll learn

TypeScript Support: Enhance code reliability with strongly typed TypeScript for improved development.
Component Mastery: Gain in-depth knowledge of React components, enabling modular and reusable code.
Real-World Projects: Apply acquired skills to practical and meaningful tasks, preparing for real-world scenarios.
We'll start by mastering the fundamentals of React, including components, JSX, props, events, state, and forms.
Best Practices: Follow industry-standard coding practices to ensure clean, maintainable, and efficient codebase.
Efficient Routing: Navigate seamlessly using React Router for easy and smooth page transitions.
Tailwind CSS: Develop UI rapidly using utility-first CSS, enabling quick and flexible styling.
State Management: Centralize and manage state efficiently with Redux, ensuring a scalable and maintainable application.
API Integration: Connect effortlessly to external APIs, integrating data and functionality seamlessly.
Authentication & Authorization: Secure user access and permissions, ensuring data protection and privacy.
Performance Optimization: Optimize app speed and responsiveness, delivering a seamless user experience.

Course content

18 sections • 482 lectures • 62h 4m total length

GET COURSE DISCOUNT??1:48
Introduction3:29
What and Why TypeScript11:05
TypeScript Setup9:45
Watch Mode4:36
Compiler Options5:21
Catch Errors during Development Mode6:28
Type Annotations VS Inference13:36
String, Number, Null, and Undefined6:16
Object, Array, Tuple, and Void12:57
Object Spread Operator and Destructuring6:46
Interfaces5:27
Extends Interface2:37
Type Keyword3:59
Record5:11
Keyof6:46
Function With Array Destructuring5:54
Function Rest Parameters5:22
Enums12:31
Generics11:00
Partial7:26
Index Signature6:20

What Is Promise5:52
Promises In Real Life5:58
Promise Constructor8:00
Promise Object Properties9:51
Create Your First Promise9:33
Access Fulfilled Promise Data7:25
Then Method7:08
Using Promises In Depth15:00
Promises Error Handling11:51
Refactor & Finally Method5:19
Promise.Race() Method11:10
Promise.All() Method5:40
Promise.Any() Method6:35
Intro To Async Await7:23
Convert From Promises To Async Await7:23
Get User Todos2:58
Error Handling With Try Catch8:59

Introduction3:08
Generate New Vitejs Project7:49
Dependencies Vs Dev Dependencies7:20
Running And Stopping Our App, And Build3:11
Folder Structure After Installing Using Vite10:53
What Is Entry File5:25
What Are Components In React, And Components In Real Example4:39
Write Your First Component11:27
Export Vs Export Default10:28
Intro To JSX And Babel5:38
JSX Rules Part 16:51
JSX Rules Part 29:22
Inline Styles - Made13:25
Styles Using Sass11:33
Introduction To Props7:54
Validate Component Props With Typescript4:00
Object And Array Destructuring8:40
Components Children9:53
Why useState Hook Is So Important8:02
Understanding useState Hook usage In Depth12:06
Form Submitting13:59
Controlled Input Vs Uncontrolled Input10:02
Listening To User Input7:02
Catch Input Values With On Function10:25
Combine Multiple State In One State9:43
Combine All What We Learn In On Lesson12:20
Form Inputs Formatting (Important)16:12
Why Key Attribute Is So Important11:01
Explain Why Not Use Index As A Key In React Lists15:31
React Dev Tools2:31
Make A Github Repo6:29

Project #2 Challenges5:20
Initialize New Github Repo3:33
Add Tailwind CSS To Our Project8:19
Thinking In Project Card Component6:29
Tailwind CSS Basics8:18
Tailwind CSS Mobile First Rule11:57
Product Card Style With Tailwind CSS16:46
Reusable Image Component5:02
Reusable Button Component8:48
Button Component Design System Basics Part 15:16
Button Component Design System Part 25:30
Render Product List6:26
Text Slicer Utility Function6:26
JSDOC (Clean Code)3:35
Responsive Time9:03
Take A Quick Break2:29
Introduction To Headless Ui4:21
Modal Component4:22
Advanced Modal Component13:39
Reusable Form Input Component12:31
Enhance Add Product Form8:26
Strict Product Type10:19
Fix Static Input Name Type10:42
Form Submitting8:09
Build Your Own Validation Schema Part 114:39
Build Your Own Validation Schema Part 210:24
Thinking In Errors Message9:05
Error Message Component9:23
Toggle Error Message4:06
Circle Color12:17
How To Get Prev Value From State12:04
Validate Temp Color5:11
Post A New Product12:51
Tailwind Ui Select Menu4:48
Category Select Menu6:08
Assign Product Category6:21
Product To Edit6:13
Product Edit Modal7:16
Editiable Product Inputs7:00
Render Product Input12:26
Update Product With Array Index13:03
Concat Product To Edit Colors8:08
Update Product Category12:12
Enhance Project UI7:31
Remove Product And Show A Toaster9:52

Routing Setup5:00
Create Routes From Elements6:43
Link Component Problem Outside Router Context5:06
Introduction To Page Layout7:31
Layout Children (Outlet Component)5:35
Re-Structure Pages Layout9:08
Active Link Styles With Navlink3:43
React.js Docs Learn Layout7:38
React.js Docs Learn Pages7:44
Fix Routes Matching Conflict3:47
Clone React Docs1:26
Protected Routes Scenario9:27
Protected Route Component9:35
Navigate State And Replace Props9:00
Error Element6:44
Build Your Own Error Handler Component12:49
Page Not Found Component4:51
Push To Github2:31

Project #3 Challenges8:21
What Is An API7:54
What Is A Rest API11:53
What Are Crud Operations4:39
What Are Path Parameters5:44
What Are Query Parameters4:27
Postman Setup4:45
API Collection7:02
Collection Environment Variables4:14
Organize API Collection Requests12:03
Post Request8:40
Put And Delete Requests4:06
Login User And Get Token4:32
How JWT Works8:37
What Is Bearer Token8:58
Install Strapi Project2:48
Create A New Collection In Strapi5:11
Show Todo Via API3:19
Authenticated Todos3:22
Login And Register7:54
Database Relationships5:26
Get User Profile Data4:22
CRUD Operations On My Todos7:38
Clone Starter Repo5:17
Validation With React Hook Form8:33
Form Input Errors7:08
What Is ForwaredRef9:28
Validation Rules4:05
Error Message Component6:36
Axios Setup Instance6:08
Pending, Fulfilled, And Rejected5:09
Refactor Register10:52
Validation Schema With Yup8:27
Handle User Register With Feedback11:22
Disabled Button While Submitting9:17
Axios Error Handling9:56
User Login8:47
Project Flow After Login16:51
User Logout3:41
Fetch Data Using useEffect14:03
React Query11:03
useQuery Hook14:27
Error Handling And Requst Options7:40
Build Your Own Authenticated Custom Hook10:39
Make A Custom Modal8:56
Todo To Edit Setter9:18
Update Authenticated Todo Via Api15:43
Refetch When Query Key Changes8:22
Remove Todo Modal2:07
API Delete Todo Request8:34
Todo Row Skeleton7:58
Post A New Todo9:58
Fix Query Key, And Button Type Issues13:10
Important Update About Models Relationships8:04
Associate User With Todo3:44
Generate Fake Todos10:12
Paginator For API Pagination12:18
Explain API Pagination9:10
Build Your Own API Pagination Component Part 114:05
Build Your Own API Pagination Component Part 211:26
API Sorting And Page Size13:06

Requirements

Basics of HTML, CSS, JS
No previous React experience necessary.
Computer with Internet connection

Description

ريأكت هي إطار عمل جافا سكريبت شهير ومعروف عالمياً يستخدم لبناء واجهات المستخدم. وهي تتميز بسهولة الاستخدام والقدرة على إنشاء واجهات المستخدم الديناميكية والسريعة. بالإضافة إلى ذلك، يتم استخدام رياكت في العديد من التطبيقات التي تتطلب واجهات المستخدم المتطورة، مما يجعلها أداة قوية للمطورين الذين يسعون إلى تطوير تطبيقات الويب الحديثة والمتطورة.

ريدكس هي إطار عمل يستخدم لحالة التطبيق العالمي في جافا سكريبت. يمكن استخدامها مع ريأكت لإدارة حالة التطبيق بسهولة، وبالتالي تساعد في إنشاء تطبيقات سهلة الصيانة والتوسع.

سيتم تغطية مفاهيم رياكت و ريدكس في هذه الدورة، بالإضافة إلى كيفية استخدامهما معًا لإنشاء تطبيقات الويب المتطورة. ستتعلم كيفية إنشاء مكونات ريأكت وكيفية إدارة حالة التطبيق باستخدام ريدكس. ولتحقيق تجربة تعلم متكاملة، ستتعلم أيضًا كيفية تطبيق الوصول الخارجي للبيانات وكيفية تنفيذ اختبار الوحدات والاختبارات المتكاملة.

سيتم تقديم هذه الدورة من قبل مدربين ذوي خبرة في رياكت و ريدكس وستكون الدورة عملية وتحتوي على العديد من الأمثلة العملية والتمارين العملية للمساعدة في التعلم. وستوفر هذه الدورة للطلاب الذين يرغبون في تعلم كيفية إنشاء تطبيقات الويب المتطورة باستخدام ريأكت و ريدكس الفرصة للتعلم من المدربين المؤهلين والمحترفين في المجال، وهذا سيكون مفيداً بالنسبة للطلاب الذين لديهم خبرة سابقة في جافا سكريبت ويرغبون في تطوير مهاراتهم في بناء تطبيقات الويب المتطورة.

Who this course is for:

This course is designed to cater to individuals of all skill levels.

Pro Frontend Engineer ReactJS + TypeScript + Redux - بالعربى

What you'll learn

Explore related topics

Course content

TypeScript Course22 lectures • 2hr 35min

JavaScript Refresher (using TS)11 lectures • 1hr 18min

Synchronous vs Asynchronous Programming6 lectures • 51min

JavaScript Promises (IMPORTANT!!!)17 lectures • 2hr 16min

React.js Basics31 lectures • 4hr 37min

Project #1 (React.js + TypeScript + Sass)9 lectures • 1hr 12min

Project #2 (Products Builder)45 lectures • 6hr 17min

Component Lifecycle (!IMPORTANT)12 lectures • 1hr 30min

Routing - Clone React.js Docs18 lectures • 1hr 58min

Mastering API by building Full Stack Todo Project #361 lectures • 8hr 22min

Requirements

Description

Who this course is for: