React Peruskäsitteet- Components, Props, State

1. Components

Components ovat React itsenäisiä rakennuspalikoita, joita voidaan käyttää uudelleen. Ne on jaettu pienempiin käyttöliittymäelementteihin ja niitä voidaan yhdistää suuremmaksi components. Esimerkiksi sovelluksessa voi components olla Header, Sidebar ja Content. Jokaisella komponentilla on omat vastuunsa ja se voi vastaanottaa props ja state näyttää vastaavaa tietoa.

Esimerkki:

// 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 ovat ulkopuolelta React siirrettyjä arvoja. components Ne auttavat siirtämään tietoja vanhemmalta components lapselle components. Props ovat vain luku -tilassa, eikä niitä voi muuttaa komponentin sisällä. Käyttääksesi props:tä välitämme arvot komponentin attribuuteille ja käytämme niitä käyttöliittymäosassa.

Esimerkki:

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

3. State

State in React on muuttuvaa dataa, jota voidaan muuttaa komponentin sisällä. Jokaisella komponentilla voi olla oma state dynaamisen tiedon tallentamista ja hallintaa varten. Kun state muutokset muuttuvat, React päivittyy automaattisesti vastaava käyttöliittymä. State hallitaan vain luokassa components ja alustetaan komponentin rakentajassa. Päivitäksemme state käytämme "set State()" -menetelmää.

Esimerkki:

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