React.js ή React.ts;

Η Javascript είναι μια γλώσσα προγραμματισμού που χρησιμοποιείται για την κατασκευή ιστοσελίδων και εφαρμογών Ιστού. Είναι απλό, γρήγορο, διαθέσιμοι τόνοι βιβλιοθηκών, τεράστια υποστήριξη. Είναι πολύ εύκολο να ξεκινήσει κάποιος για να ξεκινήσει με τον προγραμματισμό και την κατασκευή ιστοτόπων.

Αλλά….

Καθώς η εφαρμογή προχωρά, ένα σημαντικό πρόβλημα που τρομάζει κάθε προγραμματιστή είναι ότι τα πράγματα σπάνε κατά την εκτέλεση… ειδικά εάν ο κώδικας εκτελείται κανονικά κατά την ανάπτυξη (που δεν αναγνωρίζονται λόγω της προσωρινής μνήμης), αλλά αρχίζει να σπάει μόλις ωθηθεί στην παραγωγή. Μην με παρεξηγείτε Η Javascript είναι μια από τις καλύτερες τεχνολογίες που κυκλοφορούν.

Χρειάζομαι περισσότερο….

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

Χρήση React.js ή React.ts..;

Το React.js είναι μια βιβλιοθήκη javascript ανοιχτού κώδικα που χρησιμοποιείται για την ανάπτυξη frontend για οποιαδήποτε εφαρμογή. Χρησιμοποιείται για τη δημιουργία Εφαρμογών Μονής Σελίδας (SPA). Η αντιδραστική φύση του καθιστά εύκολη την αλλαγή κατάστασης οποιουδήποτε στοιχείου στη σελίδα που εμφανίζεται.

Καθώς είναι μια βιβλιοθήκη javascript, όλα τα αρχεία που δημιουργούνται στο έργο react χρησιμοποιούν javascript. Όπως εξηγήθηκε προηγουμένως, καθίσταται δύσκολο να εντοπιστούν ζητήματα καθώς το έργο μεγαλώνει.

Για να λυθεί αυτό, το React υποστηρίζει επίσης τη σύνταξη κώδικα σε Typescript.

Δημιουργήστε ένα νέο έργο react με πληκτρολόγιο

Η δημιουργία ενός έργου react είναι πολύ απλή, εκτελούμε μια εντολή στο Terminal. Αυτό δημιουργεί ένα έργο react με javascript.

npx create-react-app demo-app

Για να δημιουργήσουμε ένα έργο react χρησιμοποιώντας πληκτρολόγιο χρησιμοποιούμε την ίδια εντολή με όρισμα προτύπου ως πληκτρολόγιο.

npx create-react-app demo-app --template typescript

Μόλις εκτελεστεί επιτυχώς η παραπάνω εντολή. Ένα έργο react (εδώ ονομάζεται demo-app) θα δημιουργηθεί χρησιμοποιώντας πληκτρολόγιο.

Σημειώστε ότι εκεί το όνομα αρχείου τελειώνει με .ts ή .tsx και δημιουργείται ένα αρχείο με το όνομα tsconfig.json ως μέρος του έργου.

• Τα αρχεία που τελειώνουν με .tsx, προορίζονται για τη σύνταξη του κώδικα αντίδρασης
• Τα αρχεία που τελειώνουν με .ts, προορίζονται για τη σύνταξη κώδικα με χρήση πληκτρολογίου
• Το tsconfig.json λέει στο typescript πώς να μεταγλωττίσει τον κώδικα

Προσθήκη γραφομηχανής σε υπάρχον έργο React

Αυτή είναι μια διαδικασία τριών βημάτων.

• Βήμα 1: Εγκατάσταση όλων των απαιτούμενων βιβλιοθηκών
• Βήμα 2: Διαμόρφωση γραφομηχανής
• Βήμα 3: Αλλάζει τις επεκτάσεις αρχείων

Βήμα 1 — Εγκαταστήστε όλες τις απαιτούμενες βιβλιοθήκες

Εάν έχουμε ένα υπάρχον έργο react χωρίς typescript, χρησιμοποιήστε την ακόλουθη εντολή για να εγκαταστήσετε το typescript, να πληκτρολογήσετε τον καθορισμένο κόμβο, να αντιδράσετε και να react-dom στο έργο.

npm install --save -D typescript @types/node @types/react @types/react-dom

Μόλις η εντολή εκτελεστεί με επιτυχία στο τερματικό, θα εγκαταστήσει τις βιβλιοθήκες ως μέρος του devDependencies.

Βήμα 2 — Διαμόρφωση γραφομηχανής

Τώρα δημιουργήστε ένα αρχείο με το όνομα tsconfig.json, στη ρίζα του έργου react. Προσθέστε τα παρακάτω στο αρχείο και κάντε αλλαγές σεβασμού με βάση τις απαιτήσεις μας.

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

Βήμα 3 — Αλλαγές κώδικα (Τελικό βήμα)

Ως μέρος αυτού του τελευταίου βήματος, πρέπει να κάνουμε δύο αλλαγές

• Αλλαγή των επεκτάσεων αρχείων σε .ts και .tsx αντίστοιχα
• Αλλάξτε τον κώδικα για να προσθέσετε τύπους και άλλες αλλαγές με βάση τις απαιτήσεις μας.
• Μπορείτε να ορίσετε προσαρμοσμένους τύπους
• Προσθέστε αντίστοιχο τύπο στις μεταβλητές και τα στηρίγματα

Αυτό είναι όλο.