ਪ੍ਰਤੀਕਿਰਿਆ ਹੁੱਕ ਅਤੇ ਸੰਦਰਭ ਦੇ ਨਾਲ ਸੰਗਠਿਤ ਕੋਡ

ਵੱਡੇ ਪੈਮਾਨੇ 'ਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਪ੍ਰੋਜੈਕਟਾਂ 'ਤੇ ਕੰਮ ਕਰਦੇ ਸਮੇਂ, ਬਿਹਤਰ ਰੱਖ-ਰਖਾਅ ਅਤੇ ਸਕੇਲੇਬਿਲਟੀ ਲਈ ਇੱਕ ਚੰਗੀ ਤਰ੍ਹਾਂ ਸੰਗਠਿਤ ਕੋਡਬੇਸ ਹੋਣਾ ਮਹੱਤਵਪੂਰਨ ਹੈ।

ਇਸ ਲੇਖ ਵਿੱਚ, ਅਸੀਂ 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;  

 

ਸਮੱਗਰੀ ਦਾ ਸੁਮੇਲ

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;  

 

ਰੀਐਕਟ ਹੁੱਕਸ ਅਤੇ ਸੰਦਰਭ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਰੀਐਕਟ ਸਰੋਤ ਕੋਡ ਨੂੰ ਸੰਗਠਿਤ ਕਰਨ ਲਈ ਉੱਪਰ ਕੁਝ ਵਧੀਆ ਅਭਿਆਸ ਹਨ।