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