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, ਅਸੀਂ `set 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>  
   );  
  }  
}