Εγκατάσταση και προετοιμασία της εφαρμογής React

Σε αυτό το μάθημα, θα ξεκινήσουμε με την εγκατάσταση και την προετοιμασία μιας εφαρμογής React, καθώς στο μέλλον θα τη χρησιμοποιήσουμε σε συνδυασμό με το Redux. Υπάρχουν πιο γρήγοροι τρόποι δημιουργίας προτύπου εφαρμογής React με Redux (κάτι που, παρεμπιπτόντως, δεν σημαίνει πάντα εύκολο, ειδικά για αρχάριους), οι οποίοι αναφέρονται στην επίσημη τεκμηρίωση, αλλά εμείς θα προχωρήσουμε από το μηδέν.

Για να ξεκινήσουμε, θα δημιουργήσουμε μια εφαρμογή React my-app χρησιμοποιώντας το Vite (είναι μια μοντέρνα αντικατάσταση του Webpack). Για να το κάνουμε αυτό, ανοίγουμε το terminal και εισάγουμε τις ακόλουθες εντολές (στις προτεινόμενες επιλογές, εάν υπάρχουν, επιλέγουμε React και στη συνέχεια JavaScript):

terminalnpm create vite@latest my-app -- --template react
cd my-app
npm install

Ας εκκινήσουμε τη δημιουργημένη εφαρμογή:

terminalnpm run dev

Ανοίγουμε στο πρόγραμμα περιήγησης τον προτεινόμενο σύνδεσμο http://localhost:5173/ και θα δούμε τη γνωστή οθόνη εκκίνησης. Όλα λειτουργούν.

Τώρα ας αφαιρέσουμε τα περιττά. Ας καθαρίσουμε τον φάκελο public. Στον φάκελο src αφήνουμε μόνο τα main.jsx, index.css και App.jsx (στα index.css και App.jsx διαγράφουμε πλήρως το περιεχόμενο).

Στο αρχείο index.html αντικαθιστούμε το κείμενο του τίτλου με:

index.html<title>React Redux App</title>