React Osnovni pojmovi- Components, Props, State

1. Components

Components in React su neovisni građevni blokovi koji se mogu ponovno upotrijebiti. Podijeljeni su na manje elemente korisničkog sučelja i mogu se kombinirati u veće components. Na primjer, aplikacija može imati components kao što su Header, Sidebar i Content. Svaka komponenta ima svoje vlastite odgovornosti i može primati props i state prikazati odgovarajuće podatke.

Primjer:

// 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 u React su vrijednosti prenesene components izvana. Oni pomažu u prijenosu podataka od roditelja components do djeteta components. Props samo su za čitanje i ne mogu se mijenjati unutar komponente. Za korištenje props, prosljeđujemo vrijednosti atributima komponente i koristimo ih u dijelu korisničkog sučelja.

Primjer:

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

3. State

State in React su promjenjivi podaci koji se mogu mijenjati unutar komponente. Svaka komponenta može imati vlastitu state za pohranu i upravljanje dinamičkim podacima. Kada se state promjene, React automatski ažurira odgovarajuće korisničko sučelje. State upravlja se samo u klasi components i inicijalizira se u konstruktoru komponente. Za ažuriranje state koristimo State metodu `set()`.

Primjer:

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