ΒΑΣΙΚΕΣ ΚΑΙ ΕΞΕΙΔΙΚΕΥΜΕΝΕΣ ΓΝΩΣΕΙΣ ΣΤΗ REACT – 259 ΣΕΛΙΔΕΣ

ΠΙΝΑΚΑΣ ΠΕΡΙΕΧΟΜΕΝΩΝ

Κεφάλαιο 1 – Βασικές έννοιες
1.1 Τι είναι η React

• 1.1.1 Βασικές αρχές και πλεονεκτήματα

• 1.1.2 Ιστορία και εξέλιξη

• 1.1.3 Παραδείγματα: React Basics στο Visual Studio Code

• Εγκατάσταση Node.js

• Εγκατάσταση Visual Studio Code

• Εγκατάσταση Prettier Extension

• Δημιουργία React Project

• Εκκίνηση του Development Server

• Δημιουργία και Επεξεργασία Components

• Προσθήκη Στυλ

• Συμπέρασμα

1.2 Components

• 1.2.1 Class Components

• 1.2.2 Functional Components

• 1.2.3 Δημιουργία και χρήση components

• 1.2.4 Παραδείγματα: Class Components στο Visual Studio Code

• Δημιουργία React Project

• Δημιουργία Class Component

• Χρήση του Class Component

• Εκκίνηση του Development Server

• Προσθήκη Στυλ (Προαιρετικό)

1.3 JSX

• 1.3.1 Τι είναι το JSX

• 1.3.2 Σύνταξη και χρήση

• 1.3.3 Παραδείγματα: JSX στο Visual Studio Code

• Δημιουργία React Project

• Δημιουργία και Χρήση JSX

• Χρήση JavaScript Εκφράσεων στο JSX

• Χρήση Στυλ στο JSX

• Server

• Συμπέρασμα

1.4 Props

• 1.4.1 Τι είναι τα props

• 1.4.2 Πώς περνάμε δεδομένα μεταξύ components

• 1.4.3 Παραδείγματα: Props Examples στο Visual Studio Code

• Δημιουργία React Project

• Δημιουργία και Χρήση Props

• Προεπιλεγμένες Τιμές Props

• Προσθήκη Στυλ (Προαιρετικό)

• Εκκίνηση του Development Server

• Συμπέρασμα

1.5 State

• 1.5.1 Τι είναι το state

• 1.5.2 Διαχείριση του state σε class και functional components

• 1.5.3 Παραδείγματα: State Examples στο Visual Studio Code

• Δημιουργία React Project

• Χρήση State σε Class Component

• Χρήση State σε Functional Component

• Χρήση των Components στην Εφαρμογή

• Εκκίνηση του Development Server

• Συμπέρασμα

---

Κεφάλαιο 2 – Προχωρημένες Έννοιες
2.1 Lifecycle Methods (για Class Components)

• componentDidMount

• componentDidUpdate

• componentWillUnmount

• Παραδείγματα: Lifecycle Methods στο Visual Studio Code

• Δημιουργία ενός Νέου Project

• Δημιουργία Class Component με Lifecycle Methods

• Χρήση του LifecycleDemo Component στο App.js

• Εκκίνηση του Development Server

• Επεξηγήσεις

2.2 Hooks (για Functional Components)

• useState

• useEffect

• useContext

• useReducer

• useMemo

• useCallback

• useRef

• Προτεινόμενα Projects: Χρήση hooks για διαχείριση κατάστασης

• Δημιουργία Νέου React Project

• Δημιουργία To-Do List App

• Δημιουργία Shopping Cart App

• Δημιουργία Weather App

• Εκκίνηση του Development Server

• Συμπέρασμα

• Παραδείγματα: Hooks Examples στο Visual Studio Code

• Χρήση useState

• Χρήση useEffect

• Χρήση useContext

• Χρήση useReducer

• Χρήση useMemo και useCallback

• Χρήση useRef

• Ενημέρωση του App.js

• Εκκίνηση του Development Server

• Συμπέρασμα

2.3 Higher-Order Components (HOCs)

• Τι είναι τα HOCs

• Δημιουργία και χρήση

• Παραδείγματα: HOCs Examples στο Visual Studio Code

• Δημιουργία React Project

• Δημιουργία HOC για Καταγραφή

• Δημιουργία Απλού Component

• Χρήση του HOC

• Ενημέρωση του App.js

• Εκκίνηση του Development Server

• Συμπέρασμα

2.4 Render Props

• Τι είναι τα Render Props

• Δημιουργία και χρήση

• Παραδείγματα: Render Props Examples στο Visual Studio Code

• Δημιουργία React Project

• Δημιουργία Component με Render Props

• Δημιουργία Component που Χρησιμοποιεί το Render Props Component

• Ενημέρωση του App.js

• Εκκίνηση του Development Server

• Συμπέρασμα

---

Κεφάλαιο 3 Ειδικά Θέματα
3.1 Context API

• Δημιουργία και χρήση context

• Κατανόηση των Providers και Consumers

• Παραδείγματα: Context API Examples στο Visual Studio Code

• Δημιουργία ενός Νέου Project

• Δημιουργία του Context

• Δημιουργία του ThemedButton Component

• Χρήση του ThemeProvider και ThemedButton στο App.js

• Εκκίνηση του Development Server

• Επεξηγήσεις

3.2 React Router

• Εγκατάσταση και ρύθμιση

• Δημιουργία διαδρομών

• Χρήση των Link, Route, Switch, και NavLink

• Προτεινόμενα Projects: Δημιουργία μιας εφαρμογής πλοήγησης

• Δημιουργία React Project

• Εγκατάσταση του React Router

• Δημιουργία των Σελίδων

• Δημιουργία του Navigation Component

• Ρυθμίσεις του Router στο App.js

• Εκκίνηση του Development Server

• Συμπέρασμα

3.3 Πρακτικές Σχεδίασης και Οργάνωσης

• Διαχείριση του φακέλου του έργου

• Ανάπτυξη και βελτιστοποίηση απόδοσης

• Εργαλεία Ανάπτυξης: React Developer Tools, VSCode Extensions για React

• Βέλτιστες Πρακτικές: Χρήση PropTypes, Αποφυγή ανώνυμων συναρτήσεων στο JSX

3.4 React Server Components

• Εισαγωγή στα React Server Components

• Πλεονεκτήματα και Χρήσεις

• Παραδείγματα Χρήσης

• Πλήρης Εφαρμογή με Server Component

• Δημιουργία του Project

• Εγκατάσταση Απαραίτητων Βιβλιοθηκών

• Δημιουργία Server Components

• Χρήση των Server Components στην Εφαρμογή

• Εκκίνηση του Development Server

• Συμπέρασμα

---

Κεφάλαιο 4 Επιπλέον Θέματα
4.1 Αρχιτεκτονικές Προσεγγίσεις

• Atomic Design

• Container and Presentational Components

4.2 Συνήθεις Βιβλιοθήκες

• Redux και Context API για διαχείριση κατάστασης

• Axios για αιτήματα HTTP

• Styled Components και CSS Modules για styling

4.3 Testing

• Τεστ μονάδας με Jest και React Testing Library

• Τεστ ολοκλήρωσης και E2E testing

---

Κεφάλαιο 5 – Δημιουργία Εφαρμογής To-Do List με Sidebar και Responsiveness
5.1 Εισαγωγή
5.2 Δημιουργία του Project
5.3 Ανέβασμα σε Online Server Χωρίς Terminal
5.4 Συμπέρασμα

---

Κεφάλαιο 6 – Χρήση του Git σε Συνεργασία με το React
6.1 Εισαγωγή
6.2 Βασικές Έννοιες του Git
6.3 Εγκατάσταση του Git
6.4 Ρύθμιση του Git
6.5 Χρήση του Git με το GitHub

• Δημιουργία Λογαριασμού GitHub

• Δημιουργία Νέου Repository

• Σύνδεση του Τοπικού Repository με το GitHub
  6.6 Βασικές Εντολές του Git
  6.7 Συνεργασία με το Git

• Δημιουργία Νέου Κλάδου

• Πραγματοποίηση Αλλαγών και Δεσμεύσεων

• Συγχώνευση Αλλαγών στον Κύριο Κλάδο

• Αποστολή των Αλλαγών στο Απομακρυσμένο Repository
  6.8 Παράδειγμα Χρήσης του Git με React

• Δημιουργία και Αρχικοποίηση Project

• Δημιουργία Νέου Κλάδου για Προσθήκη Δυνατότητας

• Προσθήκη Κώδικα για το Navbar Component

• Δημιουργία Δεσμεύσεων για τις Αλλαγές

• Συγχώνευση Αλλαγών στον Κύριο Κλάδο

• Αποστολή Αλλαγών στο Απομακρυσμένο Repository

Κεφάλαιο 7 – Πηγές και Βιβλιογραφία
7.1 Πηγές Μάθησης

• Επίσημη τεκμηρίωση της React

• Κοινότητες και φόρουμ

• Βιβλία και online μαθήματα