Skip to content

Basics React

Jump to bottom
ralfz123 edited this page Nov 26, 2020 · 20 revisions

Er bestaan heel veel verschillende onderwerpen binnen React. Ondanks dat ik wel al enige ervaring heb met React, wil ik toch een aantal onderwerpen uitleggen.

Create React App

Om React te installeren en de boilerplate van hun te gebruiken, kan je de command npx create-react-app my-app gebruiken om deze hele omgeving in 1 keer te installeren. React regelt heel deze omgeving voor je met alle benodigde mappen en bestanden om aan het werk te gaan. Deze omgeving ziet er dan zo uit:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
    └── setupTests.js

Dit is de beginopzet en het is natuurlijk de bedoeling dat je vanaf hier eigen mappen en bestanden gaat aanmaken. Create React App voorziet niks van backend of databases, maar het creëert een frontend boilerplate zodat je er zelf een database aan kunt hangen.

Wanneer je project af is, kun je het command npm run build runnen. React zorgt er dan voor dat er een map build wordt aangemaakt en je applicatie is dan klaar om gedeployed te worden (denk aan GitHub Pages, Netlify, Glitch en Vercel).

JSX

JavaScriptXML.
JSX zal best wel even wennen zijn voor een beginner van React als je van een ander framework komt. Via JSX kan je HTML elementen schrijven in React. JSX maakt dit gemakkelijk mogelijk. Onder water wordt dit via de Virtual DOM van React gedaan.

Voorbeeld van jsx code
const message = <h1>Hello, Dataviz!</h1>;

Ook kunnen je bestandsnamen eindigen op de extensie .jsx. Wanneer moet je dit doen? Op het moment dat je HTML code ( <div>, <p>) in je bestand gaat zetten. Dan moet je in plaats van .js dus .jsx neerzetten.

❌ Voorbeeld hoe het niet moet:

// filename: Button.js
function FilterButton() {
  return <div />;
}

✅ Voorbeeld hoe het wel moet:

// filename: Button.jsx
function FilterButton() {
  return <div />;
}

Components

Components zijn UI-delen van een website (SPA) waaruit een website is opgebouwd. Je kan components hergebruiken en individueel behandelen (content, styling en interactie).

Een component pakt een optionele input en returnt een React element dat op het scherm gerenderd is.

Een React component kan 'stateful' of 'stateless' zijn. 'Stateful' components zijn van het Class type en 'stateless' components zijn van het function type. Oftewel:

Class Components

Class Components hebben een structuur zoals dit:

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      <div>This is content.</div>
    );
  }
}

export default MyComponent;

Class components heeft lifecycle methods, namelijk:

  • componentDidMount() - Dit moet je gebruiken wanneer de component klaar is voor gebruik. Dit is een goed punt om API calls te maken als je nog externe data nodig hebt.

  • componentDidUpdate() - Dit moet je gebruiken zo snel mogelijk wanneer het wordt geüpdated. Het meest voorkomende scenario is het updaten van de DOM als reactie op prop- of state-wijzigingen.

  • componentWillUnmount() - Dit moet je gebruiken net voordat het component ge-unmount en verwijderd is. Je kan hier niet de state van het component aanpassen.

Functional Components

Functional Components hebben een structuur zoals dit:

import React from 'react';

function MyComponent() {
    return (
      <div>This is content.</div>
    );
}

export default MyComponent;

Deze bevatten meestal geen lifecycle methods zoals Class Components die heeft, maar ze bevatten wel andere:

  • useState() - Dit is de initial state. Hierin geef je de beginwaarde (useState(5)). Dit is hetzelfde als this.state zoals in een class. Bij deze methode ziet de variabel declaratie er zo uit: const [time, setTime] = useState(0). Hierbij is time de variabele die steeds wordt geüpdated door de setTime "functie".
  • useEffect() - Dit is een mooie manier van het effect na het updaten van de state (useState()). Of met andere woorden: je vertelt tegen React dat het component iets moet doen na de render.

Hooks vs. Classes

Hooks is een nieuwere, nettere en overzichtelijkere manier van het schrijven van classes en state. Binnen React heb je dus vrij de keuze te maken tussen 2 mogelijkheden: Hooks of Classes. Omdat ik al enige ervaring had met Classes, wilde ik nu Hooks leren. Hooks noem je ook wel Functional Components en Classes noem je Class Components.

Hooks lost een aantal problemen op die Classes had, namelijk:

  • Side Effects: niet-gerelateerde logica in lifecycle methods kan zich herhalen en dat kan voor onnodige bijwerkingen zorgen.

  • Managing State: Het hergebruiken van logica tussen meerdere componenten kan leiden tot diep geneste componenten of wrapper hell.

  • Optimization: Classes zijn logischerwijs niet optimaal voor compilers.

Verschil Hooks vs Classes in een simpel voorbeeld uitgelegd:

Hooks

Hier zie je dat bij Functional Components de state wordt bijgehouden in een function. Daarin wordt een variabele aangemaakt op deze manier const [count, setCount] = useState(0). Hierin is count de huidige state en setCount is de 'update-functie'. useState(0) is de begin (standaard) waarde van deze state, namelijk '0'. Vervolgens wordt hij in de return() geüpdatet met onClick={() => setCount(count + 1)}. Dit resultaat kan je dan terugzien in de You clicked {count} times.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Classes

Hier zie je dat bij Class Components de state wordt bijgehouden in een constructor(). Ze houden dat als huidige state bij als this.state = { count: 0 }. Vervolgens wordt hij in de render() geüpdatet met onClick={() => this.setState({ count: this.state.count + 1 })}. Dit resultaat kan je dan terugzien in de You clicked {this.state.count} times.

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

State

Simpel gezegd, is state een object dat alle key-value paren bevatten. State bepaalt hoe je componenten renderen en zich gedragen. Zo laat state toe dat je componenten dynamisch en interactief kunnen zijn.

In de voorbeelden van Hooks en Classes demonstreer ik hoe React om kan gaan met state.

State moet niet verward worden met props. State managet hetgeen binnenin de component en props is hetgeen wat wordt meegeleverd naar het component.

props

props of properties is een concept dat wordt gebruikt om data door te passen tussen React componenten. Op deze manier kan je applicatie erg dynamisch worden. Het is ongeveer te vergelijken met de parameters die je meegeeft in een function(para1, para2).

Een voorbeeld uit mijn eigen applicatie die props uitlegt:
Dit is code uit het Button.jsx component. Hierin zijn StyledInput en StyledLabel elementen die in function FilterButton zitten. Deze functie heeft als prop value. Door in Dataviz.jsx dit component aan te roepen en als prop een value mee te geven, wordt dit gerenderd op de pagina.

Button.jsx
const StyledInput = styled.input`
	cursor: pointer;
`;

// Styling - label
const StyledLabel = styled.label`
	cursor: pointer;
	font-size: 1rem;

    /* Hover - label */
	:hover {
		text-decoration: underline;
		cursor: pointer;
		color: rgb(53, 80, 50);
	}
`;

function FilterButton({ value }) {
	return (
		<>
		   <StyledInput type='radio' id={value} name={value} value={value} />
		   <StyledLabel for={value}>{value}</StyledLabel>
		</>
	);
}
Dataviz.jsx
return (
		<>
			<g className='parent' ref={parent}></g>
			<div className='layout-block'>
			<h3>Moment van de dag</h3>
				<FilterButton value='Overdag' />
				<FilterButton value="'s Avonds" />
			</div>
                </>

Bronnen:

Frontend-Applications, Tech Track | a project of @ralfz123

Frontend Applications

Intro

Frontend Frameworks

React 🔥

D3 📈

Proces 👨‍💻

Clone this wiki locally