React Introduktionsguide: Byg dit første brugerinterface fra bunden

React er et JavaScript-bibliotek til at bygge brugerinterfaces. Det er udviklet og vedligeholdt af Facebook og er blevet et af de mest populære værktøjer inden for frontend-udvikling. Denne guide vil tage dig fra bunden, trin for trin, gennem de grundlæggende React-koncepter og bygge et simpelt brugerinterface.

Hvorfor vælge React?

React har følgende fordele:

• Komponentbaseret: React opdeler brugerinterfacet i uafhængige, genanvendelige komponenter. Dette gør koden lettere at vedligeholde og forstå.
• Deklarativ: React bruger en deklarativ programmeringsstil, hvilket betyder, at du kun behøver at beskrive, hvad du vil præsentere, og React håndterer automatisk opdateringer og rendering.
• Effektiv: React bruger et virtuelt DOM og en intelligent diff-algoritme, der effektivt kan opdatere brugerinterfacet og reducere unødvendig rendering.
• Stort community-support: React har et stort community og et rigt økosystem, hvor du kan finde masser af tutorials, biblioteker og værktøjer til at hjælpe dig med at udvikle.
• Platformsuafhængig: React Native giver dig mulighed for at bruge React til at udvikle native mobilapplikationer (iOS og Android).

Forberedelse

Inden du starter, skal du sørge for, at du har installeret følgende værktøjer på din computer:

• Node.js: Node.js er et JavaScript-runtime-miljø, der bruges til at køre React-udviklingsværktøjer. Du kan downloade og installere det fra https://nodejs.org/.
• npm eller yarn: npm (Node Package Manager) og yarn er JavaScript-pakkehåndteringsværktøjer, der bruges til at installere og administrere Reacts afhængigheder. Normalt installeres npm sammen med Node.js. yarn kan installeres fra https://yarnpkg.com/.

Opret din første React-applikation

Vi vil bruge create-react-app til hurtigt at oprette et React-projekt.

1. Opret med npm:

   npx create-react-app my-first-react-app
   cd my-first-react-app
   npm start
   

2. Opret med yarn:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

Når du har udført ovenstående kommandoer, vil create-react-app automatisk oprette en mappe med navnet my-first-react-app og initialisere et React-projekt i den pågældende mappe. Kommandoen npm start eller yarn start starter udviklingsserveren, og du kan besøge http://localhost:3000 i din browser for at se din React-applikation.

Mappestruktur

Mappestrukturen for det projekt, der er oprettet af create-react-app, er som følger:

my-first-react-app/
├── node_modules/         # Biblioteker, som projektet er afhængigt af
├── public/               # Statiske ressourcer (f.eks. HTML-filer)
│   ├── index.html        # Applikationens indgangs-HTML-fil
│   └── ...
├── src/                  # React-kildekode
│   ├── App.css           # CSS-stil for App-komponenten
│   ├── App.js            # App-komponenten
│   ├── App.test.js       # Testfil for App-komponenten
│   ├── index.css         # Global CSS-stil
│   ├── index.js          # Applikationens indgangs-JavaScript-fil
│   ├── logo.svg          # React-logo
│   └── ...
├── .gitignore            # Git-ignoreringsfil
├── package.json          # Projektets metadata og afhængigheder
├── README.md             # Projektets dokumentation
└── yarn.lock             # Fil til fastlåsning af afhængighedsversioner (hvis yarn bruges)

Forstå React-komponenter

React-applikationer er opbygget af komponenter. Komponenter er uafhængige, genanvendelige kodeblokke, der bruges til at gengive specifikke dele af brugergrænsefladen.

I filen src/App.js kan du se en standard App-komponent:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

Kodeforklaring:

• import React from 'react'; Importerer React-biblioteket.
• function App() { ... } Definerer en funktionskomponent ved navn App.
• return ( ... ) Returnerer et JSX-udtryk, der beskriver, hvad komponenten skal gengive.
• export default App; Eksporterer App-komponenten, så den kan bruges i andre filer.

JSX (JavaScript XML)

JSX er en JavaScript-syntaksudvidelse, der giver dig mulighed for at skrive HTML-lignende kode i din JavaScript-kode. I eksemplet ovenfor er ... et JSX-udtryk. JSX-kode konverteres af Babel til standard JavaScript-kode, så browsere kan forstå den.

Rediger App-komponenten

Lad os redigere App-komponenten for at oprette en simpel tæller.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# Tæller

      Nuværende tælling: {count}

      +
      -
    
  );
}

export default App;

Ændringsforklaring:

• import React, { useState } from 'react'; Importerer useState Hook. useState er en React Hook, der bruges til at tilføje state til funktionskomponenter.
• const [count, setCount] = useState(0); Bruger useState Hook til at oprette en state-variabel kaldet count og initialiserer den til 0. setCount er en funktion til at opdatere count state.
• const increment = () => { setCount(count + 1); }; Definerer en funktion kaldet increment, der bruges til at øge count state med 1.
• const decrement = () => { setCount(count - 1); }; Definerer en funktion kaldet decrement, der bruges til at mindske count state med 1.
• Nuværende tælling: {count} Viser værdien af count state på siden. {count} er et JSX-udtryk, der bruges til at indsætte JavaScript-variabler i JSX-kode.
• + og - Opretter to knapper, der henholdsvis er bundet til increment og decrement funktionerne. onClick er en event handler, der bruges til at udføre den angivne funktion, når der klikkes på knappen.

Når du har gemt filen src/App.js, opdateres browseren automatisk, og du vil se en simpel tæller. Klik på knappen "+" for at øge tællingen, og klik på knappen "-" for at mindske tællingen.

Brug af CSS-styles

Du kan bruge CSS til at forskønne din React-applikation. create-react-app understøtter CSS Modules og almindelige CSS-filer.

Brug af CSS Modules:

CSS Modules giver dig mulighed for at oprette uafhængige CSS-styles for hver komponent, hvilket undgår stilkonflikter. For at bruge CSS Modules i en komponent skal du oprette en fil, der slutter med .module.css.

Opret f.eks. en fil med navnet App.module.css, og tilføj følgende CSS-styles i den:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

Importer derefter CSS Modules i filen src/App.js:

import React, { useState } from 'react';
import styles from './App.module.css'; // Importer CSS Modules

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* Brug styles-objektet til at referere til CSS-klasser */}
      

# Tæller

      Nuværende tælling: {count}

      +
      -
    
  );
}

export default App;

Brug af almindelige CSS-filer:

Du kan også bruge almindelige CSS-filer til at definere globale styles. I src/index.css-filen kan du definere globale styles.

For eksempel, tilføj følgende CSS-style:

body {
  font-family: sans-serif;
}

Denne style vil blive anvendt på hele applikationens body-element.

Næste skridt

Tillykke, du har fuldført din første React-applikation! Herefter kan du lære mere om React, for eksempel:

• Komponentkommunikation: Lær hvordan forskellige komponenter kan kommunikere med hinanden.
• Formularhåndtering: Lær hvordan du opretter og håndterer formularer.
• Routing: Lær hvordan du bruger React Router til at oprette applikationer med flere sider.
• Redux eller Context API: Lær hvordan du administrerer applikationens tilstand.
• Hooks: Få en dybere forståelse af React Hooks, for eksempel useEffect, useContext osv.

Husk, at React er en teknologi, der kræver konstant øvelse og læring. God fornøjelse med læringen!