प्रतिक्रिया हुक र सन्दर्भ संग संगठित कोड

ठूला-ठूला प्रतिक्रिया परियोजनाहरूमा काम गर्दा, राम्रो रखरखाव र स्केलेबिलिटीको लागि राम्रो संगठित कोडबेस हुनु महत्त्वपूर्ण छ।

यस लेखमा, हामी प्रतिक्रिया हुक र सन्दर्भको प्रयोगमा ध्यान केन्द्रित गर्दै प्रतिक्रियामा तपाईंको स्रोत कोड व्यवस्थित गर्नका लागि उत्तम अभ्यासहरूमा डुब्नेछौं।

 

राज्य व्यवस्थापनको लागि प्रतिक्रिया हुकहरू प्रयोग गर्दै

प्रतिक्रिया हुकहरू प्रकार्यहरूको संग्रह हो जसले तपाईंलाई कक्षाहरू प्रयोग नगरी राज्य र अन्य प्रतिक्रिया सुविधाहरू प्रयोग गर्न अनुमति दिन्छ। यसले थप संक्षिप्त र पढ्न योग्य कोड लेख्न मद्दत गर्दछ। उदाहरणका लागि, हामी कम्पोनेन्टमा राज्य व्यवस्थापन गर्न 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;  

 

अवयवहरूको संयोजन

React को फाइदाहरू मध्ये एक घटक पुन: प्रयोग गर्ने क्षमता हो। संगठन बढाउन, हामी ठूला कम्पोनेन्टहरू निर्माण गर्न साना कम्पोनेन्टहरू प्रयोग गर्न सक्छौं।

यसले कामलाई तोड्न र कोडलाई मर्मत गर्न सजिलो बनाउन मद्दत गर्छ। उदाहरणका लागि, हामी <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;  

 

React Hooks र Context प्रयोग गरेर React स्रोत कोड व्यवस्थित गर्नका लागि माथि केही उत्तम अभ्यासहरू छन्।