Τι είναι το React; Οδηγός με απλά λόγια για μη προγραμματιστές

Το React είναι βιβλιοθήκη JavaScript για τη δημιουργία διεπαφών χρήστη — του μέρους μιας εφαρμογής που βλέπουν και πατούν οι άνθρωποι. Φτιάχνεις οθόνες από επαναχρησιμοποιήσιμα κομμάτια που ονομάζονται components, όπως ένα κουμπί, μια κάρτα προϊόντος ή μια ολόκληρη σελίδα, και το React κρατά την οθόνη συγχρονισμένη με τα δεδομένα σου: όταν αλλάζουν τα δεδομένα, το React ενημερώνει τα μέρη της σελίδας που εξαρτώνται από αυτά. Δημιουργήθηκε στη Facebook (σήμερα Meta), είναι ανοιχτού κώδικα και είναι από τους πιο διαδεδομένους τρόπους να χτίζονται εφαρμογές ιστού.

Γιατί έχει σημασία όταν χτίζεις με AI

Αν χτίζεις εφαρμογή ιστού με εργαλείο AI, υπάρχει καλή πιθανότητα να είναι γραμμένη σε React. Πολλοί AI app builders χρησιμοποιούν το React από προεπιλογή, γιατί είναι δημοφιλές, καλά τεκμηριωμένο και υπάρχει τεράστια ποσότητα κώδικα React από την οποία μπορούν να μάθουν τα μοντέλα AI.

Δεν χρειάζεται να γράφεις React για να χτίζεις με AI. Όμως το να ξέρεις λίγα βοηθά να:

• Περιγράφεις αλλαγές με ακρίβεια. «Κάνε το component ProductCard να έχει έντονη την τιμή» είναι πιο ξεκάθαρο από το «κάνε κάπου πιο εμφανείς τις τιμές».
• Καταλαβαίνεις σφάλματα. Μηνύματα όπως «Cannot read properties of undefined» ή «Too many re-renders» γίνονται πιο κατανοητά.
• Κάνεις λογικές επιλογές. Τα απλά εφαρμογές React αποδίδονται στον browser, κάτι που επηρεάζει την ορατότητα στις μηχανές αναζήτησης και την ταχύτητα της πρώτης φόρτωσης. Το να το ξέρεις σε βοηθά να αποφασίσεις πότε να ζητήσεις διαφορετική ρύθμιση.
• Συνεργάζεσαι με προγραμματιστές αργότερα. Το React είναι κοινή δεξιότητα, οπότε ένας προγραμματιστής μπορεί συνήθως να πιάσει εύκολα μια βάση κώδικα React.

Μια καθημερινή αναλογία

Σκέψου τα LEGO. Αντί να σκαλίζεις ένα ολόκληρο μοντέλο από ένα μπλοκ, το χτίζεις από τυποποιημένα τουβλάκια. Λίγα τουβλάκια φτιάχνουν έναν τροχό· τέσσερις τροχοί και μερικά ακόμα κομμάτια φτιάχνουν ένα αυτοκίνητο. Αν θέλεις κάθε αυτοκίνητο να έχει κόκκινους τροχούς, αλλάζεις το σχέδιο του τροχού μία φορά.

Τα components του React είναι τα τουβλάκια. Ένα component Button χρησιμοποιείται μέσα σε ένα ProductCard, το οποίο χρησιμοποιείται μέσα σε ένα ProductGrid, το οποίο είναι μέρος της ShopPage. Αλλάζεις το Button μία φορά και αλλάζει κάθε κουμπί της εφαρμογής.

Το άλλο μισό της αναλογίας: φαντάσου ότι το μοντέλο LEGO ξαναχτίζεται μόνο του όποτε αλλάζεις τις οδηγίες. Αυτό είναι το άλλο κόλπο του React — περιγράφεις πώς πρέπει να φαίνεται η οθόνη για τα τρέχοντα δεδομένα, και το React βρίσκει τι πρέπει να αλλάξει στη σελίδα.

Οι βασικές ιδέες

Components

Ένα component είναι συνάρτηση JavaScript που επιστρέφει ένα κομμάτι διεπαφής. Η τεκμηρίωση του React περιγράφει ένα component ως κομμάτι του UI που έχει τη δική του λογική και εμφάνιση. Τα ονόματα των components ξεκινούν με κεφαλαίο γράμμα.

JSX

Τα components συνήθως γράφονται σε JSX, που μοιάζει με HTML αναμεμιγμένο με JavaScript:

function Greeting() {
  return <h1>Καλώς ήρθες πίσω!</h1>;
}

Το JSX είναι προαιρετικό, αλλά η τεκμηρίωση του React σημειώνει ότι τα περισσότερα projects το χρησιμοποιούν. Μετατρέπεται σε απλή JavaScript πριν τρέξει στον browser.

Props

Τα props είναι οι είσοδοι που περνάς σε ένα component, σαν ρυθμίσεις σε ένα επαναχρησιμοποιήσιμο κομμάτι:

<ProductCard name="Κερί λεβάντας" price={24} />

Το ίδιο ProductCard μπορεί να δείξει οποιοδήποτε προϊόν.

State

Το state είναι πληροφορία που θυμάται ένα component και μπορεί να αλλάξει όσο τρέχει η εφαρμογή — αν είναι ανοιχτό ένα μενού, τι έχει γραφτεί σε ένα πεδίο αναζήτησης, πόσα προϊόντα υπάρχουν στο καλάθι. Όταν αλλάζει το state, το React αποδίδει ξανά το component ώστε η οθόνη να ταιριάζει.

Hooks

Τα hooks είναι συναρτήσεις των οποίων τα ονόματα ξεκινούν με use, όπως το useState (θυμάται μια τιμή) και το useEffect (εκτελεί κώδικα μετά την απόδοση, για παράδειγμα για να φέρει δεδομένα). Θα τα δεις παντού στον κώδικα React που παράγει η AI.

Ένα παράδειγμα: ένας μετρητής καλαθιού

Υποθέστε ότι το online κατάστημά σου έχει ένα κουμπί «Προσθήκη στο καλάθι» και ένα εικονίδιο καλαθιού που δείχνει τον αριθμό των προϊόντων. Στο React μοιάζει περίπου έτσι:

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Κερί λεβάντας"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Καλάθι ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Προσθήκη στο καλάθι</button>
    </div>
  );
}

Τι συμβαίνει όταν ο αγοραστής πατά «Προσθήκη στο καλάθι»:

1. Το onClick του κουμπιού καλεί το onAdd, που καλεί το setCartCount.
2. Το React ενημερώνει το state cartCount από 0 σε 1.
3. Το React αποδίδει ξανά το Shop, περνώντας count={1} στο CartIcon.
4. Η σελίδα δείχνει πλέον «Καλάθι (1)». Κανείς δεν έγραψε κώδικα που λέει «βρες το κείμενο του καλαθιού και άλλαξέ το» — η οθόνη ακολουθεί τα δεδομένα.

Πρόσεξε όμως και τα όρια. Αυτός ο μετρητής ζει στη μνήμη του browser. Ανανέωσε τη σελίδα και επιστρέφει στο 0. Για να κρατήσεις το καλάθι, θα έπρεπε να το αποθηκεύσεις κάπου μόνιμα — ένα cookie, αποθήκευση του browser ή μια βάση δεδομένων μέσω του backend σου. Το React διαχειρίζεται την οθόνη· δεν αποθηκεύει τα δεδομένα σου.

Πού εντάσσεται το React σε μια εφαρμογή ιστού

Μια εφαρμογή «Vite + React» αποδίδεται στον browser (single-page app). Μια εφαρμογή Next.js μπορεί να αποδώσει πρώτα τις σελίδες στον server, κάτι που βοηθά τις μηχανές αναζήτησης και την ταχύτητα της πρώτης φόρτωσης.

Βασικοί όροι εξηγημένοι

Συνηθισμένα λάθη και παρανοήσεις

• «Το React είναι γλώσσα προγραμματισμού.» Είναι βιβλιοθήκη γραμμένη και χρησιμοποιούμενη από JavaScript (ή TypeScript).
• «Το React αποθηκεύει τα δεδομένα μου.» Το state ζει στον browser και εξαφανίζεται με την ανανέωση. Τα μόνιμα δεδομένα χρειάζονται backend και βάση δεδομένων.
• Να βάζεις μυστικά στον κώδικα React. Όλα σε μια εφαρμογή React στέλνονται στον browser του επισκέπτη. Τα API keys εκεί είναι δημόσια. Κράτα τα στον server.
• «Οι εφαρμογές React δεν μπορούν να κατατάσσονται στην αναζήτηση.» Η απόδοση μόνο στον client είναι πιο αδύναμη για αναζήτηση, αλλά η προ-απόδοση ή το server rendering λύνουν τα περισσότερα.
• Τεράστια components. Ένα component 1.000 γραμμών είναι δύσκολο να αλλάξει με ασφάλεια, τόσο για ανθρώπους όσο και για AI. Ζήτα μικρότερα.
• Υπόθεση ότι μια εφαρμογή ιστού React είναι εφαρμογή κινητού. Τρέχει στον browser, και στα κινητά, αλλά δεν είναι εφαρμογή του App Store.

Τι να ζητάς από τον AI builder σου

• «Χώρισε αυτή τη σελίδα σε μικρά, ονομασμένα components και πες μου σε ποιο αρχείο είναι το καθένα.»
• «Κάνε το component ProductCard επαναχρησιμοποιήσιμο, με όνομα, τιμή και εικόνα ως props.»
• «Αποθήκευσε το καλάθι στη βάση δεδομένων ώστε να επιβιώνει από ανανέωση.»
• «Κράτα όλα τα API keys στον server· ο κώδικας React να καλεί το δικό μας API.»
• «Πρόσθεσε καταστάσεις φόρτωσης και σφάλματος για δεδομένα που έρχονται από τον server.»
• «Αν η ορατότητα στις μηχανές αναζήτησης έχει σημασία για αυτές τις σελίδες, πρόαπέδωσέ τες ή χρησιμοποίησε ρύθμιση με server rendering.»
• «Εξήγησε με απλά ελληνικά τι σημαίνει αυτό το σφάλμα και από ποιο component προέρχεται.»

Για τη μεγαλύτερη εικόνα, δες frontend και backend, και για τον έλεγχο του κώδικα που έγραψε η AI, πώς να ελέγχεις κώδικα που παράγει η AI.

Το React στο Mythex

Εκτός αν ζητήσεις κάτι άλλο, το Mythex ξεκινά νέα projects με Vite + React + TypeScript + Tailwind, με ζωντανή προεπισκόπηση όσο συνομιλείς. Μπορείς να ονομάσεις άλλη ρύθμιση στο πρώτο σου prompt — για παράδειγμα «Use Next.js» ή «απλή στατική σελίδα HTML» — και το Mythex την επιλέγει από αυτό που γράφεις· δεν υπάρχει ξεχωριστή οθόνη ρυθμίσεων γι' αυτό. Η σελίδα τεκμηρίωσης για το πώς επιλέγεται η τεχνολογία εξηγεί τις επιλογές. Ο επεξεργαστής κώδικα είναι μόνο για ανάγνωση στο Free· στο Pro μπορείς να επεξεργαστείς απευθείας τον κώδικα React και να εξάγεις το project για να συνεχίσεις να δουλεύεις αλλού.

Ερωτήσεις