React Introduksjonsguide: Bygg ditt første brukergrensesnitt fra bunnen av

React er et JavaScript-bibliotek for å bygge brukergrensesnitt. Det er utviklet og vedlikeholdt av Facebook, og har blitt et av de mest populære verktøyene innen frontend-utvikling. Denne guiden vil ta deg fra bunnen av, steg for steg, for å forstå de grunnleggende konseptene i React og bygge et enkelt brukergrensesnitt.

Hvorfor velge React?

React har følgende fordeler:

• Komponentbasert: React deler opp brukergrensesnittet i uavhengige, gjenbrukbare komponenter. Dette gjør koden lettere å vedlikeholde og forstå.
• Deklarativ: React bruker en deklarativ programmeringsstil, som betyr at du bare trenger å beskrive hva du vil presentere, og React vil automatisk håndtere oppdateringer og rendering.
• Effektiv: React bruker en virtuell DOM og en smart diff-algoritme, som effektivt kan oppdatere brukergrensesnittet og redusere unødvendig rendering.
• Stort fellesskap: React har et stort fellesskap og et rikt økosystem, og du kan finne mange veiledninger, biblioteker og verktøy som kan hjelpe deg med utviklingen.
• Kryssplattform: React Native lar deg bruke React til å utvikle native mobilapplikasjoner (iOS og Android).

Forberedelser

Før du begynner, må du sørge for at du har installert følgende verktøy på datamaskinen din:

• Node.js: Node.js er et JavaScript-kjøremiljø for å kjøre React-utviklingsverktøy. Du kan laste ned og installere det fra https://nodejs.org/.
• npm eller yarn: npm (Node Package Manager) og yarn er JavaScript-pakkebehandlere for å installere og administrere Reacts avhengigheter. Vanligvis installeres npm sammen med Node.js. yarn kan installeres fra https://yarnpkg.com/.

Opprett din første React-applikasjon

Vi vil bruke create-react-app for raskt å opprette et React-prosjekt.

1. Opprett med npm:

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

2. Opprett med yarn:

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

Etter å ha utført kommandoene ovenfor, vil create-react-app automatisk opprette en katalog kalt my-first-react-app, og initialisere et React-prosjekt i den katalogen. Kommandoen npm start eller yarn start vil starte utviklingsserveren, og du kan besøke http://localhost:3000 i nettleseren din for å se React-applikasjonen din.

Katalogstruktur

Prosjektkatalogstrukturen som er opprettet av create-react-app er som følger:

my-first-react-app/
├── node_modules/         # Biblioteker som prosjektet er avhengig av
├── public/               # Statiske ressurser (f.eks. HTML-filer)
│   ├── index.html        # Applikasjonens inngangs-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            # Applikasjonens inngangs-JavaScript-fil
│   ├── logo.svg          # React-logo
│   └── ...
├── .gitignore            # Git-ignoreringsfil
├── package.json          # Prosjektets metadata og avhengigheter
├── README.md             # Prosjektets dokumentasjon
└── yarn.lock             # Fil for å låse avhengighetsversjoner (hvis du bruker yarn)

Forstå React-komponenter

En React-applikasjon er bygget opp av komponenter. Komponenter er uavhengige, gjenbrukbare kodeblokker som brukes til å rendre spesifikke deler av brukergrensesnittet.

I src/App.js-filen 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 funksjonskomponent kalt App.
• return ( ... ) Returnerer et JSX-uttrykk som beskriver hva komponenten skal rendre.
• export default App; Eksporterer App-komponenten slik at den kan brukes i andre filer.

JSX (JavaScript XML)

JSX er en JavaScript-syntaksutvidelse som lar deg skrive HTML-lignende kode i JavaScript-koden din. I eksemplet ovenfor er ... et JSX-uttrykk. JSX-kode konverteres til standard JavaScript-kode av Babel, slik at nettleseren kan forstå den.

Endre App-komponenten

La oss endre App-komponenten for å lage en enkel teller.

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 (
    
      

# Teller

      Gjeldende telling: {count}

      +
      -
    
  );
}

export default App;

Endringslogg:

• import React, { useState } from 'react'; Importer useState Hook. useState er en React Hook som brukes til å legge til tilstand i funksjonskomponenter.
• const [count, setCount] = useState(0); Bruk useState Hook for å opprette en tilstandsvariabel kalt count og initialiser den til 0. setCount er en funksjon som brukes til å oppdatere count-tilstanden.
• const increment = () => { setCount(count + 1); }; Definer en funksjon kalt increment som brukes til å øke count-tilstanden med 1.
• const decrement = () => { setCount(count - 1); }; Definer en funksjon kalt decrement som brukes til å redusere count-tilstanden med 1.
• Gjeldende telling: {count} Vis verdien av count-tilstanden på siden. {count} er et JSX-uttrykk som brukes til å sette inn JavaScript-variabler i JSX-kode.
• + og - Opprett to knapper som henholdsvis er bundet til increment og decrement-funksjonene. onClick er en hendelsesbehandler som brukes til å utføre den angitte funksjonen når knappen klikkes.

Når du har lagret src/App.js-filen, vil nettleseren automatisk oppdateres, og du vil se en enkel teller. Klikk på "+"-knappen for å øke tellingen, og klikk på "-"-knappen for å redusere tellingen.

Bruke CSS-stiler

Du kan bruke CSS til å forskjønne React-applikasjonen din. create-react-app støtter CSS-moduler og vanlige CSS-filer.

Bruke CSS-moduler:

CSS-moduler lar deg opprette uavhengige CSS-stiler for hver komponent, og unngå stilkonflikter. For å bruke CSS-moduler i en komponent, må du opprette en fil som slutter på .module.css.

Opprett for eksempel en fil kalt App.module.css og legg til følgende CSS-stiler 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 deretter CSS-modulene i src/App.js-filen:

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

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

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

  return (
     {/* Bruk styles-objektet til å referere til CSS-klasser */}
      

# Teller

      Gjeldende telling: {count}

      +
      -
    
  );
}

export default App;

Bruke vanlige CSS-filer:

Du kan også bruke vanlige CSS-filer til å definere globale stiler. I src/index.css-filen kan du definere globale stiler.

For eksempel, legg til følgende CSS-stil:

body {
  font-family: sans-serif;
}

Denne stilen vil bli brukt på hele applikasjonens body-element.

Neste steg

Gratulerer, du har fullført din første React-applikasjon! Deretter kan du lære mer om React, for eksempel:

• Kommunikasjon mellom komponenter: Lær hvordan du får forskjellige komponenter til å kommunisere med hverandre.
• Skjemahåndtering: Lær hvordan du oppretter og behandler skjemaer.
• Routing: Lær hvordan du bruker React Router til å lage applikasjoner med flere sider.
• Redux eller Context API: Lær hvordan du administrerer applikasjonens tilstand.
• Hooks: Få en dypere forståelse av React Hooks, som useEffect, useContext osv.

Husk at React er en teknologi som krever kontinuerlig øving og læring. Lykke til med læringen!