React Dhana za Msingi- Components, Props, State

1. Components

Components ndani React kuna vitalu vya ujenzi vinavyojitegemea ambavyo vinaweza kutumika tena. Zimegawanywa katika vipengele vidogo vya UI na vinaweza kuunganishwa na kuunda vikubwa zaidi components. Kwa mfano, programu inaweza kuwa na components kama vile Header, Sidebar na Content. Kila sehemu ina majukumu yake mwenyewe na inaweza kupokea props na state kuonyesha data sambamba.

Mfano:

// Functional Component  
function Greeting(props) {  
  return <h1>Hello, {props.name}!</h1>;  
}  
  
// Class Component  
class Greeting extends React.Component {  
  render() {  
    return <h1>Hello, {this.props.name}!</h1>;  
  }  
}

2. Props

Props ndani React ni maadili yanayopitishwa components kutoka nje. Wanasaidia kupitisha data kutoka kwa mzazi components hadi kwa mtoto components. Props zinasomwa tu na haziwezi kubadilishwa ndani ya kijenzi. Ili kutumia props, tunapitisha thamani kwa sifa za kijenzi na kuzitumia katika sehemu ya UI.

Mfano:

function Greeting(props) {  
  return <h1>Hello, {props.name}!</h1>;  
}  
  
ReactDOM.render(<Greeting name="John" />, document.getElementById('root'));

3. State

State in React ni data inayoweza kubadilishwa ambayo inaweza kubadilishwa ndani ya kijenzi. Kila sehemu inaweza kuwa na yake state ya kuhifadhi na kudhibiti data inayobadilika. Wakati state mabadiliko, React husasisha kiolesura kinacholingana cha mtumiaji. State inasimamiwa darasani tu components na imeanzishwa katika mjenzi wa sehemu. Ili kusasisha state, tunatumia State mbinu ya `set()`.

Mfano:

class Counter extends React.Component {  
  constructor(props) {  
    super(props);  
    this.state = { count: 0 };  
  }  
  
  increment() {  
    this.setState({ count: this.state.count + 1 });  
  }  
  
  render() {  
    return( 
      <div>  
        <p>Count: {this.state.count}</p>  
        <button onClick={() => this.increment()}>Increment</button>  
      </div>  
   );  
  }  
}