Hvilken man skal vælge og hvornår

Af
Tweet
Share
Share
Pin

Da jeg var ny inden for frontend-udvikling, var JavaScript, React, HTML og CSS nogle af de udtryk, jeg ofte stødte på. HTML og CSS er nemme at forstå. JavaScript og React kan dog være svære at mestre.

React vs JavaScript-debatten er uendelig i UI-verdenen. Hvad er forskellen mellem React og JavaScript? Hvornår skal vi bruge React i stedet for JavaScript og omvendt? Det kan være nogle af de spørgsmål, der løber gennem dit sind lige nu.

I denne artikel vil jeg introducere React og JavaScript som de bedste webudviklingssprog, sammenligne deres funktioner og rådgive, hvornår de skal bruges til at bygge applikationer.

Hvad er JavaScript?

JavaScript er et scriptsprog, der bruges til at gøre websider interaktive og dynamiske. Du vil støde på folk, der bruger Vanilla JavaScript eller Plain JavaScript til at beskrive dette sprog. De fleste frontend-udviklere bruger JavaScript, Hypertext Markup Language (HTML) og cascading style sheets (CSS) til at skabe brugergrænseflader.

JavaScript er fleksibelt; du kan bygge web, spil og mobilapplikationer. Dens brugervenlighed og fleksibilitet rangerede det som det mest foretrukne programmeringssprog baseret på StackOverflow 2023 undersøgelse.

Billedkilde: stackoverflow.co

JavaScript-funktioner

JavaScript har cementeret sin plads som det mest brugte programmeringssprog i mange år. Disse funktioner forklarer dens dominans og brug:

Et scriptsprog, der anvender asynkron programmering

Du kan bruge JavaScript til at skrive scripts, som du kan udføre på et runtime-miljø. Et scriptsprog såsom JavaScript er velegnet til hurtig prototyping, opbygning af webapplikationer og automatisering af gentagne opgaver.

JavaScript er ikke-blokerende og bruger funktioner som tilbagekald, løfter og async/wait til at understøtte asynkron programmering. Denne funktion gør det nemt at hente data fra en server uden at blokere hovedtråden.

Tag et kig på denne kode:

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

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

FetchData-funktionen returnerer et løfte. Parametrene ‘resolve’ og ‘reject’ fuldførelse eller fejl i den asynkrone operation.

DOM-manipulation

DOM-manipulationen (Document Object Model) gør det nemt at manipulere strukturen af ​​et HTML-dokument baseret på brugerens input.

Tag denne kode 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 begivenhedslytter, der lytter efter ændringer baseret på brugeroutput. Når der er klikket på knappen, ændres farven på overskriften.

Dynamisk skrivning

Variabletyperne i JavaScript bestemmes ved kørsel. Denne funktion gør det nemt for udviklere at skrive deres kode hurtigt, da de ikke behøver at angive variabeltyper.

Betragt denne kode som et eksempel:

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

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

Som du kan se, har vi tildelt variabel1 en værdi på 42 i det første eksempel. Men vi kan stadig tildele den en anden værdi “Velkommen til toadmin.dk!” i eksempel 2.

  Her er når et mørkt tema kan spare batteri

Udvidelsesmuligheder

Du kan udvide JavaScripts anvendelighed med forskellige tredjepartsbiblioteker og -frameworks. Angular er et eksempel på en JavaScript-ramme, mens React er et JavaScript-bibliotek.

Hvad er React?

Reagere er et populært JavaScript-bibliotek til opbygning af mobil- og webbrugergrænseflader. Dette bibliotek blev udviklet af Meta (tidligere Facebook) til intern brug, men blev senere udgivet som et open source-bibliotek. React er designet til at reducere fejl, som udviklere støder på, når de bygger brugergrænseflader. Dette bibliotek giver dig mulighed for at bygge genbrugelige komponenter, som er små stykker kode.

React er kendt for sin syntaks, JSX, som kombinerer HTML og JavaScript. Denne syntaks tillader udviklere at skrive HTML og JavaScript i en enkelt fil. Du kan også bruge React med front-end-frameworks som Bootstrap til at style din applikation.

Reaktionsfunktioner

React er blandt de mest berømte web-frameworks og teknologier baseret på Stackoverflow 2023 undersøgelse.

Billedkilde: stackoverflow.co

Disse er nogle af funktionerne, der forklarer dens popularitet:

Komponentbaseret

React anvender en modulær arkitektur, der gør det nemt at bygge små og genanvendelige kodebits. Du kan således ændre, redigere, tilføje eller fjerne sådanne komponenter uden at omskrive hele koden.

Dette bibliotek har en ‘src’-mappe, hvor alle komponenterne er placeret. Dette er mappestrukturen for en React-applikation.

Erklærende

Dette bibliotek giver udviklerne mulighed for at beskrive applikationens tilstand og brugergrænsefladen. React håndterer derefter de underliggende opdateringer baseret på, hvad udvikleren beskriver. I det væsentlige beskriver udvikleren det ønskede resultat, og React bestemmer, hvordan det skal gøres.

Tag et kig på dette eksempel:

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 tal skal fordobles og gengives som en liste. Det betyder, at vi har beskrevet, hvordan brugergrænsefladen skal se ud.

Envejs databinding

React bruger ensrettet dataflow. Denne funktion beskriver, hvordan data flyder fra de overordnede til underordnede komponenter. Hvis der foretages en ændring af den overordnede komponent, afspejler de underordnede komponenter automatisk ændringerne.

Ændringer i en underordnet komponent vil dog ikke afspejle den overordnede komponent. Denne envejs databindingsfunktion gør det nemt at administrere applikationstilstanden mere forudsigeligt. 

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 bruger useState til at administrere parentDatas tilstand. HandleDataChange-funktionen ændrer dens tilstand.

  6 Google Apps Script-projekter for at øge din Gmail-oplevelse

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

Virtuelt DOM

React opretter en virtuel DOM, hver gang en React-komponents tilstand ændres. Dette bibliotek sammenligner derefter ændringerne inden for den virtuelle DOM og den faktiske DOM og opdaterer kun de nødvendige dele.

Tag et kig på denne kode:

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 erklæret en variabel med en knap, der stiger hver gang brugeren klikker på knappen. React ændrer ikke hele DOM, hvor en bruger klikker på knappen. Den kontrollerer dog kun for ændringerne, sammenligner dem med den faktiske DOM og opdaterer den derefter.

Reager vs. JavaScript

FeatureReactJavaScriptUsage/typeJavaScript er et programmeringssprog, der bruges i webudvikling. Det bruges mest i frontend-udvikling. Det er dog for nylig blevet adopteret i server-side programmering med teknologier som Node.js.Vanilla JavaScript er lettere at lære end React. Som udvikler skal du vide, hvordan HTML og CSS fungerer for at bruge JavaScript effektivt. Learning curveReact har en stejl indlæringskurve, da den introducerer JSX-syntaks og komponentbaseret arkitektur. Viden om, hvordan JavaScript fungerer, er også nødvendig for hurtigt at lære React-begreberJavaScript blev lanceret i 1995. Dette programmeringssprog er vokset i popularitet og har været det mest foretrukne programmeringssprog gennem årene.PopularityReact blev udgivet i 2013. Selvom dette bibliotek er populært, kan det ‘t sammenlignes med JavaScript, som har hundredvis af biblioteker og rammer.JavaScript blev lanceret i 1995. Dette programmeringssprog er vokset i popularitet og har været det mest foretrukne programmeringssprog gennem årene.MaintenanceReact giver brugerne mulighed for at bygge pluggbare og genbrugelige komponenter. Det er nemt at vedligeholde sådanne komponenter, da du ikke behøver at omskrive hele koden, hvis du vil tilføje nye funktioner eller opdatere de eksisterende. Store applikationer kan vise sig at være dyre at vedligeholde. At have meget JavaScript i samme fil skal også påvirke læsbarheden af ​​din codeUI/UX performanceReact bruger virtuel DOM til at gøre det nemt at bygge og administrere komplekse brugergrænseflader. Dette bibliotek giver brugerne mulighed for at organisere kode i små bits, hvilket gør opdatering af DOM fastPlain JavaScript kræver en masse manuel indgriben for at opnå de ønskede ydeevneniveauer. SecurityReact er bygget med interoperabilitet i tankerne. Denne funktion gør den sårbar over for angreb. Du kan dog øge sikkerheden for en React-app ved at bruge tredjepartsapplikationer.JavaScript har forskellige indbyggede sikkerhedsfunktioner. Disse programmeringssprog API’er giver ikke midlertidige sikkerhedstokens, hvilket gør det mere sikkert.EcosystemReact har en stor samling af tredjeparts biblioteker og rammer. Dets økosystem er dog mindre sammenlignet med end JavaScriptJavaScript har tusindvis af biblioteker som React og rammer som Vue og Angular. Nogle af bibliotekerne og rammerne kan bruges i forskellige økosystemer

  Sådan parrer du to sæt AirPods med den samme iPhone

Reacts begrænsninger

På trods af de mange funktioner og fordele mangler den stadig på nogle områder. Nogle begrænsninger er:

  • Understøtter ikke ældre browsere: React er designet til at fungere med moderne browsere som Google Chrome, Opera, Mozilla Firefox, Apple Safari og Microsoft Edge. Du kan have problemer med at køre React, hvis du arbejder med en ældre browser.
  • Gearet til front-end: React er designet til at hjælpe udviklere med at bygge brugergrænseflader. Du kan dog bruge det med Node.js-frameworks som ExpressJS, hvis du vil have en fuld-stack-applikation.
  • Stejl læringskurve: At lære React kan være svært, hvis du er ny til programmering.

Begrænsninger af JavaScript

JavaScript er meget kraftfuldt. Ifølge Statistabruger mere end 63 % af de adspurgte JavaScript.

Dette programmeringssprog har dog følgende mangler:

  • Tidskrævende: Udviklere skal skrive kode fra bunden, når de bruger almindeligt/vanilje JavaScript i din applikation.
  • Ikke egnet til store applikationer: Vedligeholdelse af store JavaScript-applikationer kan vise sig at være udfordrende.
  • Single-threaded: JavaScript behandler én operation ad gangen. Denne funktion kan være begrænsende for CPU-intensive opgaver.

Reager vs JavaScript: Hvilken skal du vælge?

Jeg kan kun sige, at React og JavaScript ikke er direkte konkurrenter. React er blot en del af de mange JavaScript-biblioteker til opbygning af brugergrænseflader.

Der er dog nogle tilfælde, hvor du kan vælge mellem JavaScript og React for at bygge dine applikationer. På den anden side er der tilfælde, hvor React vil være mere egnet over JavaScript og omvendt. Fra min analyse kan du bruge enten når:

Hvornår skal du vælge React frem for JavaScript

  • Vil du bygge applikationer hurtigt: React leverer standardkode, der gør det nemt at oprette en applikation. Du kan også bruge det med forskellige rammer og biblioteker for at lette dit arbejde.
  • Opbygning af store applikationer: Reacts modulære arkitektur gør det nemt at bygge og vedligeholde store applikationer. Du kan opdatere, slette eller tilføje nye komponenter for at skalere din applikation uden at ændre kildekoden.
  • Opbygning af applikationer med dynamisk indhold: Du kan bruge React med tredjepartsbiblioteker som f.eks Redux for at administrere din ansøgnings tilstand. Dette bibliotek opretter også en virtuel DOM, der kun opdaterer de nødvendige dele, når brugere opdaterer applikationen.

Hvornår skal man vælge JavaScript frem for React

  • Små applikationer: JavaScript er velegnet til små applikationer, der ikke kræver mange brugerinteraktioner.
  • Når du vil lære, hvordan JavaScript virker: Vanilla JavaScript giver dig mulighed for at sætte det meste op fra bunden. Du kan således bruge almindelig JavaScript, når du ønsker en dybere forståelse af JavaScript.

Konklusion

Vi håber, at du nu forstår forskellene mellem React og JavaScript, deres funktioner og hvornår du skal bruge hver. Ud fra vores analyse vil JavaScript passe perfekt til et lille projekt, når du vil lære, hvordan JavaScript fungerer under emhætten.

Til gengæld kan du bruge React, når du har et stort projekt og gerne vil fokusere på brugerfladen. Både React og JavaScript giver dig mulighed for at bruge forskellige JavaScript-rammer og biblioteker.

Hvis du leder efter en teknologi, der er en direkte konkurrent til React, så tjek vores artikel om React vs Angular.