Declerative
Το React κάνει εύκολη τη δημιουργία διαδραστικών UIs. Σχεδιάστε απλά views για κάθε state της εφαρμογής σας, και το React θα ενημερώσει και θα παρουσιάσει τα σωστά components όταν τα δεδομένα αλλάξουν.
Τα declerative views κάνουν τον κώδικά σας πιο προβλέψιμο και διευκολύνει τον εντοπισμό λαθών.
Component-Based
Δημιουργείστε ενθυλακωμένα components που διαχειρίζονται το δικό τους state, μετά συνθέστε τα για να φτιάξετε περίπλοκα UIs.
Εφόσον η λογική των components είναι γραμμένη στη JavaScript αντί για templates, μπορείτε εύκολα να περάσετε πλούσια δεδομένα στην εφαρμογή σας και να κρατήσετε το state έξω από το DOM.
Learn Once, Write Anywhere
Δεν κάνουμε υποθέσεις σχετικά με το υπόλοιπο stack της τεχνολογίας σας, ώστε να μπορείτε να αναπτύξετε νέες λειτουργίες στο React χωρίς να ξαναγράψετε τον κώδικα σας.
<<<<<<< HEAD Το React μπορεί επίσης να κάνει render στο server χρησιμοποιώντας Node, και mobile apps με χρήση του React Native. ======= React can also render on the server using Node and power mobile apps using React Native.
bd0c9d8c5f5e78e0bd1066b46024ba98f4daac84
Ένα απλό Component
Τα React components εφαρμόζουν μια μέθοδο render() που λαμβάνει δεδομένα και επιστρέφει τι πρέπει να εμφανίζει. Αυτό το παράδειγμα χρησιμοποιεί μια σύνταξη τύπου XML που ονομάζεται JSX. Τα δεδομένα που μεταφέρονται στο component μπορούν είναι προσβάσιμα στη μέθοδο render() μέσω του this.props.
Το JSX είναι προαιρετικό και δεν απαιτείται για τη χρήση του React. Δοκιμάστε το Babel REPL για να δείτε τον κώδικα JavaScript που παράγεται από το βήμα της μεταγλώττισης του JSX.
Loading code example...
Ένα Stateful Component
Εκτός από τη λήψη δεδομένων εισόδου (πρόσβαση μέσω this.props), ένα component μπορεί να διατηρήσει εσωτερικά δεδομένα της κατάστασης (state) του - (πρόσβαση μέσω this.state). Όταν μεταβληθούν τα δεδομένα του state ενός component, το rendered markup θα ενημερωθεί με επανάκληση της render ().
Loading code example...
Μια εφαρμογή
Χρησιμοποιώντας τα props και το state, μπορούμε να δημιουργήσουμε μια μικρή εφαρμογή Todo. Αυτό το παράδειγμα χρησιμοποιεί το state για την παρακολούθηση της τρέχουσας λίστας αντικειμένων καθώς και του κειμένου που έχει εισάγει ο χρήστης. Παρόλο που τα event handlers φαίνεται να γίνονται rendered inline, θα συλλέγονται και θα υλοποιούνται με τη χρήση του event delegation.
Loading code example...
Ένα Component που χρησιμοποιεί External Plugins
Το React σάς επιτρέπει να αλληλεπιδράσετε με άλλες βιβλιοθήκες και frameworks. Αυτό το παράδειγμα χρησιμοποιεί το remarkable, μια εξωτερική βιβλιοθήκη Markdown, για να μετατρέψει την τιμή του <textarea> σε πραγματικό χρόνο.