تعلم React 18 بالعربى ( React , Redux , Hooks, Router .. )

تعلم الريأكت باللغة العربية من الصفر وحتى الاحتراف ويشمل ( React , Redux, Hooks, Router , Forms, APIs using & more.. )

4.55 (225 reviews)
Udemy
platform
العربية
language
Web Development
category
Hossam Marey
instructor
تعلم React 18 بالعربى ( React , Redux , Hooks, Router .. )
4,265
students
20.5 hours
content
Dec 2022
last update
$64.99
regular price

What you will learn

تعلم الريأكت من الصفر حتى الاحتراف

بناء واجهات المستخدم التفاعلية

بناء SPA مواقع الصفحة الواحدة

تعلم ال Redux and state mangement

تعلم التعامل مع ال APIs والتفاعل مع البيانات

Why take this course?

React is a JavaScript library for building user interfaces

وهي أشهر مكتبة حاليا فى مجال تطوير واجهات المستخدم


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

وحاليا فى السوق المحلى والعالمي , الريأكت من اكثر التقنيات طلبا واعلاها فى متوسط الدخل

الفرق بين هذا الكورس واي محتوى آخر :

  • يتم شرح كل جزء كيف يعمل ومن اين اتى

  • لا نتطرق لكلام جانبي يضيع من وقتك بدون فائده فمحتوى هذا الكورس يعادل كورسات مشهورة تتعدى ال 30 ساعة

  • يتم التطبيق اول باول على ماتعلمناه بتطبيقات صغيرة وكبيرة

اهم محتويات هذا الكورس

  • سنتعلم الاساسيات وكيف نبنى اول تطبيق ريأكت

  • writing HTML inside React by JSX syntax

  • reusable components and components communication

  • learn about react routing and navigation

  • list rendering and conditions

  • fetching data from Api with axios

  • lifeCycle methods for class components

  • forms and form validations with FormiK and Yup

  • React Hooks and ContextApi

  • Redux and Middlewares

وامور اخرى

بالاضافة الى التركيز على كيفية كتابة كود بشكل صحيح ومنظم والتدرب على مشاريع حقيقة وحتى رفع هذه المشاريع على سيرفرات حقيقية ومشاركتها مع الجميع


اذا كنت مبتدأ او لديك الاساسيات سيكون هذا الكورس اضافة جيدة ونقلة لك على المستوى التقنى والمهني

ماذا تنتظر ؟! ابدأ اليوم تعلم الريأكت


Content

مقدمة الى الريأكت

محتوى الكورس
ماهي React
اول كود ريأكت
SPA vs MPA
كيف تحقق اقصى استفادة من الكورس
بيئة العمل

Modern JavaScript مراجعة الامور المتقدمة

مقدمة الفصل + المرفقات
الفرق بين var , let , const
arrow function
Modern javascript Modules ( Import & Export )
Classes
Spread & Rest Operators
Primitive and Reference Types
Destructuring
Map function
Async JS Callbacks, Promises and Async Await

مقدمة الى React & JSX

مقدمة الفصل + المرفقات
انشاء تطبيق ريأكت create-react-app
التعرف على ملفات المشروع
Class and Function components الفرق بين
ماهو JSX
Inline Style in JSX
html class and for in JSX
variables in JSX

Props - components التواصل بين

مقدمة الفصل + المرفقات
ماأهمية ال Components
Props استخدام داتا متغيرة
Props in Class Components
State
setState
useState Hook
Passing Methods between Components
Props 2 way binding
css التعامل مع ملفات

Lists and Conditions

مقدمة الفصل + المرفقات
Conditions with Ternary Operator
Conditions with If
List Render
Unique Key
Update State

مشروع قائمة المهام

مقدمة الفصل + المرفقات
استعراض المشروع
تقسيم المشروع الى components
بناء واجهة المستخدم
اضافة مكتبة خارجية
تغيير حالة المهمة
حذف المهمة
إضافة مهمة جديدة
اظهار المهام الغير منتهية
الانتقال لوضع التعديل
تعديل المهام
حفظ الداتا
change function to class component

lifeCycle methods and APIs

مقدمة الفصل + المرفقات
main lifeCycle methods
lifeCycle methods ما فائدة
استعراض المشروع الثاني - انشاء مدونة
تقسيم المشروع الى components
تصميم المدونة
Http Requests
make api request with axios
modal اضافة
componentDidUpdate

Routing and Navigation

مقدمة الفصل + المرفقات
Routing مقدمة
react-router-dom Package install
Route - exact - render jsx
Route - render components
Link التعامل مع اللينكات
Routing Props
withRouter
NavLink
Dynamic Routes
Route Params
Switch
Push Navigation
Redirect
Replace
Guards
404 Not Found
Suspense - Routes Lazy Loading
fix bugs
Routing and Servers

Form Validation

مقدمة الفصل + المرفقات
تصميم الفورم
onSubmit - preventDefault
Input Native Validation
submit Form
UX - User Experience
Formik - Form Validation Library
use Formik
Reset Form after submitting
Yup - Validation Schema

React Hooks

مقدمة الفصل + المرفقات
React Hooks ما هي
useState
useEffect
useRef & creatRef
useCallback & memo
useMemo
useLayoutEffect
useReducer
contextApi
useContext
contextType - ContextApi with Class Components
Custom Hook

مشروع البحث عن المسلسلات

مقدمة الفصل + المرفقات
وصف المشروع - مقدمة
Pages & Components تقسيم المشروع الى
create JSX
Add CSS Styles - اختياري
ContextApi with useReducer system مهم
fetch data with axios
set activeShow
show activeShow Data
fix some bugs
Alert Context

Deployment

Deployment
Deply to Netlify (git)

Redux اساسيات

مقدمة الفصل + المرفقات
Redux ماهي
Redux Cycle
react-redux - useSelector - redux devTools
useDispatch
combineReducers
Redux wit Class Components

Redux التطبيق العملي

مقدمة الفصل + المرفقات
create Store
create state from reducers
change modes
add new todo
edit todos
finish edits

Redux middleware and Thunk

مقدمة الفصل + المرفقات
middlewares ما هي
applyMiddleware
Async Middleware
redux-thunk

ما التالي

ماذا بعد تعلم الـ React

Screenshots

تعلم React 18 بالعربى ( React , Redux , Hooks, Router .. ) - Screenshot_01تعلم React 18 بالعربى ( React , Redux , Hooks, Router .. ) - Screenshot_02تعلم React 18 بالعربى ( React , Redux , Hooks, Router .. ) - Screenshot_03تعلم React 18 بالعربى ( React , Redux , Hooks, Router .. ) - Screenshot_04

Reviews

Mohamed
February 8, 2023
كورس جميل والله يا بشمهندس حسام ويستاهل ال five stars .وأكتر ودى كانت أول بداية ليا فى تعلم الرأكت من ايد حضرتك والحمد لله طبقت كل حاجة اتعلمتها ورا حضرتك وطبقت اللى اتعلمته فى مشروع التخرج بتاعى السنادى. الحمد لله ان ربنا وجهنى انى اختار الكورس بتاع حضرتك بجد يستاهل انى اشتريه والحمد لله استفدت كتير ?❤. أجمل حاجة فى الشرح هوا ان حضرتك بتطبق عملى اثناء الشرح من خلال مشاريع على الجزء اللى اتشرح زى مثلا فى البداية ال Todo وبعدين ال Budget App وبعدين ال Blog وكل تطبيق على جزء تم شرحه مش مجرد مجمع التطبيق فى اخر الدورة
Ahmed
July 9, 2021
الكورس جميل جدا بسم الله ما شاء الله الحقيقه اني كنت متوقع انه هيبقي كورس عادي مجرد اساس بس حقيقي انا دخلت الكورس حاجه عظيمه جدا وغالبا بيشرح مجموعه من الافكار ف كورس maxو stephen بطريقه مبسطه جدا اتمني يكون ف update دايما ف المحتوي وشكرا جدا ع مجهودك بصراحه اتمنالك كل التوفيق

Coupons

DateDiscountStatus
1/28/2021100% OFF
expired
2/16/2021100% OFF
expired
7/20/2023100% OFF
expired

Charts

Price

تعلم React 18 بالعربى ( React , Redux , Hooks, Router .. ) - Price chart

Rating

تعلم React 18 بالعربى ( React , Redux , Hooks, Router .. ) - Ratings chart

Enrollment distribution

تعلم React 18 بالعربى ( React , Redux , Hooks, Router .. ) - Distribution chart

Related Topics

React
React Hooks
Redux Framework
3714972
udemy ID
12/19/2020
course created date
1/28/2021
course indexed date
Bot
course submited by