React har förblivit ett av de mest populära biblioteken för att skapa användargränssnitt när man bygger webbapplikationer. Det används i stor utsträckning av många företag och har ett aktivt community.

Om man är en React-utvecklare så krävs det inte bara en förståelse för hur biblioteket fungerar för att man ska kunna bygga projekt som är användarvänliga, lätt skalbara och enkla att underhålla.

Det är även nödvändigt att förstå vissa konventioner som gör att du kan skriva ren React-kod. Detta kommer inte bara att hjälpa dig att betjäna dina användare bättre, utan även göra det lättare för dig och andra utvecklare som arbetar med projektet att underhålla kodbasen.

I den här handledningen så börjar vi med att prata om några av de vanligaste utmaningarna som React-utvecklare möter, för att sedan djupdyka i några av de bästa metoderna som du kan följa för att skriva React-kod på ett mer effektivt sätt.

Nu sätter vi igång!

Kolla in vår videoguide om bästa praxis för React

Utmaningar som React-utvecklare står inför

I det här avsnittet så kommer vi att diskutera några av de största utmaningarna som React-utvecklare möter under och efter byggandet av webbappar.

Alla utmaningar som du läser om i det här avsnittet kan undvikas genom att följa bästa praxis, som vi kommer att diskutera i detalj senare.

Vi börjar med det mest grundläggande problemet som drabbar nybörjare.

Förutsättningar för React

En av de största utmaningarna för React-utvecklare är att förstå hur biblioteket fungerar, tillsammans med förutsättningarna för att använda det.

Innan du lär dig React så krävs det att du kan ett par saker. Eftersom React använder JSX så är det ett måste att kunna HTML och JavaScript. Du bör naturligtvis även kunna CSS eller ett modernt CSS-ramverk för att utforma dina webbapplikationer.

Det finns framför allt centrala JavaScript-koncept och funktioner som du bör känna till innan du ger dig in i React. Några av dem, som för det mesta faller under ES6, är bland annat:

  • Pilfunktioner
  • Rest-operatör
  • Spridningsoperatör
  • Moduler
  • Omstrukturering
  • Array-metoder
  • Mallformiga bokstäver
  • Löften
  • let och const -variabler

De JavaScript-ämnen som anges ovan hjälper dig som nybörjare att förstå hur React fungerar.

Du lär dig även om nya begrepp i React, t.ex:

  • Komponenter
  • JSX
  • Tillståndshantering
  • Props
  • Renderingselement
  • Hantering av händelser
  • Villkorlig rendering
  • Listor och nycklar
  • Formulär och validering av formulär
  • Krokar
  • Styling

Om du har en gedigen förståelse för React-koncept och förutsättningarna för att använda biblioteket så kan du använda dess funktioner effektivt.

Men låt dig inte överväldigas av detta. Med en konstant övning och ett idogt lärande så kan du snabbt få ett bra grepp om hur du använder React för att bygga fantastiska projekt. Det är ungefär som att lära sig ett nytt programmeringsspråk – det tar bara lite tid och övning om man vill förstå det.

Tillståndshantering

Uppdatering av tillståndet/värdet för dina variabler i React fungerar annorlunda än i vanilla JavaScript.

I JavaScript så är det lika enkelt att uppdatera en variabel som att tilldela den ett nytt värde med hjälp av operatören equal to (=). Här är ett exempel:

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

I koden ovan så har vi skapat en variabel som heter x med ett startvärde på 300.

Med hjälp av operatören equal to så tilldelade vi den ett nytt värde 100. Detta skrevs inuti funktionen updateX.

I React så fungerar uppdatering av status/värde för dina variabler annorlunda. Så här går det till:

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 uppdaterar statusen för en variabel i React så använder du useState-krok. Det finns tre saker att notera när du använder den här kroken:

  • Variabelns namn
  • En funktion för att uppdatera variabeln
  • Variabelns ursprungliga värde/tillstånd

I vårt exempel är x namnet på variabeln och setX är funktionen för att uppdatera värdet på x, medan det ursprungliga värdet (300) på x skickas in som en parameter till useState-funktionen:

 const [x, setX] = useState(300)

För att uppdatera tillståndet för x så använde vi funktionen setX:

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

Funktionen updateX anropar alltså funktionen setX, som sedan sätter värdet för x till 100.

Även om detta verkar fungera perfekt för att uppdatera tillståndet för dina variabler, så ökar det komplexiteten i din kod när det gäller mycket stora projekt. Att ha massor av Tillståndskrokar gör koden mycket svår att underhålla och förstå, särskilt när projektet skalas.

Ett annat problem med att använda Tillståndskrokar är att dessa variabler som skapas inte delas mellan de olika komponenterna som ingår i din app. Du måste fortfarande använda Props för att överföra data från en variabel till en annan.

Som tur är så har React bibliotek som är byggda för att hantera tillståndshantering effektivt. De låter dig till och med skapa en variabel en gång och använda den var du vill i din React-app. Några av dessa bibliotek är Redux, Recoil och Zustand.

Problemet med att välja ett bibliotek från en tredje part för tillståndshantering är att du tvingas lära dig nya koncept som skiljer sig från det som du redan har lärt dig i React. Redux, exempelvis, var känt för att ha mycket boilerplate-kod, vilket gjorde den svår för nybörjare att förstå (även om detta håller på att åtgärdas med Redux Toolkit, som låter dig skriva mindre kod än vad du skulle göra med Redux).

Underhållbarhet och skalbarhet

Eftersom användarnas krav på en produkt fortsätter att förändras så finns det alltid ett behov av att införa ändringar i den kod som utgör produkten.

Det är ofta svårt att skala upp koden när den inte är lätt att underhålla för teamet. Svårigheter som dessa uppstår när man följer dåliga metoder vid sitt kodskrivande. De kan tyckas fungera perfekt till en början och ge dig det önskade resultatet, men allt som fungerar ”för tillfället” är ineffektivt för framtiden och tillväxten för ditt projekt.

I nästa avsnitt så går vi igenom några konventioner som kan hjälpa dig att förbättra hur du skriver din React-kod. Detta kommer även att hjälpa dig att samarbeta bättre när du arbetar med ett professionellt team.

Bästa praxis för React

I det här avsnittet så kommer vi att prata om några av de bästa metoderna att följa när du skriver din React-kod. Låt oss köra igång direkt.

1. Behåll en tydlig mappstruktur

Mappstrukturer hjälper dig och andra utvecklare att förstå hur de filer och tillgångar som används i ett projekt är ordnade.

Med en bra mappstruktur så är det lätt att navigera runt, vilket sparar tid och bidrar till att undvika förvirring. Mappstrukturer skiljer sig åt beroende på varje teams preferenser, men här är några av de vanligaste mappstrukturerna i React.

Gruppering av mappar efter funktioner eller rutiner

Genom att gruppera filer i mappen enligt deras rutter och funktioner så kan du hålla allt om en viss funktion samlat på ett ställe. Om du exempelvis har en instrumentpanel för användare så kan du ha JavaScript-, CSS- och testfiler som rör instrumentpanelen i en och samma mapp.

Här är ett exempel för att visa detta:

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 framgår ovan så har varje kärnfunktion i appen alla sina filer och tillgångar lagrade i samma mapp.

Gruppering av liknande filer

Alternativt så kan du gruppera liknande filer i samma mapp. Du kan även ha individuella mappar för Krokar, komponenter och så vidare. Kolla in det här exemplet:

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

Du behöver inte följa dessa mappstrukturer strikt när du kodar. Om du har ett särskilt sätt att ordna dina filer, gör det. Så länge som du och andra utvecklare har en tydlig förståelse för filstrukturen är det ingen fara!

2. Inrätta en strukturerad importordning

När din React-applikation fortsätter att växa så kommer du garanterat att göra extra importer. Strukturen för dina importer är till stor hjälp för att förstå vad som utgör dina komponenter.

Som konvention så verkar det fungera bra att gruppera liknande verktyg tillsammans. Du kan exempelvis gruppera externa importer eller importer från tredje part separat från lokala importer.

Ta en titt på följande exempel:

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 ovan så grupperade vi först bibliotek från tredje part tillsammans (det är bibliotek som vi måste installera i förväg).

Därefter så importerade vi filer som vi har skapat lokalt, t.ex. formatmallar, bilder och komponenter.

För enkelhetens skull och för att underlätta förståelsen så visar vårt exempel inte en särskilt stor kodbas. Tänk dock på att om du är konsekvent med det här formatet för import så kommer detta att hjälpa dig och andra utvecklare att förstå din React-app bättre.

Du kan gå längre och gruppera dina lokala filer efter filtyper om det fungerar för dig – det vill säga gruppera komponenter, bilder, formatmallar, krokar och så vidare separat under dina lokala importer.

Här är ett exempel:

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. Följ namnkonventioner

Namnkonventioner bidrar till att förbättra kodens läsbarhet. Detta gäller inte bara för komponentnamn utan även för variabelnamn, ända till dina Krokar.

React-dokumentationen erbjuder inget officiellt mönster för att namnge dina komponenter. De mest använda namnkonventionerna är camelCase och PascalCase.

PascalCase används främst för komponentnamn:

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

Komponenten ovan heter StudentList, vilket är mycket mer lättläst än Studentlist eller studentlist.

Å andra sidan så används camelCase-namnkonventionerna mest för att namnge variabler, Krokar, funktioner, matriser och så vidare:

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

4. Använd ett linterverktyg

Ett linterverktyg hjälper till att förbättra kodkvaliteten. Ett av de mest populära linterverktygen för JavaScript och React är ESlint. Men hur exakt hjälper detta till att förbättra kodkvaliteten?

Ett linterverktyg hjälper till med konsistens i en kodbas. När du använder ett verktyg som ESlint så kan du fastställa de regler som du vill att alla utvecklare som arbetar med projektet ska följa. Dessa regler kan omfatta krav på att använda dubbla citationstecken i stället för enkla citationstecken, parenteser runt pilfunktioner, en viss namnkonvention och så mycket mer.

Verktyget observerar din kod och meddelar dig sedan när en regel har brutits. Nyckelordet eller raden som bryter mot regeln brukar vanligtvis understrykas med rött.

Eftersom varje utvecklare har sin egen kodningsstil så kan linterverktygen hjälpa till med att göra koden enhetlig.

Linterverktygen kan även hjälpa oss att åtgärda fel enkelt. Vi kan se stavfel, variabler som har deklarerats men inte använts och andra liknande funktioner. En del av dessa fel kan åtgärdas automatiskt när du kodar.

Verktyg som ESLint är inbyggda i de flesta kodredigerare så att du får linterfunktionalitet av bara farten. Du kan även konfigurera det så att det passar dina kodningskrav.

5. Använda Snippet Bibliotek

Det häftiga med att använda ett ramverk med ett aktivt community är tillgången till verktyg som skapas för att göra utvecklingen enklare.

Snippet-bibliotek kan göra utvecklingen snabbare genom att tillhandahålla förbyggd kod som utvecklare ofta använder.

Ett bra exempel är ES7+ React/Redux/React-Native snippets-utökningen, som har många användbara kommandon för att generera förbyggd kod. Om du exempelvis vill skapa en funktionell React-komponent utan att skriva ut all kod så behöver du bara skriva rfce och trycka på Enter.

Kommandot ovan kommer att fortsätta att generera en funktionell komponent med ett namn som motsvarar filnamnet. Vi genererade koden nedan med hjälp av tillägget ES7+ React/Redux/React-Native-snippets:

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

Ett annat användbart snippetverktyg är Tailwind CSS IntelliSense-tillägget, som förenklar processen att styla webbsidor med Tailwind CSS. Tillägget kan hjälpa dig med autokomplettering genom att föreslå verktygsklasser, syntaxmarkering och linting-funktioner. Du kan till och med se hur dina färger ser ut när du kodar.

6. Kombinera CSS och JavaScript

När du arbetar med stora projekt så kan användningen av olika formatmall-filer för varje komponent göra din filstruktur skrymmande och svår att navigera runt i.

En lösning på det här problemet är att kombinera din CSS- och JSX-kod. Du kan använda ramverk/bibliotek som Tailwind CSS och Emotion för detta.

Så här ser styling med Tailwind CSS ut:

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

Koden ovan ger stycket ett fett typsnitt och lägger till lite marginal till höger. Vi kan göra detta med hjälp av ramverkets verktygsklasser.

Så här kan du styla ett element med hjälp av Emotion:

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

7. Begränsning av skapandet av komponenter

En av de viktigaste funktionerna i React är att koden kan återanvändas. Du kan skapa en komponent och återanvända dess logik så många gånger som möjligt utan att skriva om logiken.

Med detta i åtanke så bör du alltid begränsa antalet komponenter som du skapar. Om du inte gör detta så blockerar du filstrukturen med onödiga filer som inte borde finnas till att börja med.

Vi kommer att använda ett mycket enkelt exempel för att visa detta:

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

Komponenten ovan visar namnet på en användare. Om vi skulle skapa olika filer för varje användare så skulle vi så småningom få ett orimligt antal filer. (Vi nyttjar naturligtvis användarinformation för att hålla saker och ting enkla. I en verklig situation så kan du ha att göra med en annan typ av logik.)

För att göra vår komponent återanvändbar så kan vi använda oss av Props. Så här går det till:

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

Vi kan sedan importera den här komponenten och använda den hur många gånger som helst:

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 olika instanser av komponenten UserInfo som kommer från logiken som har skapats i en enda fil i stället för att ha tre separata filer för varje användare.

8. Implementera lat laddning

Lat laddning är mycket användbart när din React-app växer. När du har en stor kodbas så blir laddningstiden för dina webbsidor långsammare. Detta beror på att hela appen måste laddas varje gång för varje användare.

”Lat laddning” är en term som används för olika implementeringar. Här förknippar vi det med JavaScript och React, men du kan även implementera lat laddning på bilder och videor.

Som standard så paketerar och distribuerar React hela applikationen. Men vi kan ändra detta beteende med hjälp av lat laddning, även kallat koduppdelning.

I princip så kan du begränsa vilken del av din app som laddas vid en viss tidpunkt. Detta åstadkoms genom att du delar upp dina buntar och endast laddar de som är relevanta för användarens krav. Du kan exempelvis först endast ladda den logik som krävs för att användaren ska kunna logga in och sedan ladda logiken för användarens instrumentpanel när användaren har loggat in.

9. Använd återanvändbara krokar

Med Krokar i React så kan du utnyttja några av Reacts ytterligare funktioner, som att interagera med din komponents tillstånd och köra eftereffekter i samband med vissa tillståndsändringar i din komponent. Vi kan göra allt detta utan att skriva klasskomponenter.

Vi kan även göra Krokar återanvändbara så att vi inte behöver skriva om logiken i varje fil som de används i. Vi gör detta genom att skapa anpassade Krokar som kan importeras var som helst i appen.

I exemplet nedan så skapar vi en Krok för att hämta data från externa 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 skapat en Krok för att hämta data från API: er ovan. Nu kan den importeras till vilken komponent som helst. Detta besparar oss stressen att skriva in all denna logik i varje komponent där vi måste hämta externa data.

Den typ av anpassade Krokar som vi kan skapa i React är gränslös, så det är upp till dig att bestämma hur du vill använda dem. Kom bara ihåg att om det är en funktionalitet som måste upprepas i olika komponenter så bör du definitivt göra den återanvändbar.

10. Logga och hantera fel

Det finns olika sätt att hantera fel i React, t.ex. genom att använda felgränser, try och catch-block eller använda externa bibliotek som react-error-boundary.

De inbyggda felgränserna som introducerades i React 16 var en funktionalitet för klasskomponenter. Vi kommer därmed inte att diskutera den eftersom det är lämpligt att du använder funktionella komponenter istället för klasskomponenter.

Å andra sidan så fungerar användningen av blocken try och catch endast för imperativ kod, men inte för deklarativ kod. Detta innebär att det inte är ett bra alternativ när man arbetar med JSX.

Vår bästa rekommendation är att använda ett bibliotek som react-error-boundary. Det här biblioteket tillhandahåller funktionaliteter som kan lindas runt dina komponenter, vilket hjälper dig att upptäcka fel medan din React-app renderas.

11. Övervaka och testa din kod

Att testa din kod under utvecklingen hjälper dig att skriva underhållbar kod. Tyvärr så är detta något som många utvecklare försummar.

Även om många kanske hävdar att testning inte är en stor sak när du bygger din webbapplikation, har det otaliga fördelar. Här är bara några av dem:

  • Testning hjälper dig att upptäcka fel och buggar.
  • Att upptäcka fel leder till en förbättrad kodkvalitet.
  • Enhetstester kan dokumenteras för datainsamling och framtida referenser.
  • Tidig upptäckt av fel gör att man slipper betala utvecklare för att släcka den brand som felet kan orsaka om det inte kontrolleras.
  • Felfria appar och webbplatser vinner förtroende och lojalitet från sin målgrupp, vilket leder till större tillväxt.

Du kan använda verktyg som Jest eller React Testing Library för att testa din kod. Det finns gott om testverktyg som du kan välja mellan – allt handlar om vilket som fungerar bäst för dig.

Du kan även testa dina React-appar medan du bygger dem genom att köra apparna i webbläsaren. Du får vanligtvis alla upptäckta fel som visas på skärmen. Detta liknar utvecklingen av WordPress-webbplatser med DevKinsta – ett verktyg som gör att du kan utforma, utveckla och distribuera WordPress-webbplatser på din lokala maskin.

12. Använd funktionella komponenter

Att använda funktionella komponenter i React har många fördelar: Du skriver mindre kod, den är lättare att läsa och betaversionen av den officiella React-dokumentationen skrivs om med hjälp av funktionella komponenter (Krokar). Du bör med andra ord definitivt vänja dig vid att använda dem.

Med funktionella komponenter så behöver du inte oroa dig för att använda this eller använda klasser. Krokar gör även att du kan hantera din komponents tillstånd enkelt genom att skriva mindre kod.

De flesta av de uppdaterade resurserna som du hittar om React använder sig av funktionella komponenter, vilket gör det lätt att förstå. Du kan dessutom följa hjälpsamma guider och resurser som har skapats av Reacts community när du stöter på problem.

13. Håll dig uppdaterad om React-versionändringar

Med tiden så kommer nya funktioner att introduceras och vissa gamla att ändras. Det bästa sättet att hålla koll på detta är att titta på den officiella dokumentationen.

Du kan också ansluta dig till React-communities på sociala medier för att få information om ändringar när de sker.

Om du håller dig uppdaterad om den aktuella versionen av React så kan du avgöra när du ska optimera eller göra ändringar i din kodbas för att få bästa möjliga prestanda.

Det finns även externa bibliotek som är byggda kring React som du även bör hålla dig uppdaterad om – som React Router, som används för routing i React. Om du vet vilka ändringar som dessa bibliotek gör så kan du göra relevanta viktiga ändringar i din app och göra det lättare för alla som arbetar med projektet.

Vissa funktioner kan dessutom bli föråldrade och vissa nyckelord kan ändras när nya versioner släpps. För att vara på den säkra sidan så bör du alltid läsa dokumentationen och guiderna när sådana ändringar görs.

14. Använd en snabb och säker hosting-leverantör

Om du vill göra din webbapplikation tillgänglig för alla efter att du har byggt den så måste du hosta den. Det är viktigt att du använder en snabb och säker hosting-leverantör.

Genom att hosta din webbplats så får du tillgång till olika verktyg som gör det enkelt att skala och hantera den. Servern där din webbplats hostas gör det möjligt för filerna på din lokala maskin att lagras säkert på servern. Den övergripande fördelen med att hosta din webbplats är att andra människor får se de fantastiska sakerna som du har skapat.

Det finns en mängd olika plattformar som erbjuder kostnadsfria hostingtjänster till utvecklare, till exempel Firebase, Vercel, Netlify, GitHub Pages, eller betaltjänster som Azure, AWS, GoDaddy, Bluehost och så vidare.

Du kan även använda Kinsta’s plattform för applikationshosting. Allt du behöver göra är att ansluta ett GitHub-arkiv, välja bland Kinsta’s 25 globalt placerade datacenter och köra igång. Du får tillgång till snabb installation, support dygnet runt, förstklassig säkerhet, anpassade domäner, avancerade rapporterings- och övervakningsverktyg och mycket mer.

Sammanfattning

Att lära sig att använda React är inte allt som krävs för att skapa enastående webbapplikationer. Precis som med alla andra ramverk som Angular, Vue och så vidare så finns det en bästa praxis som du bör följa för att kunna bygga effektiva produkter.

Att följa dessa React-konventioner hjälper inte bara din app, utan har även fördelar för dig som frontend-utvecklare – du lär dig att skriva en effektiv, skalbar och underhållbar kod och du sticker ut som professionell inom ditt område.

Så när du bygger din nästa webbapp med React, överväg de här bästa metoderna så att det blir enkelt att använda och hantera produkten för både dina användare och dina utvecklare.

Vilka andra bästa praxis för React känner du till som inte nämndes i den här artikeln? Dela med dig av dem i kommentarerna nedan. Lycka till med kodningen!

Ihechikara Abba

Ihechikara är en mjukvaruutvecklare och teknisk skribent. Han tycker om att skriva artiklar om webbteknik, programmering och IT-relaterade ämnen. Ta kontakt med Ihechikara på X.