React

Μια JavaScript βιβλιοθήκη για τη δημιουργία user interfaces

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 χωρίς να ξαναγράψετε τον κώδικα σας.

Το React μπορεί επίσης να κάνει render στο server χρησιμοποιώντας Node, και mobile apps με χρήση του React Native.


Ένα απλό 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> σε πραγματικό χρόνο.

Loading code example...