React Basic Concepts- Components, Props, State

1. Components

Components a ciki React akwai tubalan gine-gine masu zaman kansu waɗanda za a iya sake amfani da su. An raba su zuwa ƙananan abubuwan UI kuma ana iya haɗa su don samar da girma components. Misali, aikace-aikace na iya samun components irin su Header, Sidebar da Content. Kowane bangare yana da nasa alhakin kuma yana iya karba props da kuma state nuna bayanai masu dacewa.

Misali:

// 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 a cikin React dabi'un da aka shiga components daga waje. Suna taimakawa wajen aika bayanai daga iyaye components zuwa yaro components. Props ana karantawa kawai kuma ba za a iya canza su a cikin sashin ba. Don amfani props, muna ƙaddamar da ƙima zuwa halayen ɓangaren kuma muna amfani da su a ɓangaren UI.

Misali:

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

3. State

State a cikin React akwai mutable bayanai da za a iya canza a cikin wani bangaren. Kowane bangare na iya samun nasa state don adanawa da sarrafa bayanai masu ƙarfi. Lokacin da state canje-canje, React ta atomatik ke sabunta mahaɗin mai amfani daidai. State ana sarrafa shi a cikin aji kawai components kuma an fara shi a cikin maginin sashin. Don sabunta state, muna amfani da State hanyar 'saitin()'.

Misali:

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>  
   );  
  }  
}