5 λάθη που έκανα όταν ξεκίνησα το πρώτο μου έργο React

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

Έτσι ήταν για μένα την πρώτη φορά που δημιούργησα ένα έργο React — και το React είναι ένα από αυτά τα πλαίσια με αξιοσημείωτη τεκμηρίωση, ειδικά τώρα με τα beta docs. Αλλά εξακολουθούσα να δυσκολεύομαι. Έχει περάσει αρκετός καιρός από εκείνο το έργο, αλλά τα μαθήματα που αποκόμισα από αυτό είναι ακόμα φρέσκα στο μυαλό μου. Και παρόλο που υπάρχουν πολλά σεμινάρια για το React "πώς να" εκεί έξω, σκέφτηκα να μοιραστώ αυτό που θα ήθελα να ήξερα όταν το χρησιμοποίησα για πρώτη φορά.

Έτσι, αυτό είναι αυτό το άρθρο — μια λίστα με τα πρώτα λάθη που έκανα. Ελπίζω να σας βοηθήσουν να κάνετε τη μάθηση του React πολύ πιο ομαλή για εσάς.

Χρήση δημιουργίας-react-app για την έναρξη ενός έργου

TL;DR Χρησιμοποιήστε Vite ή Parcel.

Δημιουργία εφαρμογής React (CRA) είναι ένα εργαλείο που σας βοηθά να ρυθμίσετε ένα νέο έργο React. Δημιουργεί ένα περιβάλλον ανάπτυξης με τις καλύτερες επιλογές διαμόρφωσης για τα περισσότερα έργα React. Αυτό σημαίνει ότι δεν χρειάζεται να ξοδεύετε χρόνο για να ρυθμίσετε κάτι μόνοι σας.

Ως αρχάριος, αυτό φαινόταν σαν ένας πολύ καλός τρόπος για να ξεκινήσω τη δουλειά μου! Χωρίς διαμόρφωση! Απλώς ξεκινήστε την κωδικοποίηση!

Το CRA χρησιμοποιεί δύο δημοφιλή πακέτα για να το πετύχει, το webpack και το Babel. Το webpack είναι ένα πακέτο ιστού που βελτιστοποιεί όλα τα στοιχεία του έργου σας, όπως JavaScript, CSS και εικόνες. Το Babel είναι ένα εργαλείο που σας επιτρέπει να χρησιμοποιείτε νεότερες λειτουργίες JavaScript, ακόμα κι αν ορισμένα προγράμματα περιήγησης δεν τις υποστηρίζουν.

Και τα δύο είναι καλά, αλλά υπάρχουν νεότερα εργαλεία που μπορούν να κάνουν τη δουλειά καλύτερα, συγκεκριμένα Ζει και Speedy Web Compiler (SWC).

Αυτές οι νέες και βελτιωμένες εναλλακτικές είναι πιο γρήγορες και πιο εύκολες στη διαμόρφωση από το webpack και το Babel. Αυτό διευκολύνει την προσαρμογή της διαμόρφωσης που είναι δύσκολο να γίνει στην εφαρμογή δημιουργίας-αντίδρασης χωρίς εξαγωγή.

Για να τα χρησιμοποιήσετε και τα δύο κατά τη ρύθμιση ενός νέου έργου React, πρέπει να βεβαιωθείτε ότι το έχετε κάνει Κόμβος εγκατεστημένη έκδοση 12 ή νεότερη και, στη συνέχεια, εκτελέστε την ακόλουθη εντολή.

npm create vite

Θα σας ζητηθεί να επιλέξετε ένα όνομα για το έργο σας. Μόλις το κάνετε αυτό, επιλέξτε React από τη λίστα των πλαισίων. Μετά από αυτό, μπορείτε να επιλέξετε ένα από τα δύο Javascript + SWC or Typescript + SWC

Τότε θα πρέπει να αλλάξετε κατάλογο cd στο έργο σας και εκτελέστε την ακόλουθη εντολή.

npm i && npm run dev

Αυτό θα πρέπει να εκτελεί έναν διακομιστή ανάπτυξης για τον ιστότοπό σας με τη διεύθυνση URL localhost:5173

Και είναι τόσο απλό.

Χρησιμοποιώντας defaultProps για προεπιλεγμένες τιμές

TL;DR Χρησιμοποιήστε τις προεπιλεγμένες παραμέτρους συνάρτησης.

Τα δεδομένα μπορούν να περάσουν στα στοιχεία του React μέσω κάτι που ονομάζεται props. Αυτά προστίθενται σε ένα στοιχείο ακριβώς όπως τα χαρακτηριστικά σε ένα στοιχείο HTML και μπορούν να χρησιμοποιηθούν στον ορισμό ενός στοιχείου λαμβάνοντας τις σχετικές τιμές από το αντικείμενο prop που μεταβιβάζεται ως όρισμα.

// App.jsx
export default function App() { return <Card title="Hello" description="world" />
} // Card.jsx
function Card(props) { return ( <div> <h1>{props.title}</h1> <p>{props.description}</p> </div> );
} export default Card;

Εάν απαιτείται ποτέ μια προεπιλεγμένη τιμή για το α prop, τη defaultProp η ιδιοκτησία μπορεί να χρησιμοποιηθεί:

// Card.jsx
function Card(props) { // ...
} Card.defaultProps = { title: 'Default title', description: 'Desc',
}; export default Card;

Με τη σύγχρονη JavaScript, είναι δυνατή η καταστροφή του props αντικείμενο και εκχωρήστε μια προεπιλεγμένη τιμή σε όλα στο όρισμα συνάρτησης.

// Card.jsx
function Card({title = "Default title", description= "Desc"}) { return ( <div> <h1>{title}</h1> <p>{description}</p> </div> )
} export default Card;

Αυτό είναι πιο ευνοϊκό καθώς ο κώδικας που μπορεί να διαβαστεί από τα σύγχρονα προγράμματα περιήγησης χωρίς την ανάγκη επιπλέον μετασχηματισμού.

Δυστυχώς, defaultProps απαιτούν κάποιο μετασχηματισμό για ανάγνωση από το πρόγραμμα περιήγησης, καθώς το JSX (JavaScript XML) δεν υποστηρίζεται από το κουτί. Αυτό θα μπορούσε ενδεχομένως να επηρεάσει την απόδοση μιας εφαρμογής που χρησιμοποιεί πολλά defaultProps.

Μη χρησιμοποιείτε propTypes

TL;DR Χρησιμοποιήστε TypeScript.

Στο React, το propTypes Η ιδιότητα μπορεί να χρησιμοποιηθεί για να ελέγξει εάν ένα στοιχείο μεταβιβάζεται ο σωστός τύπος δεδομένων για τα στηρίγματα του. Σας επιτρέπουν να καθορίσετε τον τύπο των δεδομένων που πρέπει να χρησιμοποιούνται για κάθε στηρίγμα, όπως μια συμβολοσειρά, έναν αριθμό, ένα αντικείμενο, κ.λπ. Σας επιτρέπουν επίσης να καθορίσετε εάν απαιτείται ή όχι ένα στηρίγμα.

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

// Card.jsx
import { PropTypes } from "prop-types"; function Card(props) { // ...
} Card.propTypes = { title: PropTypes.string.isRequired, description: PropTypes.string,
}; export default Card;

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

// Card.tsx
interface CardProps { title: string, description?: string,
} export default function Card(props: CardProps) { // ...
}

Η TypeScript είναι μια γλώσσα προγραμματισμού που βασίζεται στην JavaScript προσθέτοντας στατικό έλεγχο τύπων. Το TypeScript παρέχει ένα πιο ισχυρό σύστημα τύπων, που μπορεί να εντοπίσει περισσότερα πιθανά σφάλματα και βελτιώνει την εμπειρία ανάπτυξης.

Χρήση στοιχείων κλάσης

TL;DR: Γράψτε στοιχεία ως συναρτήσεις

Τα στοιχεία κλάσης στο React δημιουργούνται χρησιμοποιώντας κλάσεις JavaScript. Έχουν μια πιο αντικειμενοστρεφή δομή και καθώς και μερικά πρόσθετα χαρακτηριστικά, όπως η δυνατότητα χρήσης του this λέξεις-κλειδιά και μεθόδους κύκλου ζωής.

// Card.jsx
class Card extends React.Component { render() { return ( <div> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </div> ) }
} export default Card;

Προτιμώ να γράφω στοιχεία με κλάσεις από συναρτήσεις, αλλά οι τάξεις JavaScript είναι πιο δύσκολο να κατανοήσουν οι αρχάριοι και this μπορεί να γίνει πολύ μπερδεμένο. Αντίθετα, θα συνιστούσα να γράψετε στοιχεία ως συναρτήσεις:

// Card.jsx
function Card(props) { return ( <div> <h1>{props.title}</h1> <p>{props.description}</p> </div> )
} export default Card;

Τα στοιχεία συνάρτησης είναι απλώς συναρτήσεις JavaScript που επιστρέφουν JSX. Είναι πολύ πιο εύκολο να διαβαστούν και δεν έχουν πρόσθετες λειτουργίες όπως το this λέξη-κλειδί και μέθοδοι κύκλου ζωής που τα καθιστούν πιο αποδοτικά από τα στοιχεία της κλάσης.

Τα εξαρτήματα λειτουργίας έχουν επίσης το πλεονέκτημα της χρήσης γάντζων. Αντιδράστε τους γάντζους σας επιτρέπουν να χρησιμοποιείτε την κατάσταση και άλλες δυνατότητες του React χωρίς να γράφετε ένα στοιχείο κλάσης, κάνοντας τον κώδικά σας πιο ευανάγνωστο, διατηρήσιμο και επαναχρησιμοποιήσιμο.

Εισαγωγή React άσκοπα

TL;DR: Δεν χρειάζεται να το κάνετε, εκτός αν χρειάζεστε γάντζους.

Δεδομένου ότι το React 17 κυκλοφόρησε το 2020, δεν είναι πλέον απαραίτητο να εισάγετε το React στο επάνω μέρος του αρχείου σας κάθε φορά που δημιουργείτε ένα στοιχείο.

import React from 'react'; // Not needed!
export default function Card() {}

Αλλά έπρεπε να το κάνουμε πριν από το React 17 επειδή ο μετασχηματιστής JSX (αυτό που μετατρέπει το JSX σε κανονική JavaScript) χρησιμοποιούσε μια μέθοδο που ονομάζεται React.createElement αυτό θα λειτουργούσε μόνο κατά την εισαγωγή του React. Από τότε, έχει κυκλοφορήσει ένας νέος μετασχηματιστής που μπορεί να μεταμορφώσει το JSX χωρίς το createElement μέθοδος.

Θα πρέπει ακόμα να εισαγάγετε το React για να χρησιμοποιήσετε άγκιστρα, θραύσματακαι οποιεσδήποτε άλλες λειτουργίες ή στοιχεία μπορεί να χρειαστείτε από τη βιβλιοθήκη:

import { useState } from 'react'; export default function Card() { const [count, setCount] = useState(0); // ...
}

Αυτά ήταν τα πρώτα μου λάθη!

Ίσως το «λάθος» να είναι πολύ σκληρή λέξη αφού μερικές από τις καλύτερες πρακτικές εμφανίστηκαν αργότερα. Ωστόσο, βλέπω πολλές περιπτώσεις όπου ο «παλιός» τρόπος να κάνεις κάτι εξακολουθεί να χρησιμοποιείται ενεργά σε έργα και άλλα σεμινάρια.

Για να είμαι ειλικρινής, μάλλον έκανα περισσότερα από πέντε λάθη όταν ξεκίνησα. Κάθε φορά που αναζητάτε ένα νέο εργαλείο, θα μοιάζει περισσότερο με ένα ταξίδι μάθησης για να το χρησιμοποιήσετε αποτελεσματικά, αντί να γυρίσετε έναν διακόπτη. Αλλά αυτά είναι τα πράγματα που εξακολουθώ να κουβαλάω μαζί μου χρόνια μετά!

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

• SEO Powered Content & PR Distribution. Ενισχύστε σήμερα.
• Platoblockchain. Web3 Metaverse Intelligence. Ενισχύθηκε η γνώση. Πρόσβαση εδώ.
• πηγή: https://css-tricks.com/5-mistakes-starting-react/