પ્રતિક્રિયા હુક્સ અને સંદર્ભ સાથે સંહિતાનું આયોજન

મોટા પાયે રિએક્ટ પ્રોજેક્ટ્સ પર કામ કરતી વખતે, બહેતર જાળવણી અને માપનીયતા માટે સુવ્યવસ્થિત કોડબેઝ હોવું મહત્વપૂર્ણ છે.

આ લેખમાં, અમે React માં તમારા સોર્સ કોડને ગોઠવવા માટેની શ્રેષ્ઠ પ્રેક્ટિસમાં ડાઇવ કરીશું, જેમાં રિએક્ટ હુક્સ અને સંદર્ભનો ઉપયોગ કરવા પર ધ્યાન કેન્દ્રિત કરવામાં આવશે.

 

સ્ટેટ મેનેજમેન્ટ માટે રીએક્ટ હુક્સનો ઉપયોગ કરવો

રિએક્ટ હુક્સ એ ફંક્શનનો સંગ્રહ છે જે તમને ક્લાસનો ઉપયોગ કર્યા વિના સ્ટેટ અને અન્ય રિએક્ટ સુવિધાઓનો ઉપયોગ કરવાની મંજૂરી આપે છે. આ વધુ સંક્ષિપ્ત અને વાંચી શકાય તેવા કોડ લખવામાં મદદ કરે છે. ઉદાહરણ તરીકે, અમે કમ્પોનન્ટમાં સ્ટેટ મેનેજ કરવા માટે useState હૂકનો ઉપયોગ કરી શકીએ છીએ.

અહીં એક ઉદાહરણ છે:

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;  

 

ઘટકોનું મિશ્રણ

પ્રતિક્રિયાના ફાયદાઓમાંનો એક એ ઘટકોનો ફરીથી ઉપયોગ કરવાની ક્ષમતા છે. સંગઠન વધારવા માટે, અમે મોટા ઘટકો બનાવવા માટે નાના ઘટકોનો ઉપયોગ કરી શકીએ છીએ.

આ કામને તોડવામાં અને કોડને જાળવવામાં સરળ બનાવવામાં મદદ કરે છે. ઉદાહરણ તરીકે, અમે <Button> અમારી એપ્લિકેશનમાં બહુવિધ સ્થળોએ ઉપયોગ કરવા માટે એક ઘટક બનાવી શકીએ છીએ:

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

 

વૈશ્વિક સ્થિતિનું સંચાલન કરવા માટે સંદર્ભનો ઉપયોગ કરવો

સંદર્ભ પ્રતિક્રિયામાં એક પદ્ધતિ છે જે અમને માતાપિતાના ઘટકોમાંથી પસાર થયા વિના બાળ ઘટકો વચ્ચે ડેટા શેર કરવાની મંજૂરી આપે છે. આ બહુવિધ ઘટક સ્તરોમાં ડેટા વિશેષતાઓ પસાર કરવાનું ટાળે છે અને કોડ જટિલતા ઘટાડવામાં મદદ કરે છે.

એપ્લિકેશનમાં વર્તમાન ભાષાને શેર કરવા માટે સંદર્ભનો ઉપયોગ કરવાનું અહીં એક ઉદાહરણ છે:

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;  

 

રીએક્ટ હુક્સ અને સંદર્ભનો ઉપયોગ કરીને રીએક્ટ સોર્સ કોડને ગોઠવવા માટેની કેટલીક શ્રેષ્ઠ પદ્ધતિઓ ઉપરોક્ત છે.