Next.js 15-fullstackwebapps · Lektion

React-komponenter og JSX

Forstå byggestenene i React-applikationer, og hvordan JSX forenkler oprettelsen af brugergrænseflader.

Lektion 1 af 411 trin

React-komponenter og JSX er en gratis Next.js 15-fullstackwebapps-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Next.js 15-fullstackwebapps, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Next.js 15-fullstackwebapps-kurset indeholder 4 lektioner i alt.

Hvad er React-komponenter?

Velkommen til React-verdenen! Kernen i React er komponenter.

Tænk på komponenter som genanvendelige, selvstændige byggesten til din brugergrænseflade (UI).
De lader dig opdele komplekse brugergrænseflader i mindre, overskuelige dele.
Hver komponent minder om en JavaScript-funktion, der returnerer det, som skal vises på skærmen.

Mød JSX: JavaScript XML

Det kan blive kompliceret at skrive brugergrænseflader i ren JavaScript. Det er her, JSX kommer ind i billedet!

JSX er en syntaksudvidelse til JavaScript, som lader dig skrive HTML-lignende kode direkte i dine JavaScript-filer.
Det gør det intuitivt og velkendt at definere din brugergrænseflade ved at kombinere HTML-struktur med JavaScripts styrke.
Browsere forstår ikke JSX direkte, så det omdannes til almindelig JavaScript.

JSX: Bag kulisserne

Selvom JSX ligner HTML, er det ikke HTML. Når din kode kompileres (eller 'transpileres'), omdannes JSX til almindelige JavaScript-funktionskald.

For eksempel bliver <h1>Hello</h1> til noget i stil med React.createElement('h1', null, 'Hello').

Denne omdannelse håndteres automatisk af værktøjer som Babel, så du kan skrive renere og mere læsbar kode til brugergrænsefladen.

Din første funktionelle komponent

I moderne React skrives komponenter som regel som JavaScript-funktioner. De kaldes funktionelle komponenter.

De modtager 'props' (en forkortelse for properties) som input og returnerer JSX, der beskriver, hvordan brugergrænsefladen skal se ud.

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: Ét rodelement

En vigtig regel i JSX er, at hvert JSX-udtryk skal returnere et enkelt rodelement.

Det betyder, at du ikke kan have to elementer på øverste niveau direkte ved siden af hinanden. Hvis du skal returnere flere elementer, skal du pakke dem ind i ét overordnet element, f.eks. et <div>, eller bruge et Fragment (<></>) for en renere løsning, der ikke tilføjer ekstra noder til 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

Selvom JSX ligner HTML, er det stadig JavaScript. Derfor omdøbes nogle HTML-attributter, så de følger JavaScripts camelCase-konvention.

class bliver til className
for bliver til htmlFor
Eventhåndterere som onclick bliver til onClick

Det hjælper med at undgå konflikter med reserverede JavaScript-nøgleord.

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

JavaScript-udtryk i praksis

En af JSX's mest effektive funktioner er muligheden for at indlejre JavaScript-udtryk direkte i din brugergrænseflade ved hjælp af krøllede parenteser {}.

Du kan bruge variabler, udføre beregninger eller kalde funktioner inden i disse parenteser. Lad os se et enkelt kørbart eksempel med en variabel:

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

Elementer med selvafslutning

I HTML kan nogle tags afsluttes selv (f.eks. <img> eller <input>). I JSX skal alle elementer enten have et afsluttende tag eller afsluttes selv.

Hvis et element ikke har underordnede elementer, skal du lukke det med en skråstreg før den afsluttende vinkelparentes, f.eks. <img /> eller <br />.

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

Sammensætning af komponenter

Den virkelige magi ved React-komponenter er, at de kan sammensættes. Du kan bruge én komponent i en anden og bygge komplekse brugergrænseflader af enkle, fokuserede dele.

Det fremmer genanvendelighed og gør strukturen i din applikation tydelig og nem at vedligeholde. Det er som at bygge med LEGO-klodser!

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

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

Tjek af komponenter og JSX

Tid til et hurtigt tjek! Hvilken af følgende er en vigtig regel, når du skriver JSX?

Besvar den i den interaktive lektion

Opsummering: Komponenter og JSX

Godt gået! I denne lektion har du lært Reacts grundlæggende begreber:

Komponenter er genanvendelige byggesten til din brugergrænseflade og skrives typisk som funktioner.
JSX er en syntaksudvidelse til JavaScript, som lader dig skrive HTML-lignende kode til din brugergrænseflade.
Vigtige JSX-regler omfatter at returnere et enkelt rodelement, bruge camelCase til attributter (f.eks. className) og bruge selvafsluttende tomme tags.
Du kan indlejre JavaScript-udtryk i JSX ved hjælp af krøllede parenteser {}.

Det er afgørende at forstå komponenter og JSX, når du bygger React-applikationer, herunder applikationer med Next.js!

Gratis at komme i gang

Lær TypeScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 12
Lektioner: 48

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “React-komponenter og JSX” gratis?

Ja — alle 3 lektioner i læringssporet Next.js 15-fullstackwebapps, inklusive “React-komponenter og JSX”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Next.js 15-fullstackwebapps-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “React-komponenter og JSX”?

Forstå byggestenene i React-applikationer, og hvordan JSX forenkler oprettelsen af brugergrænseflader. Du øver dig i Next.js 15-fullstackwebapps med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Next.js 15-fullstackwebapps?

Der kræves ingen tidligere erfaring. Next.js 15-fullstackwebapps på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “React-komponenter og JSX”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Next.js 15-fullstackwebapps-lektion?

Ja. Alle Next.js 15-fullstackwebapps-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

React-komponenter og JSX
Statehåndtering med hooks
Props og kommunikation mellem komponenter
Rendering af lister, keys og betinget UI

← Tilbage til Next.js 15-fullstackwebapps