Hello World

Το μικρότερο παράδειγμα React μοιάζει με αυτό:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

Εμφανίζει μια επικεφαλίδα λέγοντας “Hello, world!” στη σελίδα.

Try it on CodePen

Κάντε κλικ στον παραπάνω σύνδεσμο για να ανοίξετε έναν online editor. Μη διστάσετε να κάνετε κάποιες αλλαγές και δείτε πώς επηρεάζουν την έξοδο. Οι περισσότερες σελίδες σε αυτόν τον οδηγό θα έχουν επεξεργάσιμα παραδείγματα όπως αυτή.

Πώς να Διαβάσετε Αυτόν Τον Οδηγό

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

Υπόδειξη

Αυτός ο οδηγός έχει σχεδιαστεί για άτομα που προτιμούν να μάθουν έννοιες βήμα προς βήμα. Αν προτιμάτε να μάθετε κάνοντας, δείτε το πρακτικό tutorial μας. Μπορεί να βρείτε αυτόν τον οδηγό και το tutorial συμπληρωματικό μεταξύ τους.

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

Κάθε κεφάλαιο αυτού του οδηγού στηρίζεται στις γνώσεις που έχουν παρουσιασθεί σε προηγούμενα κεφάλαια. Μπορείτε να μάθετε το μεγαλύτερο μέρος του React διαβάζοντας τα κεφάλαια οδηγών “Βασικές έννοιες” με τη σειρά που εμφανίζονται στην πλαϊνή γραμμή. Για παράδειγμα, “Εισαγωγή στο JSX” είναι το επόμενο κεφάλαιο μετά από αυτό.

Υποθέσεις Επίπεδου Γνώσης

Το React είναι μια βιβλιοθήκη JavaScript και έτσι θα υποθέσουμε ότι έχετε μια βασική κατανόηση της γλώσσας JavaScript. Εάν δεν αισθάνεστε βέβαιοι, συνιστούμε να περάσετε από ένα JavaScript tutorial για να ελέγξετε το επίπεδο γνώσης σας και να σας επιτρέψουν να ακολουθήσετε αυτόν τον οδηγό χωρίς να χαθείτε. Μπορεί να σας πάρει μεταξύ 30 λεπτών και μιας ώρας, αλλά ως αποτέλεσμα δεν θα πρέπει να αισθάνεστε σαν να μαθαίνετε ταυτόχρονα τόσο το React όσο και το JavaScript.

Σημείωση

Αυτός ο οδηγός περιστασιακά χρησιμοποιεί ορισμένες από τις νεότερες συντάξεις JavaScript στα παραδείγματα. Εάν δεν έχετε δουλέψει με JavaScript τα τελευταία χρόνια, αυτά τα τρία σημεία θα πρέπει να σας βοηθήσουν περισσότερο.

Ας Ξεκινήσουμε!

Συνεχίστε να μετακινήστε προς τα κάτω και θα βρείτε τον σύνδεσμο στο επόμενο κεφάλαιο αυτού του οδηγού ακριβώς πριν το footer του ιστότοπου.