ری ایکٹ ہکس اور سیاق و سباق کے ساتھ کوڈ کو منظم کرنا

بڑے پیمانے پر React پروجیکٹس پر کام کرتے وقت، بہتر دیکھ بھال اور اسکیل ایبلٹی کے لیے ایک اچھی طرح سے منظم کوڈ بیس کا ہونا بہت ضروری ہے۔

اس مضمون میں، ہم React میں آپ کے ماخذ کوڈ کو ترتیب دینے کے لیے بہترین طریقوں پر غور کریں گے، جس میں React ہکس اور سیاق و سباق کے استعمال پر توجہ دی جائے گی۔

 

اسٹیٹ مینجمنٹ کے لیے ری ایکٹ ہکس کا استعمال

React Hooks فنکشنز کا ایک مجموعہ ہے جو آپ کو کلاسز کا استعمال کیے بغیر اسٹیٹ اور دیگر React خصوصیات کو استعمال کرنے کی اجازت دیتا ہے۔ اس سے زیادہ جامع اور پڑھنے کے قابل کوڈ لکھنے میں مدد ملتی ہے۔ مثال کے طور پر، ہم کسی جزو میں ریاست کو منظم کرنے کے لیے useState Hook استعمال کر سکتے ہیں۔

یہاں ایک مثال ہے:

import React, { useState } from 'react';  
  
function Counter() {  
  const [count, setCount] = useState(0);  
  
  const increment =() => {  
    setCount(count + 1);  
  };  
  
  return( 
    <div>  
      <p>Count: {count}</p>  
      <button onClick={increment}>Increment</button>  
    </div>  
 );  
}  
  
export default Counter;  

 

اجزاء کا مجموعہ

React کے فوائد میں سے ایک اجزاء کو دوبارہ استعمال کرنے کی صلاحیت ہے۔ تنظیم کو بڑھانے کے لیے، ہم بڑے اجزاء کی تعمیر کے لیے چھوٹے اجزاء استعمال کر سکتے ہیں۔

یہ کام کو توڑنے اور کوڈ کو برقرار رکھنے میں آسان بنانے میں مدد کرتا ہے۔ مثال کے طور پر، ہم <Button> اپنی درخواست میں متعدد جگہوں پر استعمال کرنے کے لیے ایک جزو بنا سکتے ہیں:

import React from 'react';  
  
function Button({ onClick, children }) {  
  return <button onClick={onClick}>{children}</button>;  
}  
  
export default Button;  

 

عالمی ریاست کو منظم کرنے کے لیے سیاق و سباق کا استعمال

React میں سیاق و سباق ایک ایسا طریقہ کار ہے جو ہمیں والدین کے اجزاء سے گزرے بغیر بچوں کے اجزاء کے درمیان ڈیٹا کا اشتراک کرنے کی اجازت دیتا ہے۔ یہ متعدد اجزاء کی سطحوں پر ڈیٹا کی خصوصیات کو منتقل کرنے سے گریز کرتا ہے اور کوڈ کی پیچیدگی کو کم کرنے میں مدد کرتا ہے۔

ایپلی کیشن میں موجودہ زبان کا اشتراک کرنے کے لیے سیاق و سباق کے استعمال کی ایک مثال یہ ہے:

import React, { createContext, useContext, useState } from 'react';  
  
const LanguageContext = createContext();  
  
function App() {  
  const [language, setLanguage] = useState('en');  
  
  const changeLanguage =(newLanguage) => {  
    setLanguage(newLanguage);  
  };  
  
  return( 
    <LanguageContext.Provider value={{ language, changeLanguage }}>  
      <div>  
        <Navbar />  
        <Content />  
      </div>  
    </LanguageContext.Provider>  
 );  
}  
  
function Navbar() {  
  const { language, changeLanguage } = useContext(LanguageContext);  
  
  return( 
    <div>  
      <button onClick={() => changeLanguage('en')}>English</button>  
      <button onClick={() => changeLanguage('fr')}>French</button>  
      <button onClick={() => changeLanguage('es')}>Spanish</button>  
      <p>Current language: {language}</p>  
    </div>  
 );  
}  
  
function Content() {  
  const { language } = useContext(LanguageContext);  
  
  return <p>This is the content in {language}.</p>;  
}  
  
export default App;  

 

React ہکس اور سیاق و سباق کا استعمال کرتے ہوئے React سورس کوڈ کو منظم کرنے کے لیے اوپر کچھ بہترین طریقے ہیں۔