Ngatur Kode karo React Hooks lan Konteks

Nalika nggarap proyek React skala gedhe, penting kanggo duwe basis kode sing wis diatur kanthi apik kanggo njaga lan skalabilitas sing luwih apik.

Ing artikel iki, kita bakal nyilem babagan praktik paling apik kanggo ngatur kode sumber sampeyan ing React, kanthi fokus kanggo nggunakake React Hooks and Context.

 

Nggunakake React Hooks kanggo Manajemen Negara

React Hooks minangka koleksi fungsi sing ngidini sampeyan nggunakake negara lan fitur React liyane tanpa nggunakake kelas. Iki mbantu nulis kode sing luwih ringkes lan bisa diwaca. Contone, kita bisa nggunakake useState Hook kanggo ngatur negara ing komponen.

Punika conto:

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;  

 

Kombinasi saka bahan

Salah sawijining keuntungan saka React yaiku kemampuan kanggo nggunakake maneh komponen. Kanggo nambah organisasi, kita bisa nggunakake komponen sing luwih cilik kanggo mbangun komponen sing luwih gedhe.

Iki mbantu kanggo break mudhun karya lan nggawe kode gampang kanggo njaga. Contone, kita bisa nggawe <Button> komponen kanggo digunakake ing sawetara panggonan ing aplikasi kita:

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

 

Nggunakake Konteks kanggo ngatur negara global

Konteks minangka mekanisme ing React sing ngidini kita nuduhake data ing antarane komponen anak tanpa ngliwati komponen induk. Iki ngindhari atribut data liwat macem-macem tingkat komponen lan mbantu nyuda kerumitan kode.

Iki conto nggunakake Konteks kanggo nuduhake basa saiki ing aplikasi:

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;  

 

Ing ndhuwur ana sawetara praktik paling apik kanggo ngatur kode sumber React nggunakake React Hooks and Context.