React Grundkonzepte- Components, Props, State

1. Components

Components Dabei React handelt es sich um unabhängige Bausteine, die wiederverwendet werden können. Sie sind in kleinere UI-Elemente unterteilt und können zu größeren kombiniert werden components. Eine Anwendung kann beispielsweise components, Header und Sidebar enthalten Content. Jede Komponente hat ihre eigenen Verantwortlichkeiten und kann entsprechende Daten empfangen props und state anzeigen.

Beispiel:

// 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 sind Werte, die von außen React übergeben werden. Sie helfen dabei, Daten vom Elternteil an das Kind components weiterzugeben. sind schreibgeschützt und können nicht innerhalb der Komponente geändert werden. Zur Verwendung übergeben wir Werte an die Attribute der Komponente und verwenden sie im UI-Teil. components components Props props

Beispiel:

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

3. State

State in React sind veränderbare Daten, die innerhalb einer Komponente geändert werden können. Jede Komponente kann über eine eigene Komponente verfügen, state um dynamische Daten zu speichern und zu verwalten. Bei state Änderungen React wird die entsprechende Benutzeroberfläche automatisch aktualisiert. State wird nur in der Klasse verwaltet components und im Konstruktor der Komponente initialisiert. Um die zu aktualisieren state, verwenden wir die State Methode „set()“.

Beispiel:

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