Create a New React App

Χρησιμοποιήστε ένα ενσωματωμένο toolchain για την καλύτερη εμπειρία για χρήστες και προγραμματιστές.

Σε αυτήν τη σελίδα, περιγράφονται μερικά δημοφιλή React toolchains που μπορούν να βοηθήσουν σε εργασίες όπως:

  • Κλιμάκωση σε πολλά αρχεία και components.
  • Χρήση βιβλιοθηκών τρίτων από το npm.
  • Εντοπισμός συνηθισμένων σφαλμάτων σε αρχικό στάδιο.
  • Ζωντανή επεξεργασία CSS και JS στον προγραμματισμό.
  • Βελτιστοποίηση του αποτελέσματος για παραγωγή.

Τα toolchains που συνιστώνται σε αυτήν τη σελίδα δεν απαιτούν διαμόρφωση για να ξεκινήσετε.

Ίσως να μη χρειάζεστε ένα toolchain

Εάν δεν αντιμετωπίζετε τα προβλήματα που περιγράφονται παραπάνω ή αν δεν είστε ακόμη εξοικειωμένος με τη χρήση των εργαλείων της JavaScript, εξετάστε το ενδεχόμενο προσθήκης του React ως απλό <script> tag σε μια σελίδα HTML, προαιρετικά με το JSX.

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

Η ομάδα του React συνιστά κατά κύριο λόγο τις ακόλουθες λύσεις:

  • Εάν μαθαίνετε το React ή δημιουργείτε μια νέα εφαρμογή single-page, χρησιμοποιήστε το Create React App.
  • Εάν χρησιμοποιείτε έναν server-rendered ιστότοπο με Node.js, δοκιμάστε το Next.js.
  • Εάν δημιουργείτε έναν στατικό ιστότοπο με προσανατολισμό στο περιεχόμενο, δοκιμάστε το Gatsby.
  • Εάν δημιουργείτε μια βιβλιοθήκη component ή πραγματοποιείτε ενσωμάτωση με υπάρχον codebase, δοκιμάστε πιο ευέλικτα toolchains.

Create React App (CRA)

Το Create React App είναι ένα άνετο περιβάλλον για την εκμάθηση του React και αποτελεί τον καλύτερο τρόπο για να ξεκινήσετε τη δημιουργία μιας νέας εφαρμογής single-page στο React.

Ρυθμίζει το περιβάλλον προγραμματισμού έτσι ώστε να μπορείτε να χρησιμοποιήσετε τα πιο πρόσφατα features της JavaScript, παρέχει μια θετική εμπειρία για τον προγραμματιστή και βελτιστοποιεί την εφαρμογή σας για παραγωγή. Θα χρειαστεί να έχετε στο μηχάνημά σας τα Node >= 8.10 και npm >= 5.6. Για τη δημιουργία ενός project, εκτελέστε:

npx create-react-app my-app
cd my-app
npm start

Σημείωση

Το npx στην πρώτη σειρά δεν είναι ορθογραφικό λάθος. Είναι ένα package runner tool που συνοδεύει το npm 5.2+.

Το Create React App δεν διαχειρίζεται τη λογική backend ούτε βάσεις δεδομένων. Απλώς δημιουργεί ένα frontend build pipeline που μπορείτε να το χρησιμοποιήσετε με όποιο backend θέλετε. Στο παρασκήνιο, χρησιμοποιεί το Babel και το webpack, αλλά δεν χρειάζεται να γνωρίζετε κάτι για αυτά.

Όταν είστε έτοιμος να κάνετε deploy με σκοπό την παραγωγή, η εκτέλεση της εντολής npm run build θα δημιουργήσει ένα βελτιστοποιημένο build της εφαρμογής σας στον φάκελο build. Μπορείτε να μάθετε περισσότερα σχετικά με το Create React App από το αρχείο README και τον οδηγό χρήσης του.

Next.js

Το Next.js είναι ένα δημοφιλές και ελαφρύ framework για στατικές εφαρμογές και εφαρμογές server‑rendered που έχουν δημιουργηθεί με το React. Περιλαμβάνει άμεσες λύσεις στυλιστικής διαμόρφωσης και routing και θεωρεί ως δεδομένο ότι χρησιμοποιείτε το Node.js ως περιβάλλον server.

Για την εκμάθηση του Next.js, ανατρέξτε στον επίσημο οδηγό του.

Gatsby

Το Gatsby είναι ο καλύτερος τρόπος δημιουργίας στατικών ιστότοπων με το React. Σας επιτρέπει να χρησιμοποιήσετε React components, αλλά εξάγει pre-rendered HTML και CSS με σκοπό τη διασφάλιση του ταχύτερου χρόνου φόρτωσης.

Για την εκμάθηση του Gatsby, ανατρέξτε στον επίσημο οδηγό του και μια συλλογή από starter kits.

Πιο ευέλικτα toolchains

Τα παρακάτω toolchains προσφέρουν μεγαλύτερη ευελιξία και περισσότερες επιλογές. Τα προτείνουμε για τους πιο έμπειρους χρήστες:

  • Το Neutrino συνδυάζει τη δύναμη του webpack με την απλότητα των presets και περιλαμβάνει ένα preset για εφαρμογές React και React components.

  • Το Parcel είναι ένα γρήγορο bundler διαδικτυακών εφαρμογών που δεν απαιτεί καμία διαμόρφωση και λειτουργεί με το React.

  • Το Razzle είναι ένα server-rendering framework που δεν απαιτεί καμία διαμόρφωση, αλλά προσφέρει μεγαλύτερη ευελιξία από το Next.js.

Δημιουργία ενός toolchain από μηδενική βάση

Ένα build toolchain της JavaScript συνήθως αποτελείται από:

  • Ένα package manager, όπως το Yarn ή το npm. Επιτρέπει την αξιοποίηση του διευρυμένου οικοσυστήματος των packages τρίτων και την εύκολη εγκατάσταση ή ενημέρωσή τους.

  • Ένα bundler, όπως το webpack ή το Parcel. Σας δίνει τη δυνατότητα να γράφετε modular κώδικα κα να τον ομαδοποιείτε σε μικρά packages με σκοπό τη βελτιστοποίηση του χρόνου φόρτωσης.

  • Ένα compiler όπως το Babel. Σας δίνει τη δυνατότητα να γράφετε κώδικα σε σύγχρονη JavaScript, ο οποίος εξακολουθεί να λειτουργεί σε παλαιότερα προγράμματα περιήγησης.

Εάν προτιμάτε να δημιουργήσετε το δικό σας JavaScript toolchain από μηδενική βάση, ανατρέξτε σε αυτόν τον οδηγό, ο οποίος αναδημιουργεί μερικές από τις λειτουργίες του Create React App.

Μην παραλείψετε να διασφαλίσετε ότι το εξατομικευμένο toolchain σας έχει ρυθμιστεί σωστά για παραγωγή.