⚛️ מבוא ל-React¶
ברוכים הבאים!¶
קורס מקיף ללימוד React מאפס עד רמה מתקדמת. הקורס מכסה את כל הנושאים החשובים: מיסודות ועד Redux ו-Testing.
למה React?¶
- 🌍 הספרייה הפופולרית ביותר לבניית ממשקי משתמש
- 🔄 Virtual DOM לביצועים מעולים
- 📦 קומפוננטות לשימוש חוזר
- 💪 אקוסיסטם עשיר וקהילה ענקית
📚 מבנה הקורס¶
חלק א' - יסודות¶
| מספר | נושא | קובץ |
|---|---|---|
| 1 | רקע והיסטוריה | 01_background.md |
| 2 | התקנה והגדרות | 02_installation.md |
| 3 | תחביר JSX | 03_jsx_syntax.md |
| 4 | קומפוננטות | 04_components.md |
| 5 | Props | 05_props.md |
| 6 | State | 06_state.md |
| 7 | אירועים | 07_events.md |
| 8 | Hooks בסיסיים | 08_hooks.md |
| 9 | רינדור מותנה | 09_conditional.md |
| 10 | רשימות | 10_lists.md |
| 11 | תרגילים | 11_exercises.md |
חלק ב' - Lifecycle & Patterns¶
| מספר | נושא | קובץ |
|---|---|---|
| 12 | Lifecycle & useEffect | 12_lifecycle.md |
| 13 | Props Drilling & Lifting State | 13_props_drilling.md |
| 14 | Component Communication | 14_component_patterns.md |
חלק ג' - Context & Hooks מתקדמים¶
| מספר | נושא | קובץ |
|---|---|---|
| 15 | Context API | 15_context.md |
| 16 | Custom Hooks | 16_custom_hooks.md |
| 17 | React Patterns (HOC, Error Boundaries) | 17_patterns.md |
חלק ד' - Routing & Performance¶
| מספר | נושא | קובץ |
|---|---|---|
| 18 | React Router | 18_routing.md |
| 19 | Performance (memo, useMemo, useCallback) | 19_performance.md |
| 20 | Lazy Loading & Suspense | 20_lazy_loading.md |
| 21 | useReducer | 21_useReducer.md |
חלק ה' - Redux & Testing¶
| מספר | נושא | קובץ |
|---|---|---|
| 22 | Redux Toolkit Basics | 22_redux.md |
| 23 | Redux Hooks & Async | 23_redux_hooks.md |
| 24 | RTK Query | 24_rtk_query.md |
| 25 | Testing (Jest & RTL) | 25_testing.md |
חלק ו' - React Native¶
| מספר | נושא | קובץ |
|---|---|---|
| 26 | React Native עם Expo | 26_react_native_expo.md |
📁 תיקיית דוגמאות¶
| מספר | נושא | קובץ |
|---|---|---|
| 1 | קומפוננטה ראשונה | 01_hello_component.jsx |
| 2 | Props | 02_props_example.jsx |
| 3 | State | 03_state_example.jsx |
| 4 | אירועים | 04_events_example.jsx |
| 5 | Hooks | 05_hooks_example.jsx |
| 6 | רינדור מותנה | 06_conditional_example.jsx |
| 7 | רשימות | 07_lists_example.jsx |
| 8 | Todo App | 08_todo_app.jsx |
| 9 | Lifecycle | 09_lifecycle_example.jsx |
| 10 | Lifting State | 10_lifting_state_example.jsx |
| 11 | Context API | 11_context_example.jsx |
| 12 | Custom Hooks | 12_custom_hooks_example.jsx |
| 13 | React Patterns | 13_patterns_example.jsx |
| 14 | useReducer | 14_useReducer_example.jsx |
| 15 | Performance | 15_performance_example.jsx |
| 16 | Redux Toolkit | 16_redux_example.jsx |
| 17 | React Native | 17_react_native_example.jsx |
🚀 איך להתחיל?¶
יצירת פרויקט React חדש¶
# עם Vite (מומלץ)
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev
התקנת חבילות נוספות¶
# React Router
npm install react-router-dom
# Redux Toolkit
npm install @reduxjs/toolkit react-redux
# Testing
npm install --save-dev @testing-library/react @testing-library/jest-dom
📖 סדר לימוד מומלץ¶
- שבוע 1-2: יסודות (פרקים 1-11)
- שבוע 3: Lifecycle & Component Patterns (פרקים 12-14)
- שבוע 4: Context & Custom Hooks (פרקים 15-17)
- שבוע 5: Routing & Performance (פרקים 18-21)
- שבוע 6: Redux & Testing (פרקים 22-25)
📋 נושאים שנכללים¶
- ✅ JSX, Components, Props, State
- ✅ Hooks: useState, useEffect, useRef, useMemo, useCallback, useReducer
- ✅ Event Handling, Forms, Controlled Components
- ✅ Conditional Rendering, Lists & Keys
- ✅ Lifecycle, Memory Leaks, Cleanup
- ✅ Props Drilling, Lifting State Up
- ✅ Context API (Provider, Consumer, useContext)
- ✅ Custom Hooks
- ✅ HOC, Render Props, Error Boundaries
- ✅ React Router (Dynamic Routes, Nested Routing)
- ✅ Performance Optimization (React.memo, useMemo, useCallback)
- ✅ Lazy Loading, Suspense, Code Splitting
- ✅ Redux Toolkit (Store, Actions, Reducers)
- ✅ useSelector, useDispatch, Async Actions
- ✅ RTK Query
- ✅ React Testing Library & Jest
- ✅ React Native עם Expo
בהצלחה בלימוד React! 🎉