React Grunnleggende konsepter- Components, Props, State

1. Components

Components i React er uavhengige byggeklosser som kan gjenbrukes. De er delt inn i mindre brukergrensesnittelementer og kan kombineres for å danne større components. For eksempel kan en applikasjon ha components som Header, Sidebar og Content. Hver komponent har sitt eget ansvar og kan motta 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 inn React er verdier sendt inn components fra utsiden. De hjelper til med å overføre data fra foreldre components til barn components. Props er skrivebeskyttet og kan ikke endres inne i komponenten. For å bruke props sender vi verdier til komponentens attributter og bruker 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 mutbare data som kan endres i en komponent. Hver komponent kan ha sin egen state for å lagre og administrere dynamiske data. Når state endringene, React automatisk oppdaterer det tilsvarende brukergrensesnittet. State administreres kun i klassen components og initialiseres i komponentens konstruktør. For å oppdatere state bruker vi `sett 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>  
   );  
  }  
}