React vs. JavaScript: Hvilken bør du velge for din neste app?

by
Tweet
Share
Share
Pin
0 Shares

I starten av min karriere som frontend-utvikler, støtte jeg stadig på begreper som JavaScript, React, HTML og CSS. HTML og CSS var relativt greie å forstå, men JavaScript og React viste seg å være mer utfordrende å mestre.

Diskusjonen om React kontra JavaScript ser ut til å være en evigvarende debatt i UI-miljøet. Hva er egentlig forskjellen mellom React og JavaScript? Når er det mest hensiktsmessig å bruke React i stedet for JavaScript, og omvendt? Dette er spørsmål som kanskje svirrer i tankene dine akkurat nå.

I denne artikkelen skal vi utforske React og JavaScript som to ledende verktøy innen webutvikling. Vi vil sammenligne deres egenskaper og gi veiledning om når de best kan benyttes i utviklingen av applikasjoner.

Hva er JavaScript?

JavaScript er et skriptspråk som er sentralt for å skape interaktive og dynamiske nettsider. Noen ganger vil du høre folk omtale det som Vanilla JavaScript eller Plain JavaScript. De fleste frontend-utviklere kombinerer JavaScript med HTML og CSS for å designe brukervennlige grensesnitt.

JavaScript er kjent for sin fleksibilitet. Det kan brukes til å lage webapplikasjoner, spill og mobilapplikasjoner. Brukervennligheten og tilpasningsdyktigheten har ført til at det er det mest populære programmeringsspråket ifølge StackOverflow 2023-undersøkelsen.

Bildekilde: stackoverflow.co

JavaScript-funksjoner

JavaScript har befestet sin posisjon som det mest brukte programmeringsspråket i årevis. Disse egenskapene bidrar til dens utbredte popularitet og bruk:

Et skriptspråk med asynkron programmering

JavaScript lar deg skrive skript som kan kjøres i et kjøretidsmiljø. Som skriptspråk er JavaScript ideelt for rask prototyping, webapplikasjonsutvikling og automatisering av repeterende oppgaver.

JavaScript er ikke-blokkerende og støtter asynkron programmering ved hjelp av funksjoner som callbacks, promises og async/await. Dette forenkler henting av data fra en server uten å hindre hovedtråden.

Her er et eksempel:

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched successfully!");
        }, 2000);
    });
}

fetchData().then(data => {
    console.log(data);  // Outputs: Data fetched successfully!
});

Funksjonen `fetchData` returnerer en promise. Parametrene «resolve» og «reject» indikerer fullføring eller feil i den asynkrone operasjonen.

DOM-manipulering

Med Document Object Model (DOM)-manipulering er det enkelt å endre strukturen til et HTML-dokument basert på brukerinput.

Her er et kodeeksempel:

var heading = document.getElementById('myHeading');

        document.getElementById('changeTextButton').addEventListener('click', function() {
            heading.textContent="Text changed!";
        });

        document.getElementById('highlightButton').addEventListener('click', function() {
            heading.classList.add('highlight');
        });

Vi har en hendelseslytter som reagerer på brukerinput. Når en knapp trykkes, endres fargen på overskriften.

Dynamisk typing

I JavaScript bestemmes variabeltyper ved kjøretid. Dette gjør det raskere for utviklere å skrive kode, ettersom variabeltyper ikke trenger å spesifiseres.

Se på dette eksemplet:

let variable1 = 42;  // variable1 er av typen tall
console.log(variable1);  // Output: 42

variable1 = "Velkommen til tipsbilk.net!";  // variable1 er nå av typen string
console.log(variable1);  // Output: Velkommen til tipsbilk.net!

Som du ser, har variabel1 verdien 42 i starten. Men vi kan enkelt endre den til en annen verdi, som «Velkommen til tipsbilk.net!»

Utvidbarhet

JavaScripts funksjonalitet kan utvides med en rekke tredjepartsbiblioteker og rammeverk. Angular er et eksempel på et JavaScript-rammeverk, mens React er et JavaScript-bibliotek.

Hva er React?

React er et anerkjent JavaScript-bibliotek for å utvikle brukergrensesnitt for mobil og web. Biblioteket ble opprinnelig utviklet internt av Meta (tidligere Facebook) før det ble gjort tilgjengelig som et åpen kildekode-bibliotek. React ble skapt for å redusere utfordringene utviklere møter ved bygging av brukergrensesnitt. Biblioteket muliggjør bruk av gjenbrukbare komponenter, som er små kodeenheter.

React er kjent for sin syntaks, JSX, som forener HTML og JavaScript. Denne syntaksen gir utviklere muligheten til å skrive HTML og JavaScript i én enkelt fil. React kan også kombineres med frontend-rammeverk som Bootstrap for å style applikasjoner.

React-funksjoner

React er blant de mest kjente nettrammeverkene og teknologiene i henhold til Stackoverflow 2023-undersøkelsen.

Bildekilde: stackoverflow.co

Her er noen av egenskapene som har gjort React så populært:

Komponentbasert

React benytter seg av en modulær arkitektur som forenkler utviklingen av små og gjenbrukbare kodeenheter. Dette gir muligheten til å endre, redigere, legge til eller fjerne komponenter uten å måtte omskrive hele koden.

Biblioteket har en «src»-mappe der alle komponentene er lagret. Dette er standard mappestruktur for en React-applikasjon.

Deklarativ

React gjør det mulig for utviklere å beskrive tilstanden til applikasjonen og brukergrensesnittet. React håndterer deretter de underliggende oppdateringene basert på utviklerens beskrivelse. Utvikleren beskriver altså det ønskede resultatet, mens React sørger for at det blir utført.

Se på dette eksemplet:

const numbers = [1, 2, 3, 4];

const DoubledNumbersList = () => {
  return (
    <ul>
      {numbers.map(number => (
        <li key={number}>{number * 2}</li>
      ))}
    </ul>
  );
};

// Render the component
ReactDOM.render(<DoubledNumbersList />, document.getElementById('root'));

Vi har en array, «numbers», og en komponent, «DoubledNumbersList». Vi deklarerer at hvert tall skal dobles og gjengis som en liste. Dette definerer hvordan brukergrensesnittet skal se ut.

Enveis databinding

React bruker ensrettet dataflyt. Dette betyr at data flyter fra overordnede til underordnede komponenter. Hvis det oppstår en endring i den overordnede komponenten, vil de underordnede komponentene automatisk gjenspeile endringene.

Endringer i en underordnet komponent vil derimot ikke påvirke den overordnede komponenten. Denne enveis databindingsfunksjonen gjør det enklere å administrere applikasjonstilstanden på en forutsigbar måte.

import React, { useState } from 'react';

// Child Component
const ChildComponent = ({ data }) => {
  return (
    <div>
      <p>Data mottatt fra parent: {data}</p>
    </div>
  );
};

// Parent Component
const ParentComponent = () => {
  const [parentData, setParentData] = useState('Initial Data');

  const handleDataChange = () => {
    // Modifying the state in the parent component
    setParentData('Updated Data');
  };

  return (
    <div>
      <button onClick={handleDataChange}>Endre Data</button>
      <ChildComponent data={parentData} />
    </div>
  );
};

// App Component
const App = () => {
  return (
    <div>
      <h1>React Enveis Databinding Eksempel</h1>
      <ParentComponent />
    </div>
  );
};

export default App;

ParentComponent bruker `useState` for å kontrollere `parentData` tilstand. `HandleDataChange`-funksjonen oppdaterer tilstanden.

Vi har en funksjonell komponent, `ChildComponent`, som viser data som sendes til den som rekvisitter.

Virtuelt DOM

React skaper en virtuell DOM hver gang tilstanden til en React-komponent endres. React sammenligner endringene i den virtuelle DOM med den faktiske DOM, og oppdaterer kun de nødvendige delene.

Se på dette kodeeksemplet:

import React, { useState } from 'react';

const App = () => {
  // State for å holde styr på en teller
  const [counter, setCounter] = useState(0);

  // Event handler for å oppdatere telleren
  const incrementCounter = () => {
    setCounter(counter + 1);
  };

  return (
    <div>
      <h1>Teller: {counter}</h1>
      <button onClick={incrementCounter}>Øk</button>
    </div>
  );
};

export default App;

Vi har definert en variabel med en knapp som øker for hver gang en bruker klikker på den. React endrer ikke hele DOM-en når brukeren klikker på knappen. I stedet ser den bare etter endringer, sammenligner dem med den faktiske DOM, og oppdaterer den deretter.

React vs. JavaScript

Funksjon React JavaScript
Bruk/type React er et JavaScript-bibliotek, primært brukt for å bygge brukergrensesnitt. JavaScript er et programmeringsspråk som er utbredt i webutvikling, med hovedvekt på frontend. Nylig har det også fått fotfeste i server-side programmering med Node.js.
Læringskurve React har en litt brattere læringskurve, særlig på grunn av introduksjonen av JSX-syntaks og komponentbasert arkitektur. Vanilla JavaScript er kjent for å være mer lettlært enn React. En grunnleggende forståelse av HTML og CSS er nødvendig for effektiv bruk av JavaScript.
Popularitet React ble lansert i 2013. Selv om biblioteket er populært, er det ikke like utbredt som JavaScript, som har et enormt antall biblioteker og rammeverk. JavaScript ble lansert i 1995 og har siden vokst i popularitet og blitt et av de mest brukte programmeringsspråkene.
Vedlikehold React legger til rette for gjenbrukbare komponenter, noe som forenkler vedlikehold og oppdatering av applikasjoner. Endringer kan gjøres i en komponent uten å måtte skrive om hele koden. Større JavaScript-applikasjoner kan være kostbare å vedlikeholde. Mye JavaScript-kode i samme fil kan også påvirke lesbarheten.
UI/UX ytelse React bruker virtuell DOM for å forenkle utvikling og vedlikehold av komplekse brukergrensesnitt. Koden er organisert i små enheter som bidrar til raskere oppdatering av DOM. Plain JavaScript krever ofte mer manuell innsats for å oppnå ønsket ytelse.
Sikkerhet React er bygget for å være interoperabel, som kan føre til sikkerhetsrisiko. Men man kan øke sikkerheten i en React-app ved hjelp av tredjeparts applikasjoner. JavaScript har en rekke innebygde sikkerhetsfunksjoner. Programmeringsspråkets API-er genererer ikke midlertidige sikkerhetstoken, noe som bidrar til økt sikkerhet.
Økosystem React har et stort utvalg av tredjepartsbiblioteker og rammeverk, selv om økosystemet er mindre enn JavaScript. JavaScript har et enormt økosystem, med tusenvis av biblioteker som React og rammeverk som Vue og Angular. Noen av disse er kompatible med forskjellige miljøer.

Begrensninger for React

Til tross for de mange fordelene, har React også noen begrensninger. Blant annet:

  • Støtte for eldre nettlesere: React er utviklet for å fungere med moderne nettlesere som Google Chrome, Opera, Mozilla Firefox, Apple Safari og Microsoft Edge. Eldre nettlesere kan ha problemer med å kjøre React.
  • Primært frontend: React er i hovedsak designet for å hjelpe utviklere med å bygge brukergrensesnitt. Det kan kombineres med Node.js-rammeverk som ExpressJS for å lage fullstack-applikasjoner.
  • Bratt læringskurve: Det kan være vanskelig å lære React hvis man er ny innen programmering.

Begrensninger for JavaScript

JavaScript er et kraftig programmeringsspråk. I følge Statista, benytter over 63% av utviklere JavaScript.

Likevel har språket også noen ulemper:

  • Tidkrevende: Utviklere må skrive koden fra bunnen av når de bruker vanilla JavaScript i en applikasjon.
  • Ikke ideelt for store applikasjoner: Store JavaScript-applikasjoner kan være utfordrende å vedlikeholde.
  • Enkeltrådet: JavaScript håndterer én operasjon om gangen. Dette kan være en begrensning for CPU-intensive oppgaver.

React vs. JavaScript: Hvilken bør du velge?

Det er viktig å understreke at React og JavaScript ikke er direkte konkurrenter. React er bare ett av mange JavaScript-biblioteker for utvikling av brukergrensesnitt.

Det finnes situasjoner der det er naturlig å velge mellom JavaScript og React når du skal utvikle applikasjoner. I noen tilfeller vil React være mer passende enn JavaScript, og vice versa. Min analyse tyder på at du kan bruke begge når:

Når du bør velge React fremfor JavaScript

  • Rask applikasjonsutvikling: React tilbyr standardkode som forenkler applikasjonsutvikling. Det kan også kombineres med ulike rammeverk og biblioteker for å lette prosessen.
  • Utvikling av store applikasjoner: Reacts modulære arkitektur gjør det enklere å bygge og vedlikeholde store applikasjoner. Du kan oppdatere, slette eller legge til nye komponenter for å skalere applikasjonen uten å endre kildekoden.
  • Utvikling av applikasjoner med dynamisk innhold: Du kan bruke React sammen med tredjepartsbiblioteker som Redux for å administrere tilstanden til applikasjonen. React bruker også en virtuell DOM som bare oppdaterer nødvendige deler når brukeren oppdaterer applikasjonen.

Når du bør velge JavaScript fremfor React

  • Små applikasjoner: JavaScript egner seg godt for små applikasjoner som ikke krever mange brukerinteraksjoner.
  • Dypere forståelse av JavaScript: Vanilla JavaScript lar deg bygge det meste fra bunnen av, noe som gir en dypere forståelse av hvordan JavaScript fungerer.

Konklusjon

Vi håper at du nå har en bedre forståelse av forskjellene mellom React og JavaScript, deres funksjoner og når de bør brukes. Vår analyse viser at JavaScript er et godt valg for små prosjekter der du ønsker å lære mer om hvordan JavaScript fungerer i bunnen.

På den andre siden kan React være et bedre alternativ for større prosjekter der hovedfokus er brukergrensesnittet. Både React og JavaScript kan brukes sammen med ulike JavaScript-rammeverk og biblioteker.

Hvis du er på utkikk etter en teknologi som kan konkurrere med React, anbefaler vi at du leser vår artikkel om React vs Angular.