Next.js 15 for fullstack-webapper · leksjon

React-komponenter og JSX

Forstå byggesteinene i React-applikasjoner og hvordan JSX forenkler opprettingen av brukergrensesnitt.

Leksjon 1 av 411 trinn

React-komponenter og JSX er en gratis leksjon i Next.js 15 for fullstack-webapper på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Next.js 15 for fullstack-webapper, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Next.js 15 for fullstack-webapper inneholder totalt 4 leksjoner.

Hva er React-komponenter?

Velkommen til React-verdenen! I bunn og grunn handler React om komponenter.

Tenk på komponenter som gjenbrukbare, selvstendige byggeklosser for brukergrensesnittet (UI).
De lar Dem dele opp komplekse brukergrensesnitt i mindre og håndterbare deler.
Hver komponent er som en JavaScript-funksjon som returnerer det som skal vises på skjermen.

Møt JSX: JavaScript XML

Det kan bli komplisert å skrive brukergrensesnitt i ren JavaScript. Det er her JSX kommer inn!

JSX er en syntaksutvidelse for JavaScript som lar Dem skrive HTML-lignende kode direkte i JavaScript-filene.
Det gjør det intuitivt og kjent å definere brukergrensesnittet ved å kombinere HTML-struktur med kraften i JavaScript.
Nettlesere forstår ikke JSX direkte, så den omformes til vanlig JavaScript.

JSX: Under overflaten

Selv om JSX ligner på HTML, er det ikke HTML. Når koden kompileres (eller «transpileres»), konverteres JSX til vanlige JavaScript-funksjonskall.

For eksempel blir <h1>Hello</h1> til noe som React.createElement('h1', null, 'Hello').

Denne konverteringen håndteres automatisk av verktøy som Babel, slik at De kan skrive renere og mer lesbar kode for brukergrensesnittet.

Deres første funksjonelle komponent

I moderne React skrives komponenter vanligvis som JavaScript-funksjoner. Disse kalles funksjonelle komponenter.

De tar imot «props» (forkortelse for properties) som inndata og returnerer JSX, som beskriver hvordan brukergrensesnittet skal se ut.

function WelcomeMessage() {
  return (
    <h1>Hello, CoddyKit!</h1>
  );
}

// In a real app, this component would be rendered
// by ReactDOM or a framework like Next.js.
// For now, think of it as a blueprint for UI.

JSX-regel 1: Ett rotelement

En viktig regel i JSX er at hvert JSX-uttrykk må returnere ett rotelement.

Det betyr at De ikke kan ha to elementer på øverste nivå rett ved siden av hverandre. Hvis De må returnere flere elementer, pakker De dem inn i ett enkelt forelderelement, for eksempel <div>, eller bruker et Fragment (<></>) for en ryddigere løsning som ikke legger til ekstra noder i DOM-en.

function UserCard() {
  return (
    <>
      <h2>John Doe</h2>
      <p>Software Developer</p>
    </>
  );
}

// Incorrect: return (
//   <h2>John Doe</h2>
//   <p>Software Developer</p>
// );

JSX-regel 2: camelCase-props

Selv om JSX ligner på HTML, er det fortsatt JavaScript. Derfor får enkelte HTML-attributter nye navn som følger JavaScripts camelCase-konvensjon.

class blir til className
for blir til htmlFor
Hendelsesbehandlere som onclick blir til onClick

Dette bidrar til å unngå konflikter med reserverte JavaScript-nøkkelord.

<div className="container">
  <label htmlFor="username">Name:</label>
  <input type="text" id="username" />
</div>

JavaScript-uttrykk i praksis

En av de mest kraftfulle funksjonene i JSX er muligheten til å bygge inn JavaScript-uttrykk direkte i brukergrensesnittet ved hjelp av krøllparenteser {}.

De kan bruke variabler, utføre beregninger eller kalle funksjoner inne i disse parentesene. La oss se på et enkelt kjørbart eksempel med en variabel:

function main() {
  const appName = "CoddyKit";
  console.log(`Welcome to ${appName}!`);
}
main();

Selvlukkende elementer

I HTML kan enkelte tagger være selvlukkende (for eksempel <img> eller <input>). I JSX må alle elementer enten ha en avsluttende tagg eller være selvlukkende.

Hvis et element ikke har noen underordnede elementer, må De lukke det med en skråstrek før den avsluttende vinkelparentesen, for eksempel <img /> eller <br />.

<div>
  <input type="text" placeholder="Enter your name" />
  <br />
  <img src="/logo.png" alt="App Logo" />
</div>

Kombinere komponenter

Den virkelige magien med React-komponenter er at de kan kombineres. De kan bruke én komponent inne i en annen og bygge komplekse brukergrensesnitt av enkle, fokuserte deler.

Dette fremmer gjenbruk og gjør applikasjonens struktur tydelig og enkel å vedlikeholde. Det er som å bygge med LEGO-klosser!

function Button() {
  return <button>Click Me</button>;
}

function Header() {
  return (
    <header>
      <h1>My Awesome App</h1>
      <Button /> {/* Using the Button component */}
    </header>
  );
}

Kontroll av komponenter og JSX

På tide med en rask kontroll! Hvilken av følgende regler er viktig når De skriver JSX?

Besvar den i den interaktive leksjonen

Oppsummering: Komponenter og JSX

Godt jobbet! I denne leksjonen har De lært de grunnleggende konseptene i React:

Komponenter er gjenbrukbare byggeklosser i brukergrensesnittet, vanligvis skrevet som funksjoner.
JSX er en syntaksutvidelse for JavaScript som lar Dem skrive HTML-lignende kode for brukergrensesnittet.
Viktige JSX-regler er å returnere ett rotelement, bruke camelCase for attributter (som className) og bruke selvlukkende tagger uten innhold.
De kan bygge inn JavaScript-uttrykk i JSX ved hjelp av krøllparenteser {}.

Det er avgjørende å forstå komponenter og JSX for å bygge alle typer React-applikasjoner, også de som bruker Next.js!

Gratis å komme i gang

Lær deg TypeScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 12
Leksjoner: 48

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «React-komponenter og JSX» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Next.js 15 for fullstack-webapper, inkludert «React-komponenter og JSX», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Next.js 15 for fullstack-webapper inneholder totalt 4 leksjoner.

Hva lærer jeg i «React-komponenter og JSX»?

Forstå byggesteinene i React-applikasjoner og hvordan JSX forenkler opprettingen av brukergrensesnitt. Du øver på Next.js 15 for fullstack-webapper med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Next.js 15 for fullstack-webapper?

Ingen tidligere erfaring er nødvendig. Next.js 15 for fullstack-webapper på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «React-komponenter og JSX»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Next.js 15 for fullstack-webapper-leksjonen?

Ja. Alle Next.js 15 for fullstack-webapper-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

React-komponenter og JSX
Tilstandshåndtering med Hooks
Props og kommunikasjon mellom komponenter
Gjengivelse av lister, nøkler og betinget UI

← Tilbake til Next.js 15 for fullstack-webapper