React Základní pojmy- Components, Props, State

1. Components

Components v React jsou nezávislé stavební bloky, které lze znovu použít. Jsou rozděleny na menší prvky uživatelského rozhraní a lze je kombinovat do větších components. Aplikace může mít components například Header, Sidebar a Content. Každá komponenta má své vlastní odpovědnosti a může přijímat props a state zobrazovat odpovídající data.

Příklad:

// 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 v React jsou hodnoty předané components zvenčí. Pomáhají předávat data od rodiče components k dítěti components. Props jsou pouze pro čtení a nelze je uvnitř komponenty změnit. Chcete-li použít props, předáme hodnoty atributům komponenty a použijeme je v části uživatelského rozhraní.

Příklad:

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

3. State

State v React jsou měnitelná data, která lze měnit v rámci komponenty. Každá komponenta může mít vlastní state pro ukládání a správu dynamických dat. Při state změnách React automaticky aktualizuje odpovídající uživatelské rozhraní. State je spravován pouze ve třídě components a je inicializován v konstruktoru komponenty. K aktualizaci state použijeme State metodu `set()`.

Příklad:

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