React Podstawowe pojęcia — Components, Props, State

1. Components

Components in React są niezależnymi blokami konstrukcyjnymi, które można ponownie wykorzystać. Są one podzielone na mniejsze elementy interfejsu użytkownika i można je łączyć w większe pliki components. Na przykład aplikacja może mieć components takie elementy jak Header, Sidebar i Content. Każdy komponent ma swoje własne obowiązki i może odbierać props i state wyświetlać odpowiednie dane.

Przykład:

// 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 to wartości przekazywane components z zewnątrz. Pomagają przekazywać dane od rodzica components do dziecka components. Props są tylko do odczytu i nie można ich zmienić wewnątrz komponentu. Aby użyć props, przekazujemy wartości do atrybutów komponentu i używamy ich w części UI.

Przykład:

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

3. State

State in React to zmienne dane, które można zmieniać w komponencie. Każdy komponent może mieć własne dane state do przechowywania danych dynamicznych i zarządzania nimi. Gdy state zmiany, React automatycznie aktualizuje odpowiedni interfejs użytkownika. State jest zarządzany tylko w klasie components i jest inicjowany w konstruktorze komponentu. Aby zaktualizować state, używamy State metody `set()`.

Przykład:

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