React Grundläggande begrepp- Components, Props, State

1. Components

Components i React är oberoende byggstenar som kan återanvändas. De är uppdelade i mindre UI-element och kan kombineras för att bilda större components. Till exempel kan en applikation ha components som Header, Sidebar och Content. Varje komponent har sitt eget ansvar och kan ta emot props och state visa motsvarande data.

Exempel:

// 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 är värden som skickas in components från utsidan. De hjälper till att överföra data från förälder components till barn components. Props är skrivskyddade och kan inte ändras inuti komponenten. För att använda props skickar vi värden till komponentens attribut och använder dem i UI-delen.

Exempel:

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

3. State

State in React är föränderlig data som kan ändras inom en komponent. Varje komponent kan ha sin egen state för att lagra och hantera dynamisk data. När state ändringarna React uppdateras automatiskt motsvarande användargränssnitt. State hanteras endast i klass components och initieras i komponentens konstruktor. För att uppdatera state använder vi State metoden `set()`.

Exempel:

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