5 غلطیاں جو میں نے اپنا پہلا ری ایکٹ پروجیکٹ شروع کرتے وقت کیں۔

افلاطون کے ذریعہ دوبارہ شائع کیا گیا۔

فالونگ: 0

آپ جانتے ہیں کہ نئی زبان یا فریم ورک کو چننا کیسا ہے۔ کبھی کبھی اس کے ذریعے اپنا راستہ تلاش کرنے میں آپ کی مدد کرنے کے لیے زبردست دستاویزات موجود ہوتی ہیں۔ لیکن یہاں تک کہ بہترین دستاویزات بھی ہر چیز کا احاطہ نہیں کرتی ہیں۔ اور جب آپ کسی نئی چیز کے ساتھ کام کرتے ہیں، تو آپ کو ایک ایسا مسئلہ مل جائے گا جس کا تحریری حل نہیں ہے۔

ایسا ہی میرے لیے پہلی بار تھا جب میں نے ایک React پروجیکٹ بنایا — اور React قابل ذکر دستاویزات کے ساتھ ان فریم ورکس میں سے ایک ہے، خاص طور پر اب بیٹا دستاویزات کے ساتھ۔ لیکن میں نے پھر بھی اپنے راستے سے جدوجہد کی۔ اس پروجیکٹ کو کافی عرصہ گزر چکا ہے، لیکن اس سے جو سبق میں نے حاصل کیا وہ اب بھی میرے ذہن میں تازہ ہے۔ اور اگرچہ وہاں بہت سارے React "How-to" ٹیوٹوریلز موجود ہیں، میں نے سوچا کہ میں وہی شئیر کروں جو کاش مجھے معلوم ہوتا جب میں نے اسے پہلی بار استعمال کیا۔

لہذا، یہ مضمون یہی ہے - میں نے ابتدائی غلطیوں کی فہرست۔ مجھے امید ہے کہ وہ آپ کے لیے سیکھنے کے رد عمل کو بہت آسان بنانے میں مدد کریں گے۔

ایک پروجیکٹ شروع کرنے کے لیے Create-react-app کا استعمال کرنا

TL؛ DR وائٹ یا پارسل استعمال کریں۔

React ایپ بنائیں (CRA) ایک ایسا ٹول ہے جو آپ کو ایک نیا React پروجیکٹ ترتیب دینے میں مدد کرتا ہے۔ یہ زیادہ تر React پروجیکٹس کے لیے بہترین کنفیگریشن کے اختیارات کے ساتھ ایک ترقیاتی ماحول بناتا ہے۔ اس کا مطلب ہے کہ آپ کو خود کسی بھی چیز کو ترتیب دینے میں وقت گزارنے کی ضرورت نہیں ہے۔

ایک ابتدائی کے طور پر، یہ میرا کام شروع کرنے کا ایک بہترین طریقہ لگتا تھا! کوئی ترتیب نہیں! بس کوڈنگ شروع کرو!

CRA اس کو حاصل کرنے کے لیے دو مشہور پیکجوں کا استعمال کرتا ہے، ویب پیک اور بابل۔ webpack ایک ویب بنڈلر ہے جو آپ کے پروجیکٹ میں موجود تمام اثاثوں کو بہتر بناتا ہے، جیسے کہ JavaScript، CSS، اور تصاویر۔ بابل ایک ایسا ٹول ہے جو آپ کو JavaScript کی نئی خصوصیات استعمال کرنے کی اجازت دیتا ہے، چاہے کچھ براؤزر ان کی حمایت نہ کریں۔

دونوں اچھے ہیں، لیکن ایسے نئے ٹولز ہیں جو کام کو بہتر طریقے سے کر سکتے ہیں، خاص طور پر وائٹ اور تیز ویب کمپائلر (SWC)۔

یہ نئے اور بہتر متبادل ویب پیک اور بابل کے مقابلے میں ترتیب دینے میں تیز اور آسان ہیں۔ اس سے کنفیگریشن کو ایڈجسٹ کرنا آسان ہو جاتا ہے جو کہ تخلیق-ری ایکٹ-ایپ میں نکالے بغیر کرنا مشکل ہے۔

ایک نیا React پروجیکٹ ترتیب دیتے وقت ان دونوں کو استعمال کرنے کے لیے آپ کو یہ یقینی بنانا ہوگا کہ آپ کے پاس موجود ہے۔ نوڈ ورژن 12 یا اس سے زیادہ انسٹال ہوا، پھر درج ذیل کمانڈ کو چلائیں۔

npm create vite

آپ سے اپنے پروجیکٹ کے لیے ایک نام لینے کو کہا جائے گا۔ ایک بار جب آپ یہ کر لیتے ہیں، فریم ورک کی فہرست سے ردعمل کو منتخب کریں۔ اس کے بعد، آپ یا تو منتخب کر سکتے ہیں۔ Javascript + SWC or Typescript + SWC

پھر آپ کو ڈائریکٹری کو تبدیل کرنا پڑے گا۔ cd اپنے پروجیکٹ میں اور درج ذیل کمانڈ کو چلائیں۔

npm i && npm run dev

اسے یو آر ایل کے ساتھ آپ کی سائٹ کے لیے ڈویلپمنٹ سرور چلانا چاہیے۔ localhost:5173

اور یہ اتنا ہی آسان ہے۔

کا استعمال کرتے ہوئے `defaultProps` پہلے سے طے شدہ اقدار کے لیے

TL;DR اس کے بجائے ڈیفالٹ فنکشن پیرامیٹرز استعمال کریں۔

ڈیٹا کو کسی چیز کے ذریعے رد عمل کے اجزاء میں منتقل کیا جاسکتا ہے۔ props. یہ ایک جزو میں شامل کیے جاتے ہیں جیسے HTML عنصر میں صفات اور ایک دلیل کے طور پر پاس کردہ پروپ آبجیکٹ سے متعلقہ اقدار کو لے کر جزو کی تعریف میں استعمال کیا جا سکتا ہے۔

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

جدید جاوا اسکرپٹ کے ساتھ، اسے تباہ کرنا ممکن ہے۔ 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 ٹائپ اسکرپٹ استعمال کریں۔

ردعمل میں، 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;

فنکشن کے اجزاء صرف JavaScript کے فنکشنز ہیں جو JSX واپس کرتے ہیں۔ وہ پڑھنے میں بہت آسان ہیں، اور ان میں اضافی خصوصیات نہیں ہیں۔ this مطلوبہ الفاظ اور لائف سائیکل کے طریقے جو انہیں کلاس کے اجزاء سے زیادہ پرفارمنس بناتا ہے۔

فنکشن کے اجزاء میں ہکس استعمال کرنے کا فائدہ بھی ہے۔ رد عمل ہکس آپ کو کلاس کے اجزاء کو لکھے بغیر ریاست اور دیگر رد عمل کی خصوصیات استعمال کرنے کی اجازت دیتا ہے، جس سے آپ کے کوڈ کو مزید پڑھنے کے قابل، برقرار رکھنے کے قابل اور دوبارہ قابل استعمال بنایا جا سکتا ہے۔

غیر ضروری طور پر رد عمل درآمد کرنا

TL؛ DR: ایسا کرنے کی ضرورت نہیں ہے، جب تک کہ آپ کو ہکس کی ضرورت نہ ہو۔

چونکہ React 17 کو 2020 میں ریلیز کیا گیا تھا، اس لیے اب جب بھی آپ کوئی جزو بناتے ہیں تو اپنی فائل کے اوپری حصے میں React کو درآمد کرنا غیر ضروری ہے۔

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

لیکن ہمیں یہ React 17 سے پہلے کرنا تھا کیونکہ JSX ٹرانسفارمر (وہ چیز جو JSX کو ریگولر جاوا اسکرپٹ میں تبدیل کرتی ہے) نے ایک طریقہ استعمال کیا جسے کہا جاتا ہے۔ React.createElement یہ صرف اس وقت کام کرے گا جب React کو درآمد کیا جائے۔ اس کے بعد سے، ایک نیا ٹرانسفارمر جاری کیا گیا ہے جو جے ایس ایکس کو بغیر کسی تبدیلی کے بدل سکتا ہے۔ createElement طریقہ.

ہکس استعمال کرنے کے لیے آپ کو اب بھی React درآمد کرنے کی ضرورت ہوگی، ٹکڑے ٹکڑے، اور کوئی بھی دیگر افعال یا اجزاء جن کی آپ کو لائبریری سے ضرورت ہو سکتی ہے:

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

یہ میری ابتدائی غلطیاں تھیں!

شاید "غلطی" بہت سخت لفظ ہے کیونکہ بعد میں کچھ بہتر طریقے سامنے آئے۔ پھر بھی، مجھے بہت ساری مثالیں نظر آتی ہیں جہاں کچھ کرنے کا "پرانا" طریقہ اب بھی پراجیکٹس اور دیگر ٹیوٹوریلز میں فعال طور پر استعمال ہو رہا ہے۔

سچ پوچھیں تو، میں نے شروع کرتے وقت شاید پانچ سے زیادہ غلطیاں کیں۔ جب بھی آپ کسی نئے ٹول کے لیے پہنچیں گے تو یہ سوئچ پلٹنے کے بجائے اسے مؤثر طریقے سے استعمال کرنے کے لیے سیکھنے کے سفر کی طرح ہوگا۔ لیکن یہ وہ چیزیں ہیں جو میں برسوں بعد بھی اپنے ساتھ رکھتا ہوں!

اگر آپ کچھ عرصے سے React کا استعمال کر رہے ہیں، تو وہ کون سی چیزیں ہیں جن کے بارے میں آپ کی خواہش ہے کہ آپ شروع کرنے سے پہلے جانتے ہوں؟ ایک مجموعہ حاصل کرنا بہت اچھا ہوگا جو دوسروں کو اسی جدوجہد سے بچنے میں مدد فراہم کرے۔