React er fortsat et af de mest populære biblioteker til at skabe brugergrænseflader, når der bygges webapplikationer. Det bruges i vid udstrækning af mange virksomheder og har et aktivt fællesskab.

Som React-udvikler er det ikke kun nødvendigt at forstå, hvordan biblioteket fungerer, for at du kan bygge projekter, der er brugervenlige, let skalerbare og vedligeholdelsesvenlige.

Det er også nødvendigt at forstå visse konventioner, som gør dig i stand til at skrive ren React-kode. Dette vil ikke kun hjælpe dig med at servicere dine brugere bedre, men det vil også gøre det lettere for dig og andre udviklere, der arbejder på projektet, at vedligeholde kodebasen.

I denne vejledning starter vi med at tale om nogle af de almindelige udfordringer, som React-udviklere står over for, og derefter dykker vi ned i nogle af de bedste praksisser, du kan følge for at hjælpe dig med at skrive React-kode på en mere effektiv måde.

Lad os komme i gang!

Se vores videoguide om bedste praksis for React

Udfordringer, som React-udviklere står over for

I dette afsnit vil vi diskutere nogle af de største udfordringer, som React-udviklere står over for under og efter opbygningen af webapps.

Alle de udfordringer, du vil se i dette afsnit, kan undgås ved at følge bedste praksis, som vi vil diskutere i detaljer senere.

Vi starter med det mest grundlæggende problem, der rammer begyndere.

Forudsætninger til React

En af de største udfordringer for React-udviklere er at forstå, hvordan biblioteket fungerer, sammen med forudsætningerne for at bruge det.

Før du lærer React, er det nødvendigt at kende et par ting. Da React bruger JSX, er det et must at kende HTML og JavaScript. Selvfølgelig skal du også kende CSS eller en moderne CSS-framework til at designe dine webapps.

Der er især centrale JavaScript-koncepter og -funktionaliteter, som du bør kende, før du kaster dig ud i React. Nogle af dem, som for det meste hører under ES6, omfatter bl.a:

  • Pilefunktioner
  • Rest-operator
  • Spredningsoperator
  • Moduler
  • Destrukturering
  • Array-metoder
  • Skabelonliteraler
  • Promises
  • let og const variabler

De JavaScript-emner, der er anført ovenfor, vil hjælpe dig som nybegynder med at forstå, hvordan React fungerer.

Du vil også lære om nye koncepter i React, som f.eks:

  • Komponenter
  • JSX
  • Tilstandsstyring
  • Rekvisitter
  • Rendering af elementer
  • Håndtering af hændelser
  • Betinget gengivelse
  • Lister og nøgler
  • Formularer og validering af formularer
  • Hooks
  • Styling

Hvis du har en solid forståelse af React-koncepterne og forudsætningerne for at bruge biblioteket, vil du kunne udnytte dets funktioner effektivt.

Men lad dig ikke overvælde af dette. Med konstant øvelse og læring kan du hurtigt få en god forståelse for, hvordan du bruger React til at bygge fantastiske projekter. Det svarer til at lære et nyt programmeringssprog – det kræver bare lidt tid og øvelse at forstå.

Tilstandsstyring

Opdatering af tilstanden/værdien af dine variabler i React fungerer anderledes end den måde, du ville gøre det på med vanilla JavaScript.

I JavaScript er det lige så enkelt at opdatere en variabel som at tildele en ny værdi til den ved hjælp af operatoren equal to (=). Her er et eksempel:

var x = 300;
function updateX(){
  x = 100;
}
updateX();
console.log(x);
// 100

I koden ovenfor har vi oprettet en variabel kaldet x med en startværdi på 300.

Ved hjælp af operatoren equal to tildelte vi den en ny værdi på 100. Dette blev skrevet inde i en updateX -funktion.

I React fungerer opdatering af status/værdi af dine variabler anderledes. Her er hvordan:

import { useState } from 'react';
function App() {
  const [x, setX] = useState(300)
  let updateX =()=>{
    setX(100);
  }
  return (
    <div className="App">
    <h1>{x}</h1>
    <button onClick={updateX}>Update X</button>
    </div>
  );
}
export default App;

Når du opdaterer en variabels tilstand i React, gør du brug af useState Hook. Der er tre ting at være opmærksom på, når du bruger denne Hook:

  • Navnet på variablen
  • En funktion til opdatering af variablen
  • Variablens oprindelige værdi/tilstand

I vores eksempel er x navnet på variablen, og setX er funktionen til opdatering af værdien af x, mens den oprindelige værdi (300) af x overføres som en parameter til useState -funktionen:

 const [x, setX] = useState(300)

For at opdatere tilstanden af x har vi gjort brug af funktionen setX:

import { useState } from 'react';
let updateX =()=>{
  setX(100);
}

Så updateX -funktionen kalder setX -funktionen, som derefter sætter værdien af x til 100.

Selv om dette ser ud til at fungere perfekt til at opdatere tilstanden af dine variabler, øger det kompleksiteten af din kode i meget store projekter. At have masser af State Hooks gør koden meget svær at vedligeholde og forstå, især når dit projekt skaleres.

Et andet problem ved at bruge State Hook er, at disse oprettede variabler ikke deles på tværs af de forskellige komponenter, som din app består af. Du er stadig nødt til at bruge Props til at sende data fra en variabel til en anden.

Heldigvis for os er der biblioteker, der er bygget til at håndtere tilstandshåndtering effektivt i React. De giver dig endda mulighed for at oprette en variabel én gang og bruge den hvor som helst i din React-app, du ønsker det. Nogle af disse biblioteker omfatter Redux, Recoil og Zustand.

Problemet med at vælge et tredjepartsbibliotek til tilstandshåndtering er, at du vil blive tvunget til at lære nye koncepter, der er fremmede for det, du allerede har lært i React. Redux var f.eks. kendt for at have en masse boilerplate-kode, hvilket gjorde det svært for begyndere at forstå (selv om dette er ved at blive rettet med Redux Toolkit, som lader dig skrive mindre kode, end du ville gøre med Redux).

Vedligeholdbarhed og skalerbarhed

Efterhånden som brugerkravene til et produkt bliver ved med at ændre sig, er der altid behov for at indføre ændringer i den kode, som produktet består af.

Det er ofte svært at skalere din kode, når denne kode ikke er let for teamet at vedligeholde. Vanskeligheder som disse opstår, fordi man følger dårlige metoder, når man skriver sin kode. De virker måske perfekt i starten og giver dig det ønskede resultat, men alt, hvad der virker “på nuværende tidspunkt”, er ineffektivt for fremtiden og væksten af dit projekt.

I næste afsnit gennemgår vi nogle konventioner, der kan hjælpe dig med at forbedre den måde, du skriver din React-kode på, og som også vil hjælpe dig med at samarbejde bedre, når du arbejder sammen med et professionelt team.

React Bedste Praksisser

I dette afsnit vil vi tale om nogle af de bedste praksisser, som du skal følge, når du skriver din React-kode. Lad os dykke ned med det samme.

1. Oprethold en klar mappestruktur

Mappestrukturer hjælper dig og andre udviklere med at forstå, hvordan de filer og aktiver, der bruges i et projekt, er arrangeret.

Med en god mappestruktur er det nemt at navigere rundt, hvilket sparer tid og hjælper med at undgå forvirring. Mappestrukturer varierer alt efter de enkelte teams præferencer, men her er nogle få af de almindeligt anvendte mappestrukturer i React.

Gruppering af mapper efter funktioner eller ruter

Gruppering af filer i din mappe efter deres ruter og funktioner hjælper med at holde alt om en bestemt funktion samlet på ét sted. Hvis du f.eks. har et brugerdashboard, kan du have JavaScript-, CSS- og testfiler, der vedrører dashboardet, i én mappe.

Her er et eksempel til at demonstrere det:

dashboard/
index.js
dashboard.css
dashboard.test.js
home/
index.js
Home.css
HomeAPI.js
Home.test.js
blog/
index.js
Blog.css
Blog.test.js

Som det kan ses ovenfor, har hver enkelt kernefunktion i appen alle dens filer og aktiver gemt i den samme mappe.

Gruppering af lignende filer

Alternativt kan du gruppere lignende filer i den samme mappe. Du kan også have individuelle mapper til Hooks, komponenter osv. Se dette eksempel:

hooks/
useFetchData.js
usePostData.js
components/
Dashboard.js
Dashboard.css
Home.js
Home.css
Blog.js
Blog.css

Du behøver ikke at følge disse mappestrukturer nøje, når du koder. Hvis du har en bestemt måde at ordne dine filer på, skal du gøre det. Så længe du og andre udviklere har en klar forståelse af filstrukturen, er du klar til at køre!

2. Indfør en struktureret importordning

Efterhånden som din React-applikation fortsætter med at vokse, vil du helt sikkert foretage ekstra import. Strukturen af dine importer er med til at hjælpe dig med at forstå, hvad dine komponenter består af.

Som en konvention synes det at fungere fint at gruppere lignende hjælpeprogrammer sammen. Du kan f.eks. gruppere eksterne eller tredjepartsimporter separat fra lokale importer.

Tag et kig på følgende eksempel:

import { Routes, Route } from "react-router-dom";
import { createSlice } from "@reduxjs/toolkit";
import { Menu } from "@headlessui/react";
import Home from "./Home";
import logo from "./logo.svg";
import "./App.css";

I koden ovenfor grupperede vi først tredjepartsbiblioteker sammen (det er biblioteker, som vi skulle installere på forhånd).

Derefter importerede vi filer, som vi har oprettet lokalt, f.eks. stylesheets, billeder og komponenter.

Af hensyn til enkelhed og letforståelighed skildrer vores eksempel ikke en meget stor kodebase, men husk på, at hvis du er konsekvent med dette format for import, vil det hjælpe dig og andre udviklere til at forstå din React-app bedre.

Du kan gå videre med at gruppere dine lokale filer efter filtyper, hvis det fungerer for dig – dvs. gruppere komponenter, billeder, stylesheets, Hooks osv. separat under din lokale import.

Her er et eksempel:

import Home from "./Home";
import About from "./About"
import Contact from "./Contact"
import logo from "./logo.svg";
import closeBtn from "./close-btn.svg"
import "./App.css";
import "Home.css"

3. Overhold navnekonventioner

Navnekonventioner er med til at forbedre læsbarheden af koden. Dette gælder ikke kun for komponentnavne, men også for dine variabelnavne, helt til dine hooks.

React-dokumentationen tilbyder ikke noget officielt mønster for navngivning af dine komponenter. De mest anvendte navngivningskonventioner er camelCase og PascalCase.

PascalCase bruges mest til komponentnavne:

import React from 'react'
function StudentList() {
  return (
    <div>StudentList</div>
  )
}
export default StudentList

Komponenten ovenfor hedder StudentList, hvilket er meget mere læsbart end Studentlist eller studentlist.

På den anden side bruges camelCase-navnekonventionerne for det meste til navngivning af variabler, hooks, funktioner, arrays osv:

&const [firstName, setFirstName] = useState("Ihechikara");
const studentList = [];
const studentObject = {};
const getStudent = () => {}

4. Brug en Linter

Et linter-værktøj hjælper med at forbedre kodekvaliteten. Et af de mest populære linter-værktøjer til JavaScript og React er ESlint. Men hvordan hjælper det præcist med at forbedre kodekvaliteten?

Et linter-værktøj hjælper med konsistens i en kodebase. Når du bruger et værktøj som ESlint, kan du fastsætte de regler, som du ønsker, at alle udviklere, der arbejder på projektet, skal følge. Disse regler kan omfatte krav om brug af dobbelte anførselstegn i stedet for enkelte anførselstegn, parenteser omkring pilefunktioner, en bestemt navngivningskonvention og meget mere.

Værktøjet observerer din kode og giver dig derefter besked, når en regel er blevet overtrådt. Det nøgleord eller den linje, der bryder reglen, vil normalt blive understreget med rødt.

Da alle udviklere har deres egen kodningsstil, kan linterværktøjer hjælpe med at skabe ensartethed i koden.

Linterværktøjer kan også hjælpe os med at rette fejl nemt. Vi kan se stavefejl, variabler, der er blevet erklæret, men ikke brugt, og andre lignende funktionaliteter. Nogle af disse fejl kan rettes automatisk, mens du koder.

Værktøjer som ESLint er indbygget i de fleste kodeeditorer, så du får linterfunktionaliteter med på farten. Du kan også konfigurere det, så det passer til dine kodningsbehov.

5. Brug Snippet-biblioteker

Det fede ved at bruge et framework med et aktivt fællesskab er tilgængeligheden af værktøjer, der bliver skabt for at gøre udviklingen lettere.

Snippet-biblioteker kan gøre udviklingen hurtigere ved at levere præfabrikeret kode, som udviklere ofte bruger.

Et godt eksempel er ES7+ React/Redux/React-Native snippets extension, som har en masse nyttige kommandoer til at generere forudbygget kode. Hvis du f.eks. ønsker at oprette en funktionel React-komponent uden at skulle skrive al koden, skal du blot skrive rfce og trykke på Enter med udvidelsen.

Kommandoen ovenfor vil gå videre til at generere en funktionel komponent med et navn, der svarer til filnavnet. Vi genererede koden nedenfor ved hjælp af ES7+ React/Redux/React-Native-udvidelsen snippets (uddrag af ES7+ React/Redux/React-Native-snippets):

import React from 'react'
function StudentList() {
  return (
    <div>StudentList</div>
  )
}
export default StudentList

Et andet nyttigt snippet-værktøj er Tailwind CSS IntelliSense-udvidelsen, som forenkler processen med at style websider med Tailwind CSS. Udvidelsen kan hjælpe dig med autokomplettering ved at foreslå nytteklasser, syntaksmarkering og linting-funktioner. Du kan endda se, hvordan dine farver ser ud, mens du koder.

6. Kombiner CSS og JavaScript

Når du arbejder på store projekter, kan brugen af forskellige stylesheet-filer til hver komponent gøre din filstruktur omfangsrig og svær at navigere rundt i.

En løsning på dette problem er at kombinere din CSS- og JSX-kode. Du kan bruge frameworks/biblioteker som Tailwind CSS og Emotion til dette formål.

Her er, hvordan styling med Tailwind CSS ser ud:

<p className="font-bold mr-8">resource edge</p>

Ovenstående kode giver paragrafelementet en fed skrifttype og tilføjer lidt margin til højre. Vi er i stand til at gøre dette ved hjælp af rammens utility-klasser.

Her er hvordan du kan style et element ved hjælp af Emotion:

<h1
css={css`
  color: black;
  font-size: 30px;
`}
>
Hello World!
</h1>

7. Begrænse komponentoprettelse

En af de centrale funktioner i React er genanvendelighed af kode. Du kan oprette en komponent og genbruge dens logik så mange gange som muligt uden at omskrive logikken.

Med det i tankerne bør du altid begrænse antallet af komponenter, du opretter. Hvis du ikke gør det, bliver filstrukturen opblæst med unødvendige filer, der ikke burde eksistere i første omgang.

Vi vil bruge et meget nemt eksempel til at demonstrere dette:

function UserInfo() {
  return (
    <div>
    <h1>My name is Ihechikara.</h1>
    </div>
  );
}
export default UserInfo

Komponenten ovenfor viser navnet på en bruger. Hvis vi skulle oprette en anden fil for hver bruger, ville vi i sidste ende få et urimeligt antal filer. (Vi bruger naturligvis brugeroplysninger for at holde tingene enkle. I en reel situation har du måske at gøre med en anden type logik)

For at gøre vores komponent genanvendelig kan vi gøre brug af Props. Her er hvordan:

function UserInfo({userName}) {
  return (
    <div>
    <h1>My name is {userName}.</h1>
    </div>
  );
}
export default UserInfo

Vi kan derefter importere denne komponent og bruge den så mange gange vi vil:

import UserInfo from "./UserInfo";
function App() {
  return (
    <div className="App">
    <UserInfo userName={"Ihechikara"} />
    <UserInfo userName={"John"} />
    <UserInfo userName={"Jane"} />
    </div>
  );
}
export default App;

Nu har vi tre forskellige forekomster af UserInfo -komponenten, der kommer fra logikken, som er oprettet i én fil i stedet for at have tre separate filer for hver bruger.

8. Gennemførelse af lazy loading

Lazy loading er meget nyttigt, når din React-app vokser. Når du har en stor kodebase, bliver indlæsningstiden for dine websider langsommere. Det skyldes, at hele appen skal indlæses hver gang for hver bruger.

“Lazy loading” er et begreb, der bruges om forskellige implementeringer. Her forbinder vi det med JavaScript og React, men du kan også implementere lazy loading på billeder og videoer.

Som standard bundler og implementerer React hele applikationen. Men vi kan ændre denne adfærd ved hjælp af lazy loading, også kendt som kodeopdeling.

Dybest set kan du begrænse, hvilken del af din app der bliver indlæst på et bestemt tidspunkt. Dette opnås ved at opdele dine bundles og kun indlæse dem, der er relevante for brugerens krav. Du kan f.eks. først indlæse kun den logik, der kræves for at brugeren kan logge ind, og derefter først indlæse logikken til brugerens dashboard, når brugeren har logget ind.

9. Brug genanvendelige hooks

Hooks i React giver dig mulighed for at udnytte nogle af React’s ekstra funktionaliteter, f.eks. interaktion med din komponents tilstand og kørsel af eftervirkninger i forbindelse med visse tilstandsændringer i din komponent. Vi kan gøre alt dette uden at skrive klassekomponenter.

Vi kan også gøre Hooks genanvendelige, så vi ikke behøver at skrive logikken om i hver fil, de bruges. Det gør vi ved at oprette brugerdefinerede Hooks, som kan importeres overalt i appen.

I eksemplet nedenfor opretter vi en Hook til at hente data fra eksterne API’er:

import { useState, useEffect } from "react";
function useFetchData(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url)
    .then((res) => res.json())
    .then((data) => setData(data))
    .catch((err) => console.log(`Error: ${err}`));
  }, [url]);
  return { data };
}
export default useFetchData;

Vi har oprettet en Hook til hentning af data fra API’er ovenfor. Nu kan den importeres i en hvilken som helst komponent. Dette sparer os for stress med at skrive al den logik i hver komponent, hvor vi skal hente eksterne data.

Typen af brugerdefinerede Hooks, som vi kan oprette i React, er ubegrænset, så det er op til dig at beslutte, hvordan du vil bruge dem. Husk blot, at hvis det er en funktionalitet, der skal gentages på tværs af forskellige komponenter, bør du helt sikkert gøre den genanvendelig.

10. Log og håndter fejl

Der er forskellige måder at håndtere fejl i React på, f.eks. ved hjælp af fejlgrænser, try and catch-blokke eller ved hjælp af eksterne biblioteker som react-error-boundary.

De indbyggede fejlgrænser, der blev introduceret i React 16, var en funktionalitet for klassekomponenter, så vi vil ikke diskutere den, fordi det anbefales, at du bruger funktionelle komponenter i stedet for klassekomponenter.

På den anden side fungerer brugen af en try og catch blok kun for imperativ kode, men ikke deklarativ kode. Det betyder, at det ikke er en god mulighed, når man arbejder med JSX.

Vores bedste anbefaling ville være at bruge et bibliotek som react-error-boundary. Dette bibliotek leverer funktionaliteter, der kan vikles omkring dine komponenter, hvilket vil hjælpe dig med at opdage fejl, mens din React-app bliver renderet.

11. Overvåg og test din kode

Test af din kode under udviklingen hjælper dig med at skrive vedligeholdbar kode. Desværre er dette noget, som mange udviklere forsømmer.

Selv om mange måske vil hævde, at testning ikke er noget stort problem, når du bygger din webapp, har det utallige fordele. Her er blot nogle få af dem:

  • Testning hjælper dig med at opdage fejl og mangler.
  • Opsporing af fejl fører til forbedret kodekvalitet.
  • Enhedstests kan dokumenteres med henblik på dataindsamling og fremtidig reference.
  • Tidlig fejlopsporing sparer dig for udgifter til at betale udviklere for at slukke den brand, som fejlen kunne forårsage, hvis den ikke blev kontrolleret.
  • Fejlfrie apps og websteder opnår tillid og loyalitet fra deres publikum, hvilket fører til større vækst.

Du kan bruge værktøjer som Jest eller React Testing Library til at teste din kode. Der er masser af testværktøjer, du kan vælge imellem – det handler om at finde det, der fungerer bedst for dig.

Du kan også teste dine React-apps, mens du bygger dem, ved at køre dem i din browser. Du vil normalt få alle fundne fejl vist på skærmen. Dette svarer til at udvikle WordPress-websteder ved hjælp af DevKinsta – et værktøj, der giver dig mulighed for at designe, udvikle og implementere WordPress-websteder på din lokale maskine.

12. Gør brug af funktionelle komponenter

Brug af funktionelle komponenter i React kommer med en masse fordele: Du skriver mindre kode, den er lettere at læse, og betaversionen af den officielle React-dokumentation er ved at blive omskrevet ved hjælp af funktionelle komponenter (Hooks), så du bør helt sikkert vænne dig til at bruge dem.

Med funktionelle komponenter behøver du ikke at bekymre dig om at bruge this eller bruge klasser. Du kan også nemt administrere din komponents tilstand ved at skrive mindre kode takket være Hooks.

De fleste af de opdaterede ressourcer, du finder om React, gør brug af funktionelle komponenter, hvilket gør det nemt at forstå og følge nyttige vejledninger og ressourcer, der er oprettet af fællesskabet, når du løber ind i problemer.

13. Hold dig opdateret med React-versionændringer

Efterhånden som tiden går, vil der blive indført nye funktionaliteter, og nogle af de gamle vil blive ændret. Den bedste måde at holde styr på dette på er at holde øje med den officielle dokumentation.

Du kan også deltage i React-fællesskaber på sociale medier for at få oplysninger om ændringer, når de sker.

Hvis du holder dig ajour med den aktuelle version af React, kan du nemmere afgøre, hvornår du skal optimere eller foretage ændringer i din kodebase for at opnå den bedste ydeevne.

Der er også eksterne biblioteker, der er bygget op omkring React, som du også bør være opdateret med – som React Router, der bruges til routing i React. Hvis du ved, hvilke ændringer disse biblioteker foretager, kan det hjælpe dig med at foretage relevante vigtige ændringer i din app og gøre tingene lettere for alle, der arbejder på projektet.

Derudover kan nogle funktionaliteter blive forældede, og visse nøgleord kan blive ændret, når nye versioner udgives. For at være på den sikre side bør du altid læse dokumentationen og vejledningerne, når der foretages sådanne ændringer.

14. Brug en hurtig og sikker hostingudbyder

Hvis du ønsker at gøre din webapp tilgængelig for alle efter at have bygget den, skal du hoste den. Det er vigtigt, at du bruger en hurtig og sikker hostingudbyder.

Ved at hoste dit website får du adgang til forskellige værktøjer, der gør det nemt at skalere og administrere dit website. Serveren, hvor dit website er hostet, gør det muligt at gemme filerne på din lokale maskine sikkert på serveren. Den overordnede fordel ved at hoste dit website er, at andre mennesker får mulighed for at se de fede ting, du har lavet.

Der findes en række platforme, der tilbyder gratis hosting-tjenester til udviklere som Firebase, Vercel, Netlify, GitHub Pages eller betalte tjenester som Azure, AWS, GoDaddy, Bluehost osv.

Du kan også bruge Kinsta’s Applikation Hosting-platform. Det eneste du skal gøre er at tilslutte et GitHub-repositorium, vælge mellem Kinstas 25 globalt placerede datacentre og så er det bare at gå i gang. Du får adgang til hurtig opsætning, 24/7 support, top-of-the-line sikkerhed, tilpassede domæner, avancerede rapporterings- og overvågningsværktøjer og meget mere.

Oversigt

At lære at bruge React er ikke alt, hvad der kræves for at skabe fremragende webapps. Som med ethvert andet framework som Angular, Vue osv. er der bedste praksis, som du bør følge for at hjælpe dig med at bygge effektive produkter.

Hvis du følger disse React-konventioner, hjælper det ikke kun din app, men det har også fordele for dig som frontend-udvikler – du lærer at skrive effektiv, skalerbar og vedligeholdelsesvenlig kode, og du skiller dig ud som professionel inden for dit felt.

Så når du bygger din næste webapp med React, skal du huske på disse bedste praksis, så det bliver nemt for både dine brugere og dine udviklere at bruge og administrere produktet.

Hvilke andre bedste praksis for React kender du, som ikke blev nævnt i denne artikel? Del dem i kommentarerne nedenfor. God kodning!

Ihechikara Abba

Ihechikara er softwareudvikler og teknisk skribent. Han nyder at skrive artikler om webteknologier, programmering og it-relaterede emner. Forbind med Ihechikara på X.