React

Over React

React is een Javascriptbibliotheek om gebruikersinterfaces mee te bouwen.

React werd in 2011 door Meta (moederbedrijf van Facebook, WhatsApp en Instagram) ontwikkeld vanuit de behoefte om de code van grote webapplicaties beter beheersbaar te maken.

React maakt gebruik van componenten. Dit zijn herbruikbare stukjes code

Voordelen

De voordelen van React zijn onder andere:

• Goede documentatie
• Efficente manier om web-applicaties te maken
• Veel beschikbare plug-ins om de functies uit te breiden
• Gestructureerde code voor betere samenwerking, door middel van components.

Installatie

Het installeren van een nieuwe React app is vrij eenvoudig. De gebruiker dient naar de gewenste map te gaan, waarna er in de terminal het volgende command uitgevoerd moet worden:

npx create-react-app my-app

Waarin my-app de naam is die de gebruiker zelf mee kan geven.

Hierna wordt de React app gemaakt. Dit kan een aantal minuten duren, omdat er vrij veel bestanden gedownload moeten worden. Als de gebruiker daarna naar de map van de React app navigeert, en npm start uitvoert in de terminal, wordt de React app opgestart. De React app moet nu te zien zijn op localhost:3000 in de browser.

Functies

Hooks

Hooks is een vrij nieuwe toevoeging aan React. Hooks maken het mogelijk om states en andere React functies te gebruiken zonder dat er een class geschreven hoeft te worden.

useState

useState zorgt ervoor dat een variabele kan worden opgeslagen.

  const [count, setCount] = useState(0);

Dit zorgt ervoor dat count een variabele is die in het hele component aangeroepen kan worden. De variabele kan aangepast worden door setCount(1). Hierdoor verandert de eerste variabale, count, ook naar 1.

useEffect

useEffect zorgt ervoor dat een functie of een deel van een functie opnieuw geredered kan worden. Deze useEffect kan voortdurent vernieuwd worden, maar het kan ook vernieuwd worden als er een andere variabele verandert.

De useEffect wordt nu alleen uitgevoerd als de variabele count verandert.

const [count, setCount] = useState(0);

useEffect(() => {
  document.title = `You clicked ${count} times`
}, [count])

Routing

Routing in React werkt anders dan in HTML en CSS. Er dient een nieuwe pachage geinstalleerd te worden, namelijk react-router-dom. Hierin staan een aantal componeten die nodig zijn om de Routing werkend te maken.

Ten eerste is het nodig om in de index.js <BrowserRouter> om de <App/> te zetten. Vervolgens kunnen de Routes gedeclareerd worden in het <App/> component. Dit kan op de volgende manier:

<Routes>
        <Route path="/" element={<Home />} />
        <Route
          path="/barchart"
          element={<Barchart width={600} height={400} data={topPopulation} />}
        />
</Routes>

Hierbij is het nodig om voor elke pagina een nieuw coponent aan te makenen in de Routes te declareren. Vervolgens kunnen de <Links> worden gemaakt in het component.

    <Link style={{ textDecoration: "none" }} to="/">
        <LinkText>Home</LinkText>
    </Link>
    <Link style={{ textDecoration: "none" }} to="/barchart">
        <LinkText>Barchart</LinkText>
    </Link>

Nu kan de navigatie gebruikt worden. Door gebruik te maken van <Link> in plaats van <a>, is er geen refresh nodig om naar een nieuwe pagina te navigeren.

Packages

Packages/plug-ins zijn stukjes code die geinstalleerd kunnen worden via de terminal. Hierdoor kan code van andere developers gebruikt worden, zonder die code daadwerkelijk in het project te hebben. Na installatie in de terminal worden de dependencies in de package.json gezet.

StyledComponents

Styled Components is een package waarmee gestijlde componenten gemaakt kunnen worden. Hierdoor hoeven de elementen geen className meer te krijgen en kan de CSS in hetzelfde bestand komen als waarin het component gebruikt wordt.

Bijvoorbeeld:

import styled from "styled-components"

const Wrapper = styled.div`
  width: 60%;
  margin: 0 auto;
`

const Home = () => {
  return (
    <Wrapper>
      <h1>Welkom bij mijn project van Frontend Applications.</h1>
    </Wrapper>
  )
}

Hierdoor blijft het bestand overzichtelijk en kan de stijl makkelijk gevonden een aangepast worden.

D3

Ook D3 kan worden geinstalleers als een package. Door npm install d3 te runnen in de terminal wordt de package geinstalleerd. De functies zijn in grote lijnen precies hetzelfde als D3 zonder React. Een van de verschillen is dat D3 nu niet meer gebruik maakt van de DOM, maar van de React elementen in de componenten zelf.