React அடிப்படை கருத்துக்கள்- Components, Props State

1. Components

Components in React என்பது மீண்டும் பயன்படுத்தக்கூடிய சுயாதீன கட்டுமானத் தொகுதிகள். அவை சிறிய UI கூறுகளாகப் பிரிக்கப்படுகின்றன, மேலும் அவை பெரியதாக உருவாக்கப்படுகின்றன components. எடுத்துக்காட்டாக, ஒரு components பயன்பாட்டில் Header, Sidebar மற்றும் Content. ஒவ்வொரு கூறுக்கும் அதன் சொந்த பொறுப்புகள் உள்ளன மற்றும் தொடர்புடைய தரவைப் பெறலாம் props மற்றும் state காட்டலாம்.

உதாரணமாக:

// 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 உள்ள மதிப்புகள் வெளியில் இருந்து React அனுப்பப்படுகின்றன. components அவை பெற்றோரிடமிருந்து components குழந்தைக்கு தரவுகளை அனுப்ப உதவுகின்றன components. Props படிக்க மட்டுமே மற்றும் கூறுக்குள் மாற்ற முடியாது. பயன்படுத்த props, கூறுகளின் பண்புக்கூறுகளுக்கு மதிப்புகளை அனுப்புகிறோம் மற்றும் அவற்றை UI பகுதியில் பயன்படுத்துகிறோம்.

உதாரணமாக:

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

3. State

State in React என்பது ஒரு கூறுக்குள் மாற்றக்கூடிய மாறக்கூடிய தரவு. state டைனமிக் தரவைச் சேமிக்கவும் நிர்வகிக்கவும் ஒவ்வொரு கூறுகளும் அதன் சொந்தத்தைக் கொண்டிருக்கலாம். மாறும்போது state, React ​​தானாகவே தொடர்புடைய பயனர் இடைமுகம் புதுப்பிக்கப்படும். State வகுப்பில் மட்டுமே நிர்வகிக்கப்படுகிறது components மற்றும் கூறுகளின் கட்டமைப்பாளரில் துவக்கப்படுகிறது. புதுப்பிக்க state, `செட்()` முறையைப் பயன்படுத்துகிறோம் State.

உதாரணமாக:

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