React Coincheapa Bunúsacha- Components, Props, State

1. Components

Components Is bloic thógála neamhspleácha iad React ar féidir iad a athúsáid. Roinntear iad ina n-eilimintí Chomhéadain níos lú agus is féidir iad a chomhcheangal le bheith níos mó components. Mar shampla, is féidir le feidhmchlár components mar Header, Sidebar agus Content. Tá a fhreagrachtaí féin ag gach comhpháirt agus is féidir leo sonraí comhfhreagracha a fháil props agus a thaispeáint. state

Sampla:

// 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 in React a aistrítear luachanna isteach components ón taobh amuigh. Cuidíonn siad le sonraí a chur ar aghaidh ó thuismitheoir components go leanbh components. Props atá inléite amháin agus ní féidir iad a athrú laistigh den chomhpháirt. Le húsáid props, cuirimid luachanna ar aghaidh chuig tréithe an chomhpháirte agus úsáidimid iad sa chuid Chomhéadain.

Sampla:

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

3. State

State in React is sonraí mutable is féidir a athrú laistigh de chomhpháirt. Is féidir a chuid féin a bheith ag gach comhpháirt state chun sonraí dinimiciúla a stóráil agus a bhainistiú. Nuair a bheidh na state hathruithe, React nuashonruithe go huathoibríoch ar an comhéadan úsáideora comhfhreagrach. State ní dhéantar é a bhainistiú ach sa rang components agus cuirtear in iúl é i dtiomsaitheoir an chomhpháirte. Chun an, a nuashonrú state, úsáidimid an State modh `set()`.

Sampla:

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