Πρώτη επαφή με React

[skiabox]

Καλησπέρα.

Είχα μια πρώτη επαφή σήμερα με React και μου άρεσε πολύ.

Κόλλησα όμως όταν είδα μέσα σε ένα return function μιας render function ένα object.

 

if(isLoaded)
        {
            return (
                <div>
                    { books.map(book => (
                        <h4>{ book.title.rendered }</h4>
                    ))}
                </div>
            );
        }

Ποιό βιβλίο/tutorial μου προτείνετε;

Ευχαριστώ.

Επεξ/σία 19 Ιουνίου 2019 από skiabox

[XPHSTOS_]

Στο youtube υπάρχουν πάρα πολλά tutorials για αρχάριους στην react.
Απλά κοίτα να είναι με ημερομηνία από '18 και μετά για να είναι και λίγο up to date!

[Predatorkill]

 

Δεν ειναι object, interpolation ειναι.

The curly braces are a special syntax to let the JSX parser know that it needs to interpret the contents in between them as JavaScript instead of a string. This process is generally referred to as "interpolation".

στο youtube ψαξε τον ben awad, αλλιως δες στο udemy τον maximillian , τον andrew mead ή τον stephen grider

υγ. Θα δεις ποσο ευκολα φτιαχνεις πραγματα, το petlocator και 15.000 γραμμες κωδικα στην angular 6 το εκανα σε react ουτε με τις μισες γραμμες.

Επεξ/σία 19 Ιουνίου 2019 από Predatorkill

[skiabox]

1 ώρα πριν, Predatorkill είπε

Δεν ειναι object, interpolation ειναι.

The curly braces are a special syntax to let the JSX parser know that it needs to interpret the contents in between them as JavaScript instead of a string. This process is generally referred to as "interpolation".

στο youtube ψαξε τον ben awad, αλλιως δες στο udemy τον maximillian , τον andrew mead ή τον stephen grider

υγ. Θα δεις ποσο ευκολα φτιαχνεις πραγματα, το petlocator και 15.000 γραμμες κωδικα στην angular 6 το εκανα σε react ουτε με τις μισες γραμμες.

Ποιον προτείνεις από τους 3 του udemy;

Σε online πλατφόρμα για hosting react apps με ταυτόχρονο hosting online κάποιου back-end τι παίζει με react;

Angular για παράδειγμα παίζει πολύ ο συνδυασμός με firestore.

[Predatorkill]

Και οι 3 ειναι πολυ καλοι, αν σημερα επαιρνα ενα μαθημα θα ηταν του andrew mead, ειναι πολυ αναλυτικος.

Δεν ξερω για hosting, εγω χρησιμοποιω droplets στην digital ocean για MERN stack.

Αυτο που παιζει πολυ παντως ειναι το https://www.netlify.com/

[skiabox]

2 ώρες πριν, Predatorkill είπε

Και οι 3 ειναι πολυ καλοι, αν σημερα επαιρνα ενα μαθημα θα ηταν του andrew mead, ειναι πολυ αναλυτικος.

Δεν ξερω για hosting, εγω χρησιμοποιω droplets στην digital ocean για MERN stack.

Αυτο που παιζει πολυ παντως ειναι το https://www.netlify.com/

Κάνε μου και ένα σχόλιο για next.js μιας και είσαι έμπειρος react developer.

Τι κερδίζεις με αυτό;

[Predatorkill]

17 ώρες πριν, skiabox είπε

Κάνε μου και ένα σχόλιο για next.js μιας και είσαι έμπειρος react developer.

Τι κερδίζεις με αυτό;

Το κυριοτερο ειναι οτι το app ειναι ssr αρα εισαι seo friendly. Υπαρχουν και αλλες εναλλακτικες οπως το gatsby αλλα ειναι μονο για στατικο περιεχομενο(μπορεις και dynamic αλλα ειναι λιγο μπελας). 

Μπορεις και με τη next να βγαλεις στατικο φυσικα. 

Επισης κερδιζεις σε ταχυτητα, αλλα το βαρος πεφτει στον σερβερ και οχι στον τελικο χρηστη.

Αν ξεκιναγα σημερα react θα πηγαινα κατευθειαν σε graphql με prisma, αλλα πρεπει να ξερεις sql ή mongo.

Επεξ/σία 20 Ιουνίου 2019 από Predatorkill

[ktf]

Server side rendering μπορείς να έχεις με ποικίλα backend. Από τη στιγμή που μαθαίνεις ένα frontend framework/library, καλό θα ήταν να μην τα μπλέξεις όλα μαζί και να σου φανεί η εκμάθηση βουνό.

Αν για παράδειγμα ξέρεις ήδη Rails, πας εδώ https://github.com/reactjs/react-rails για ssr.

Γενικά το πιο εύκολο και σωστό για να ξεκινήσεις είναι να πάρεις κάποιο public API και να στήσεις ένα frontend σε React που να το χρησιμοποιεί. Στην αγορά έχει επικρατήσει ο συνδιασμός React + Redux (για state management). Αλλά για κάτι σχετικά απλό το redux δεν είναι απαραίτητο.

[Predatorkill]

Με τα hooks και το Context ισως να πεθανει το redux. Προσωπικα δε με βολεψε ποτε το context, παντα παω σε redux, για large scale ειναι μονοδρομος. 

Hooks δεν εχω πιασει ακομα, οταν ξεκινησω νεο project θα βαλω να δω πως παει.

[skiabox]

Δηλώνω super εντυπωσιασμένος από την React μέχρι τώρα.

Δεν είναι τυχαία ποτέ τα github stars.

[JimPap2323]

2 ώρες πριν, skiabox είπε

Δηλώνω super εντυπωσιασμένος από την React μέχρι τώρα.

Δεν είναι τυχαία ποτέ τα github stars.

Καλησπέρα φίλε,επειδή και εγώ είμαι στην ίδια φάση (άρχισα να ασχολούμαι με react) στην δικιά σου περίπτωση πως ξεκίνησες το learning? από udemy course/youtube course/book/ ?

[skiabox]

Ναι φίλε μου το udemy είναι δύναμη.

Δες και το σχετικό post που έχω κάνει για το πως να βλέπεις συνέχεια στα 1080p τα videos.

Σε React Stack τι προτείνετε παιδιά;

Συνεργάζεται καλά με firestore για παράδειγμα;

Επίσης προσέξτε μην εγκαταστήσετε πάλι το eslint μιας και ήδη το create-react-app έχει πολλά σχετικά dependencies και μπορεί να δημιουργήσετε conflict που θα εμποδίσει το compile της εφαρμογής.

[skiabox]

Επίσης αγόρασα και το gitkraken για εύκολη χρήση του github.

[skiabox]

Έχουμε και καινούριο αστεράτο tutor (βαθμολογία 4.8) που πάει να μπει σφήνα στα 3 μεγαθήρια.

 

 

 

[Predatorkill]

Στις 15/7/2019 στις 6:11 ΜΜ, skiabox είπε

Επίσης αγόρασα και το gitkraken για εύκολη χρήση του github.

Πως σου φαινεται; Το κατεβασα και ειναι λιγο χασιμο το interface, θελει tutorials για να καταλαβεις τι παιζει, 5 λεπτα το χαζεψα βεβαια. Παντως καιρο ειχα να δω τοσο καλο εργαλειο να προσφερεται σε τοσο χαμηλη τιμη. 

πως τα πας με τη react; Τιποτα αποριες;