React Grundlæggende begreber- Components, Props, State

1. Components

Components i React er selvstændige byggeklodser, der kan genbruges. De er opdelt i mindre brugergrænsefladeelementer og kan kombineres for at danne større components. For eksempel kan en applikation have components som Header, Sidebar og Content. Hver komponent har sit eget ansvar og kan modtage props og state vise tilsvarende data.

Eksempel:

// 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 i React er værdier sendt ind components udefra. De hjælper med at videregive data fra forælder components til barn components. Props er skrivebeskyttet og kan ikke ændres inde i komponenten. For at bruge props sender vi værdier til komponentens attributter og bruger dem i UI-delen.

Eksempel:

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

3. State

State in React er mutable data, der kan ændres inden for en komponent. Hver komponent kan have sin egen state til at gemme og administrere dynamiske data. Når state ændringerne, React opdaterer automatisk den tilsvarende brugergrænseflade. State administreres kun i klassen components og initialiseres i komponentens konstruktør. For at opdatere state, bruger vi `set State()`-metoden.

Eksempel:

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