Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Forståelse av React-komponenter | Grunnleggende om React og Komponentbasert Brukergrensesnitt
React Mastery

bookForståelse av React-komponenter

I React er komponenter de grunnleggende byggeklossene i et brukergrensesnitt. De gjør det mulig for utviklere å lage uavhengige, gjenbrukbare deler av brukergrensesnittet som kan kombineres for å danne større UI-elementer.

Du kan se på en React-app som et tre av komponenter, der toppnivåkomponenten er roten. Hver komponent har ansvar for å rendre JSX-markup og definere den ønskede HTML-strukturen som vises i nettleserens DOM.

Funksjonelle komponenter

Funksjonelle komponenter er JavaScript-funksjoner som returnerer JSX for å definere struktur og innhold for et UI-element. De representerer den moderne måten å bygge React-applikasjoner på og navngis med store bokstaver, som Product eller User, for å skille dem fra vanlige HTML-elementer som div eller span.

Funksjonelle komponenter har flere fordeler:

  • Mindre boilerplate: Funksjonelle komponenter reduserer boilerplate-kode, noe som gjør dem mer konsise og enklere å arbeide med;
  • Enklere å forstå: De er lettere å forstå og oppfatte, spesielt for utviklere som er nye i React;
  • Enklere å teste: Funksjonelle komponenter forenkler testing på grunn av sin enkle natur;
  • Ingen kontekst (this): I motsetning til klassekomponenter involverer ikke funksjonelle komponenter kontekst (this), noe som forenkler koden. Her er et eksempel på en funksjonell komponent:
const Product = () => (
  <div>
    <h2>HolaFood</h2>
    <p>Price: $19.99</p>
    <button type="button">Add to Cart</button>
  </div>
);

I dette eksempelet er Product en funksjonell komponent som representerer et produktkort.

Funksjonelle komponenter utgjør hoveddelen av strukturen i en React-applikasjon, og fungerer som de grunnleggende byggeklossene for å lage brukergrensesnitt.

1. Hva er komponenter i React?

2. Hvordan bør vi navngi en funksjonell komponent i React?

question mark

Hva er komponenter i React?

Select the correct answer

question mark

Hvordan bør vi navngi en funksjonell komponent i React?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 1. Kapittel 8

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Suggested prompts:

What are the main differences between functional and class components in React?

Can you explain how to pass props to a functional component?

How do you handle state in a functional component?

Awesome!

Completion rate improved to 2.17

bookForståelse av React-komponenter

Sveip for å vise menyen

I React er komponenter de grunnleggende byggeklossene i et brukergrensesnitt. De gjør det mulig for utviklere å lage uavhengige, gjenbrukbare deler av brukergrensesnittet som kan kombineres for å danne større UI-elementer.

Du kan se på en React-app som et tre av komponenter, der toppnivåkomponenten er roten. Hver komponent har ansvar for å rendre JSX-markup og definere den ønskede HTML-strukturen som vises i nettleserens DOM.

Funksjonelle komponenter

Funksjonelle komponenter er JavaScript-funksjoner som returnerer JSX for å definere struktur og innhold for et UI-element. De representerer den moderne måten å bygge React-applikasjoner på og navngis med store bokstaver, som Product eller User, for å skille dem fra vanlige HTML-elementer som div eller span.

Funksjonelle komponenter har flere fordeler:

  • Mindre boilerplate: Funksjonelle komponenter reduserer boilerplate-kode, noe som gjør dem mer konsise og enklere å arbeide med;
  • Enklere å forstå: De er lettere å forstå og oppfatte, spesielt for utviklere som er nye i React;
  • Enklere å teste: Funksjonelle komponenter forenkler testing på grunn av sin enkle natur;
  • Ingen kontekst (this): I motsetning til klassekomponenter involverer ikke funksjonelle komponenter kontekst (this), noe som forenkler koden. Her er et eksempel på en funksjonell komponent:
const Product = () => (
  <div>
    <h2>HolaFood</h2>
    <p>Price: $19.99</p>
    <button type="button">Add to Cart</button>
  </div>
);

I dette eksempelet er Product en funksjonell komponent som representerer et produktkort.

Funksjonelle komponenter utgjør hoveddelen av strukturen i en React-applikasjon, og fungerer som de grunnleggende byggeklossene for å lage brukergrensesnitt.

1. Hva er komponenter i React?

2. Hvordan bør vi navngi en funksjonell komponent i React?

question mark

Hva er komponenter i React?

Select the correct answer

question mark

Hvordan bør vi navngi en funksjonell komponent i React?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 1. Kapittel 8
some-alt