Hvilken du skal velge og når

Da jeg var ny på frontend-utvikling, var JavaScript, React, HTML og CSS noen av begrepene jeg ofte møtte. HTML og CSS er enkle å forstå. Imidlertid kan JavaScript og React være vanskelig å mestre.

React vs JavaScript-debatten tar aldri slutt i UI-verdenen. Hva er forskjellen mellom React og JavaScript? Når bør vi bruke React i stedet for JavaScript og omvendt? Dette kan være noen av spørsmålene som går gjennom hodet ditt akkurat nå.

I denne artikkelen vil jeg introdusere React og JavaScript som de beste webutviklingsspråkene, sammenligne funksjonene deres og gi råd om når de skal brukes i bygging av applikasjoner.

Hva er JavaScript?

JavaScript er et skriptspråk som brukes til å gjøre nettsider interaktive og dynamiske. Du vil komme over folk som bruker Vanilla JavaScript eller Plain JavaScript for å beskrive dette språket. De fleste frontend-utviklere bruker JavaScript, hypertext markup language (HTML) og cascading style sheets (CSS) for å lage brukergrensesnitt.

JavaScript er fleksibelt; du kan bygge web, spill og mobilapplikasjoner. Dens brukervennlighet og fleksibilitet rangerte det som det mest foretrukne programmeringsspråket basert på StackOverflow 2023-undersøkelse.

Bildekilde: stackoverflow.co

JavaScript-funksjoner

JavaScript har sementert sin plass som det mest brukte programmeringsspråket i mange år. Disse funksjonene forklarer dens dominans og bruk:

Et skriptspråk som tar i bruk asynkron programmering

Du kan bruke JavaScript til å skrive skript som du kan kjøre på et kjøretidsmiljø. Et skriptspråk som JavaScript er egnet for rask prototyping, bygging av webapplikasjoner og automatisering av repeterende oppgaver.

JavaScript er ikke-blokkerende og bruker funksjoner som tilbakeringing, løfter og async/wait for å støtte asynkron programmering. Denne funksjonen gjør det enkelt å hente data fra en server uten å blokkere hovedtråden.

Ta en titt på denne koden:

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

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

FetchData-funksjonen returnerer et løfte. Parametrene «resolve» og «reject» fullføring eller feil i den asynkrone operasjonen.

DOM-manipulasjon

Document Object Model (DOM)-manipulasjonen gjør det enkelt å manipulere strukturen til et HTML-dokument basert på brukerinndata.

Ta denne koden som et eksempel:

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 lytter etter endringer basert på brukerutdata. Når knappen er klikket, endres fargen på overskriften.

Dynamisk skriving

Variabeltypene i JavaScript bestemmes ved kjøring. Denne funksjonen gjør det enkelt for utviklere å skrive koden sin raskt, da de ikke trenger å spesifisere variabeltyper.

Tenk på denne koden som et eksempel:

let variable1 = 42;  // variable1 is of type number
console.log(variable1);  // Outputs: 42

variable1 = "Welcome to tipsbilk.net!";  // Now variable1 is of type string
console.log(variable1);  // Outputs: Welcome to tipsbilk.net!

Som du kan se, har vi tildelt variabel1 en verdi på 42 i det første eksemplet. Imidlertid kan vi fortsatt tildele den en annen verdi «Velkommen til tipsbilk.net!» i eksempel 2.

Utvidbarhet

Du kan utvide brukervennligheten til JavaScript med ulike tredjepartsbiblioteker og rammeverk. Angular er et eksempel på et JavaScript-rammeverk, mens React er et JavaScript-bibliotek.

Hva er React?

Reagere er et populært JavaScript-bibliotek for å bygge mobil- og nettbrukergrensesnitt. Dette biblioteket ble utviklet av Meta (tidligere Facebook) for intern bruk, men ble senere utgitt som et åpen kildekode-bibliotek. React ble designet for å redusere feil som utviklere møter når de bygger brukergrensesnitt. Dette biblioteket lar deg bygge gjenbrukbare komponenter, som er små kodebiter.

React er kjent for sin syntaks, JSX, som kombinerer HTML og JavaScript. Denne syntaksen lar utviklere skrive HTML og JavaScript i en enkelt fil. Du kan også bruke React med front-end-rammeverk som Bootstrap for å style applikasjonen din.

Reaksjonsfunksjoner

React er blant de mest kjente nettrammene og teknologiene basert på Stackoverflow 2023-undersøkelse.

Bildekilde: stackoverflow.co

Dette er noen av funksjonene som forklarer dens popularitet:

Komponentbasert

React tar i bruk en modulær arkitektur som gjør det enkelt å bygge små og gjenbrukbare kodebiter. Du kan dermed endre, redigere, legge til eller fjerne slike komponenter uten å omskrive hele koden.

Dette biblioteket har en «src»-mappe, der alle komponentene er plassert. Dette er mappestrukturen til en React-applikasjon.

Erklærende

Dette biblioteket lar utviklerne beskrive tilstanden til applikasjonen og brukergrensesnittet. React håndterer deretter de underliggende oppdateringene basert på det utvikleren beskriver. I hovedsak beskriver utvikleren det ønskede resultatet, og React bestemmer hvordan det skal gjøres.

Ta en titt 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 «numbers»-array og «DoubledNumbersList»-komponent. Vi erklærer at hvert tall skal dobles og gjengis som en liste. Dette betyr at vi har beskrevet hvordan brukergrensesnittet skal se ut.

Enveis databinding

React bruker ensrettet dataflyt. Denne funksjonen beskriver hvordan data flyter fra overordnede til underordnede komponenter. Hvis det gjøres en endring i den overordnede komponenten, gjenspeiler de underordnede komponentene automatisk endringene.

Endringer i en underordnet komponent vil imidlertid ikke reflektere den overordnede komponenten. Denne enveis databindingsfunksjonen gjør det enkelt å administrere applikasjonstilstanden mer forutsigbart.

import React, { useState } from 'react';

// Child Component
const ChildComponent = ({ data }) => {
  return (
    <div>
      <p>Data received from 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}>Change Data</button>
      {/* Passing data down to the child component as a prop */}
      <ChildComponent data={parentData} />
    </div>
  );
};

// App Component
const App = () => {
  return (
    <div>
      <h1>React One-Way Data Binding Example</h1>
      {/* Rendering the parent component */}
      <ParentComponent />
    </div>
  );
};

export default App;

ParentComponent bruker useState til å administrere parentDatas tilstand. HandleDataChange-funksjonen endrer tilstanden.

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

Virtuelt DOM

React oppretter en virtuell DOM hver gang tilstanden til en React-komponent endres. Dette biblioteket sammenligner deretter endringene i den virtuelle DOM og den faktiske DOM og oppdaterer bare de nødvendige delene.

Ta en titt på denne koden:

import React, { useState } from 'react';

const App = () => {
  // State to keep track of a counter
  const [counter, setCounter] = useState(0);

  // Event handler to update the counter
  const incrementCounter = () => {
    setCounter(counter + 1);
  };

  return (
    <div>
      <h1>Counter: {counter}</h1>
      <button onClick={incrementCounter}>Increment</button>
    </div>
  );
};

export default App;

Vi har deklarert en variabel med en knapp som øker hver gang brukeren klikker på knappen. React endrer ikke hele DOM der en bruker klikker på knappen. Den ser imidlertid bare etter endringene, sammenligner dem med den faktiske DOM og oppdaterer den deretter.

Reager vs. JavaScript

FeatureReactJavaScriptUsage/typeJavaScript er et programmeringsspråk som brukes i webutvikling. Det brukes mest i frontend-utvikling. Imidlertid har det nylig blitt tatt i bruk i server-side programmering med teknologier som Node.js.Vanilla JavaScript er lettere å lære enn React. Som utvikler må du vite hvordan HTML og CSS fungerer for å bruke JavaScript effektivt. LæringskurveReact har en bratt læringskurve ettersom den introduserer JSX-syntaks og komponentbasert arkitektur. Kunnskap om hvordan JavaScript fungerer er også nødvendig for raskt å lære React-konsepterJavaScript ble lansert i 1995. Dette programmeringsspråket har vokst i popularitet og har vært det mest foretrukne programmeringsspråket gjennom årenePopularityReact ble utgitt i 2013. Selv om dette biblioteket er populært, kan det Ikke sammenlignes med JavaScript, som har hundrevis av biblioteker og rammeverk.JavaScript ble lansert i 1995. Dette programmeringsspråket har vokst i popularitet og har vært det mest foretrukne programmeringsspråket gjennom årene.MaintenanceReact lar brukere bygge pluggbare og gjenbrukbare komponenter. Å vedlikeholde slike komponenter er enkelt siden du ikke trenger å skrive om hele koden hvis du vil legge til nye funksjoner eller oppdatere de eksisterende. Store applikasjoner kan vise seg å være kostbare å vedlikeholde. Å ha mye JavaScript i samme fil må også påvirke lesbarheten til kodeUI/UX-ytelsen.React bruker virtuell DOM for å gjøre det enkelt å bygge og administrere komplekse brukergrensesnitt. Dette biblioteket lar brukere organisere kode i små biter, noe som gjør oppdatering av DOM fastPlain JavaScript krever mye manuell intervensjon for å oppnå de ønskede ytelsesnivåene. SecurityReact er bygget med interoperabilitet i tankene. Denne funksjonen gjør den sårbar for angrep. Du kan imidlertid øke sikkerheten til en React-app ved å bruke tredjepartsapplikasjoner.JavaScript har forskjellige innebygde sikkerhetsfunksjoner. Disse programmeringsspråk-API-ene gir ikke midlertidige sikkerhetstokens, noe som gjør det sikrere.EcosystemReact har en stor samling av tredjepartsbiblioteker og -rammeverk. Økosystemet er imidlertid mindre enn JavaScriptJavaScript har tusenvis av biblioteker som React og rammeverk som Vue og Angular. Noen av bibliotekene og rammeverkene kan brukes i ulike økosystemer

Begrensninger for React

Til tross for de mange funksjonene og fordelene, mangler den fortsatt på noen områder. Noen begrensninger er:

• Støtter ikke eldre nettlesere: React er designet for å fungere med moderne nettlesere som Google Chrome, Opera, Mozilla Firefox, Apple Safari og Microsoft Edge. Du kan ha problemer med å kjøre React hvis du jobber med en eldre nettleser.
• Utstyrt for front-end: React er designet for å hjelpe utviklere med å bygge brukergrensesnitt. Du kan imidlertid bruke den med Node.js-rammeverk som ExpressJS hvis du vil ha en fullstack-applikasjon.
• Bratt læringskurve: Å lære React kan være vanskelig hvis du er ny på programmering.

Begrensninger for JavaScript

JavaScript er veldig kraftig. I følge Statistabruker mer enn 63 % av respondentene JavaScript.

Imidlertid har dette programmeringsspråket følgende mangler:

• Tidkrevende: Utviklere må skrive kode fra bunnen av når de bruker vanlig/vanilje JavaScript i applikasjonen din.
• Ikke egnet for store applikasjoner: Å vedlikeholde store JavaScript-applikasjoner kan vise seg å være utfordrende.
• Enkeltråd: JavaScript behandler én operasjon om gangen. Denne funksjonen kan være begrensende for CPU-intensive oppgaver.

Reager vs JavaScript: Hvilken bør du velge?

Alt jeg kan si er at React og JavaScript ikke er direkte konkurrenter. React er bare en del av de mange JavaScript-bibliotekene for å bygge brukergrensesnitt.

Det er imidlertid noen tilfeller der du kan velge mellom JavaScript og React for å bygge applikasjonene dine. På den annen side er det tilfeller der React vil være mer egnet over JavaScript og omvendt. Fra min analyse kan du bruke enten når:

Når du skal velge React fremfor JavaScript

• Ønsker å bygge applikasjoner raskt: React gir standardkode som gjør det enkelt å lage en applikasjon. Du kan også bruke den med ulike rammeverk og biblioteker for å lette arbeidet ditt.
• Bygge store applikasjoner: Den modulære arkitekturen til React gjør det enkelt å bygge og vedlikeholde store applikasjoner. Du kan oppdatere, slette eller legge til nye komponenter for å skalere applikasjonen din uten å endre kildekoden.
• Bygge applikasjoner med dynamisk innhold: Du kan bruke React med tredjepartsbiblioteker som Redux for å administrere statusen til søknaden din. Dette biblioteket lager også en virtuell DOM som bare oppdaterer de nødvendige delene når brukere oppdaterer applikasjonen.

Når du skal velge JavaScript fremfor React

• Små applikasjoner: JavaScript er egnet for små applikasjoner som ikke trenger mye brukerinteraksjoner.
• Når du vil lære hvordan JavaScript fungerer: Vanilla JavaScript lar deg sette opp det meste fra bunnen av. Du kan dermed bruke vanlig JavaScript når du ønsker en dypere forståelse av JavaScript.

Konklusjon

Vi håper du nå forstår forskjellene mellom React og JavaScript, funksjonene deres og når du skal bruke hver. Fra vår analyse vil JavaScript passe perfekt for et lite prosjekt når du ønsker å lære hvordan JavaScript fungerer under panseret.

På den annen side kan du bruke React når du har et stort prosjekt og ønsker å fokusere på brukergrensesnittet. Både React og JavaScript lar deg bruke ulike JavaScript-rammeverk og -biblioteker.

Hvis du ser etter en teknologi som er en direkte konkurrent til React, sjekk ut artikkelen vår om React vs Angular.