5 טעויות שעשיתי כשהתחלתי את פרויקט ה-React הראשון שלי

אתה יודע איך זה להרים שפה או מסגרת חדשה. לפעמים יש תיעוד נהדר שיעזור לך למצוא את דרכך. אבל אפילו התיעוד הטוב ביותר לא מכסה הכל. וכשאתה עובד עם משהו חדש, אתה חייב למצוא בעיה שאין לה פתרון כתוב.

ככה זה היה עבורי בפעם הראשונה שיצרתי פרויקט של React - ו-React היא אחת מאותן מסגרות עם תיעוד יוצא דופן, במיוחד עכשיו עם מסמכי הבטא. אבל עדיין נאבקתי בדרכי. עבר די הרבה זמן מאז הפרויקט ההוא, אבל הלקחים שהפקתי ממנו עדיין טריים במוחי. ולמרות שיש הרבה מדריכי "איך לעשות" של React בחוץ, חשבתי לחלוק את מה שהלוואי שידעתי כשהשתמשתי בו לראשונה.

אז זה מה שמאמר זה - רשימה של הטעויות המוקדמות שעשיתי. אני מקווה שהם יעזרו להפוך את הלמידה React להרבה יותר חלקה עבורך.

שימוש באפליקציית create-react-להתחיל פרויקט

TL;DR השתמש ב-Vite או בחבילה.

צור React App (CRA) הוא כלי שעוזר לך להקים פרויקט React חדש. זה יוצר סביבת פיתוח עם אפשרויות התצורה הטובות ביותר עבור רוב הפרויקטים של React. זה אומר שאתה לא צריך להשקיע זמן בהגדרת שום דבר בעצמך.

בתור מתחיל, זו נראתה כמו דרך מצוינת להתחיל את העבודה שלי! אין תצורה! פשוט תתחיל לקוד!

CRA משתמש בשתי חבילות פופולריות כדי להשיג זאת, webpack ו-Babel. webpack הוא מאגד אינטרנט המייעל את כל הנכסים בפרויקט שלך, כגון JavaScript, CSS ותמונות. Babel הוא כלי המאפשר לך להשתמש בתכונות JavaScript חדשות יותר, גם אם דפדפנים מסוימים אינם תומכים בהן.

שניהם טובים, אבל יש כלים חדשים יותר שיכולים לעשות את העבודה טוב יותר, במיוחד מהר ו מהדר אינטרנט מהיר (SWC).

חלופות חדשות ומשופרות אלו מהירות וקלות יותר להגדרה מאשר webpack ו-Babel. זה מקל על התאמת התצורה שקשה לעשות ב-create-react-app מבלי להוציא.

כדי להשתמש בשניהם בעת הגדרת פרויקט React חדש, עליך לוודא שכן צומת גרסה 12 ומעלה מותקנת, ולאחר מכן הפעל את הפקודה הבאה.

npm create vite

תתבקש לבחור שם לפרויקט שלך. לאחר שתעשה זאת, בחר תגובה מרשימת המסגרות. לאחר מכן, תוכל לבחור באחת מהן Javascript + SWC or Typescript + SWC

אז תצטרך לשנות ספרייה cd לתוך הפרויקט שלך והפעל את הפקודה הבאה;

npm i && npm run dev

זה אמור להפעיל שרת פיתוח עבור האתר שלך עם כתובת האתר 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;

אם אי פעם נדרש ערך ברירת מחדל עבור a prop, ה defaultProp ניתן להשתמש בנכס:

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

עם JavaScript מודרני, אפשר לפרק את המבנה props object והקצו ערך ברירת מחדל לכל זה בארגומנט הפונקציה.

// 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;

הקלד מספק רמה של בטיחות סוג בנתונים המועברים לרכיבים. אז בטח, 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 מילת מפתח ו שיטות מחזור חיים מה שהופך אותם לביצועים יותר מאשר רכיבים בכיתה.

לרכיבי פונקציה יש גם יתרון של שימוש בווים. תגיב הוקס מאפשרים לך להשתמש ב-State ובתכונות 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. קבל הגברה היום.
• Platoblockchain. Web3 Metaverse Intelligence. ידע מוגבר. גישה כאן.
• מקור: https://css-tricks.com/5-mistakes-starting-react/