React Osnovni pojmi- Components, Props, State

1. Components

Components so React neodvisni gradniki, ki jih je mogoče ponovno uporabiti. Razdeljeni so na manjše elemente uporabniškega vmesnika in jih je mogoče kombinirati v večje components. Aplikacija ima lahko na components primer Header, Sidebar in Content. Vsaka komponenta ima svoje odgovornosti in lahko sprejema props in state prikazuje ustrezne podatke.

primer:

// 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 notri React so vrednote, ki se prenašajo components od zunaj. Pomagajo pri prenosu podatkov od staršev components do otrok components. Props so samo za branje in jih ni mogoče spreminjati znotraj komponente. Za uporabo props posredujemo vrednosti atributom komponente in jih uporabimo v delu uporabniškega vmesnika.

primer:

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

3. State

State in React so spremenljivi podatki, ki jih je mogoče spremeniti znotraj komponente. Vsaka komponenta ima lahko svojo lastno komponento state za shranjevanje in upravljanje dinamičnih podatkov. Ko se state spremeni, React samodejno posodobi ustrezen uporabniški vmesnik. State se upravlja samo v razredu components in se inicializira v konstruktorju komponente. Za posodobitev state uporabljamo State metodo `set()`.

primer:

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