Kodiċi ta' Organizzazzjoni b'React Hooks and Context

Meta taħdem fuq proġetti React fuq skala kbira, huwa kruċjali li jkun hemm codebase organizzata tajjeb għal manutenzjoni u skalabbiltà aħjar.

F'dan l-artikolu, se ngħaddu fl-aħjar prattiki għall-organizzazzjoni tal-kodiċi tas-sors tiegħek f'React, b'enfasi fuq l-użu ta' React Hooks and Context.

 

L-użu ta 'React Hooks għall-Ġestjoni tal-Istat

React Hooks huma ġabra ta’ funzjonijiet li jippermettulek tuża karatteristiċi statali u oħrajn ta’ React mingħajr ma tuża klassijiet. Dan jgħin biex tikteb kodiċi aktar konċiż u li jinqara. Pereżempju, nistgħu nużaw l-useState Hook biex niġġestixxu l-istat f'komponent.

Hawn eżempju:

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;  

 

Kombinazzjoni ta 'ingredjenti

Wieħed mill-benefiċċji ta 'React huwa l-abbiltà li jerġgħu jintużaw il-komponenti. Biex tiżdied l-organizzazzjoni, nistgħu nużaw komponenti iżgħar biex nibnu komponenti akbar.

Dan jgħin biex ikisser ix-xogħol u jagħmel il-kodiċi faċli biex jinżamm. Pereżempju, nistgħu noħolqu <Button> komponent biex nużaw f'diversi postijiet fl-applikazzjoni tagħna:

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

 

L-użu tal-Kuntest biex jimmaniġġja l-istat globali

Il-kuntest huwa mekkaniżmu f'React li jippermettilna naqsmu dejta bejn komponenti tfal mingħajr ma ngħaddu minn komponenti parent. Dan jevita li l-attributi tad-dejta jgħaddu minn diversi livelli ta' komponenti u jgħin biex titnaqqas il-kumplessità tal-kodiċi.

Hawn hu eżempju ta' kif tuża Context biex taqsam il-lingwa attwali fl-applikazzjoni:

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;  

 

Hawn fuq hemm xi l-aħjar prattiki għall-organizzazzjoni tal-kodiċi tas-sors React billi tuża React Hooks and Context.