5 اشتباهی که هنگام شروع اولین پروژه React مرتکب شدم

شما می دانید که انتخاب یک زبان یا چارچوب جدید چگونه است. گاهی اوقات اسناد عالی وجود دارد که به شما کمک می کند راه خود را از طریق آن پیدا کنید. اما حتی بهترین مستندات مطلقاً همه چیز را پوشش نمی دهد. و وقتی با چیزی جدید کار می کنید، مطمئناً مشکلی را پیدا می کنید که راه حل مکتوب ندارد.

اولین باری که یک پروژه React ایجاد کردم برای من اینطور بود - و React یکی از آن چارچوب‌هایی است که اسناد قابل توجهی دارد، به خصوص اکنون با اسناد بتا. اما من هنوز در مسیر خود به سختی تلاش کردم. مدت زیادی از آن پروژه می گذرد، اما درس هایی که از آن گرفتم هنوز در ذهنم تازه است. و حتی اگر تعداد زیادی آموزش "چگونه" React وجود دارد، فکر کردم آنچه را که دوست داشتم در اولین استفاده از آن بدانم به اشتراک بگذارم.

بنابراین، این همان چیزی است که این مقاله دارد - لیستی از اشتباهات اولیه که من مرتکب شدم. امیدوارم آنها به شما کمک کنند تا یادگیری React را برای شما آسان‌تر کند.

استفاده از create-react-app برای شروع پروژه

TL;DR از Vite یا Parcel استفاده کنید.

ایجاد برنامه React (CRA) ابزاری است که به شما کمک می کند یک پروژه React جدید راه اندازی کنید. این یک محیط توسعه با بهترین گزینه های پیکربندی برای اکثر پروژه های React ایجاد می کند. این بدان معنی است که شما مجبور نیستید زمان خود را برای پیکربندی چیزی صرف کنید.

به عنوان یک مبتدی، این یک راه عالی برای شروع کار من به نظر می رسید! بدون پیکربندی! فقط شروع به کدنویسی کنید!

CRA از دو بسته محبوب برای رسیدن به این هدف استفاده می کند، وب پک و بابل. webpack یک بسته بندی وب است که تمام دارایی های پروژه شما مانند جاوا اسکریپت، CSS و تصاویر را بهینه می کند. Babel ابزاری است که به شما امکان می دهد از ویژگی های جدیدتر جاوا اسکریپت استفاده کنید، حتی اگر برخی از مرورگرها از آنها پشتیبانی نکنند.

هر دو خوب هستند، اما ابزارهای جدیدتری وجود دارند که می توانند این کار را به طور خاص بهتر انجام دهند سریعا و کامپایلر وب سریع (SWC).

این جایگزین‌های جدید و بهبودیافته سریع‌تر و آسان‌تر از webpack و Babel پیکربندی می‌شوند. این کار تنظیم پیکربندی را آسان‌تر می‌کند که انجام آن در برنامه create-react-app بدون خارج کردن دشوار است.

برای استفاده از هر دوی آنها هنگام راه‌اندازی یک پروژه 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;

اگر یک مقدار پیش فرض برای a مورد نیاز باشد propاز defaultProp اموال قابل استفاده است:

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

با جاوا اسکریپت مدرن، امکان تخریب ساختار وجود دارد props شیء کنید و یک مقدار پیش فرض به همه آن در آرگومان تابع اختصاص دهید.

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

این به عنوان کدی که می تواند توسط مرورگرهای مدرن بدون نیاز به تبدیل اضافی خوانده شود، مطلوب تر است.

متاسفانه، defaultProps به دلیل اینکه JSX (جاوا اسکریپت 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 یک زبان برنامه نویسی است که بر روی جاوا اسکریپت با افزودن چک کردن نوع استاتیک ایجاد می شود. TypeScript سیستم نوع قدرتمندتری را ارائه می دهد که می تواند باگ های بالقوه بیشتری را شناسایی کند و تجربه توسعه را بهبود بخشد.

استفاده از اجزای کلاس

TL;DR: اجزاء را به عنوان توابع بنویسید

اجزای کلاس در React با استفاده از کلاس های جاوا اسکریپت ایجاد می شوند. آنها ساختار شی گراتر و همچنین چند ویژگی اضافی مانند توانایی استفاده از آن دارند 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;

من نوشتن کامپوننت‌های با کلاس را به توابع ترجیح می‌دهم، اما درک کلاس‌های جاوا اسکریپت برای مبتدیان دشوارتر است. this می تواند بسیار گیج کننده شود درعوض، نوشتن کامپوننت ها به عنوان توابع را توصیه می کنم:

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

اجزای تابع به سادگی توابع جاوا اسکریپت هستند که JSX را برمی گرداند. خواندن آنها بسیار ساده تر است و ویژگی های اضافی مانند آن ندارند this کلمه کلیدی و روشهای چرخه عمر که عملکرد آنها را از اجزای کلاس بیشتر می کند.

اجزای تابعی نیز مزیت استفاده از قلاب را دارند. واکنش به قلاب ها به شما این امکان را می دهد که از حالت و سایر ویژگی های React بدون نوشتن یک جزء کلاس استفاده کنید و کد شما را خواناتر، قابل نگهداری و قابل استفاده مجدد می کند.

وارد کردن React غیر ضروری

TL;DR: نیازی به انجام آن نیست، مگر اینکه به قلاب نیاز داشته باشید.

از آنجایی که React 17 در سال 2020 منتشر شد، هر زمان که یک کامپوننت ایجاد می کنید، دیگر نیازی به وارد کردن React در بالای فایل شما نیست.

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

اما ما مجبور بودیم این کار را قبل از React 17 انجام دهیم زیرا ترانسفورماتور JSX (چیزی که JSX را به جاوا اسکریپت معمولی تبدیل می کند) از روشی به نام استفاده می کرد. React.createElement این فقط هنگام وارد کردن React کار می کند. از آن زمان، یک ترانسفورماتور جدید منتشر شده است که می تواند JSX را بدون آن تبدیل کند createElement روش.

برای استفاده از هوک ها همچنان باید React را وارد کنید. قطعهو هر توابع یا مؤلفه دیگری که ممکن است از کتابخانه نیاز داشته باشید:

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

این اشتباهات اولیه من بود!

شاید «اشتباه» کلمه بسیار سختی باشد زیرا برخی از شیوه های بهتر بعداً به وجود آمدند. با این حال، من موارد زیادی را می بینم که روش "قدیمی" انجام کاری هنوز به طور فعال در پروژه ها و سایر آموزش ها استفاده می شود.

صادقانه بگویم، احتمالاً هنگام شروع کار بیش از پنج اشتباه مرتکب شدم. هر زمان که به ابزار جدیدی دست پیدا کنید، به جای چرخاندن سوئیچ، بیشتر شبیه یک سفر یادگیری برای استفاده موثر از آن است. اما اینها چیزهایی هستند که من هنوز بعد از سالها با خودم حمل می کنم!

اگر مدتی است که از React استفاده می کنید، چه چیزهایی را دوست داشتید قبل از شروع کار می دانستید؟ بسیار عالی خواهد بود که مجموعه ای را به دست آوریم تا به دیگران کمک کند تا از مشکلات مشابه جلوگیری کنند.

• محتوای مبتنی بر SEO و توزیع روابط عمومی. امروز تقویت شوید.
• پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی به اینجا.
• منبع: https://css-tricks.com/5-mistakes-starting-react/