React ప్రాథమిక భావనలు- Components, Props State

1. Components

Components లో 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 డేటాను పంపడంలో సహాయపడతారు. చదవడానికి మాత్రమే మరియు భాగం లోపల మార్చబడదు. ఉపయోగించడానికి, మేము కాంపోనెంట్ యొక్క లక్షణాలకు విలువలను పాస్ చేస్తాము మరియు వాటిని UI భాగంలో ఉపయోగిస్తాము. components components Props props

ఉదాహరణ:

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