React Beginnershandleiding: Bouw je eerste gebruikersinterface van nul tot één

# React Beginnershandleiding: Bouw je eerste gebruikersinterface van nul tot één

React is een JavaScript-bibliotheek voor het bouwen van gebruikersinterfaces. Het is ontwikkeld en wordt onderhouden door Facebook en is uitgegroeid tot een van de meest populaire tools in front-end ontwikkeling. Deze handleiding neemt je stap voor stap mee vanaf nul om de basisconcepten van React te begrijpen en een eenvoudige gebruikersinterface te bouwen.

## Waarom React kiezen?

React heeft de volgende voordelen:

* **Componentgebaseerd:** React breekt de gebruikersinterface op in onafhankelijke, herbruikbare componenten. Dit maakt de code gemakkelijker te onderhouden en te begrijpen.
* **Declaratief:** React gebruikt een declaratieve programmeerstijl, wat betekent dat je alleen hoeft te beschrijven wat je wilt weergeven, en React zorgt automatisch voor updates en rendering.
* **Efficiënt:** React gebruikt een virtuele DOM en een slim diff-algoritme, waardoor de gebruikersinterface efficiënt kan worden bijgewerkt en onnodige rendering wordt verminderd.
* **Enorme community-ondersteuning:** React heeft een enorme community en een rijk ecosysteem, je kunt talloze tutorials, bibliotheken en tools vinden om je te helpen ontwikkelen.
* **Cross-platform mogelijkheden:** Met React Native kun je native mobiele applicaties (iOS en Android) ontwikkelen met React.

## Voorbereiding

Voordat je begint, moet je ervoor zorgen dat de volgende tools op je computer zijn geïnstalleerd:

* **Node.js:** Node.js is een JavaScript-runtime-omgeving die wordt gebruikt om React-ontwikkelingstools uit te voeren. Je kunt het downloaden en installeren van [https://nodejs.org/](https://nodejs.org/).
* **npm of yarn:** npm (Node Package Manager) en yarn zijn JavaScript-pakketbeheerders die worden gebruikt om React-afhankelijkheden te installeren en te beheren. npm wordt meestal geïnstalleerd bij de installatie van Node.js. yarn kan worden geïnstalleerd vanaf [https://yarnpkg.com/](https://yarnpkg.com/).

## Je eerste React-applicatie maken

We gebruiken `create-react-app` om snel een React-project te maken.

1. **Maken met npm:**

   ```bash
   npx create-react-app my-first-react-app
   cd my-first-react-app
   npm start

2. Maken met yarn:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

Na het uitvoeren van de bovenstaande commando's, maakt create-react-app automatisch een map met de naam my-first-react-app en initialiseert een React-project in die map. Het commando npm start of yarn start start de ontwikkelserver, en je kunt je React-applicatie bekijken door http://localhost:3000 in je browser te bezoeken.

Mappenstructuur

De projectmappenstructuur die door create-react-app is gemaakt, is als volgt:

my-first-react-app/
├── node_modules/         # Bibliotheken waar het project van afhankelijk is
├── public/               # Statische bronnen (bijvoorbeeld HTML-bestanden)
│   ├── index.html        # Het HTML-ingangsbestand van de applicatie
│   └── ...
├── src/                  # React broncode
│   ├── App.css           # CSS-stijl van de App-component
│   ├── App.js            # App-component
│   ├── App.test.js       # Testbestand van de App-component
│   ├── index.css         # Globale CSS-stijl
│   ├── index.js          # JavaScript-ingangsbestand van de applicatie
│   ├── logo.svg          # React-logo
│   └── ...
├── .gitignore            # Git negeerbestand
├── package.json          # Metadata en afhankelijkheden van het project
├── README.md             # Documentatie van het project
└── yarn.lock             # Versievergrendelingsbestand voor afhankelijkheden (indien yarn wordt gebruikt)

Inzicht in React-componenten

React-applicaties zijn opgebouwd uit componenten. Componenten zijn onafhankelijke, herbruikbare codeblokken die worden gebruikt om specifieke delen van de gebruikersinterface weer te geven.

In het bestand src/App.js zie je een standaard App-component:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

Code uitleg:

• import React from 'react'; importeert de React-bibliotheek.
• function App() { ... } definieert een functiecomponent met de naam App.
• return ( ... ) retourneert een JSX-expressie die beschrijft wat de component moet weergeven.
• export default App; exporteert de App-component zodat deze in andere bestanden kan worden gebruikt.

JSX (JavaScript XML)

JSX is een JavaScript-syntaxextensie waarmee je HTML-achtige code in JavaScript-code kunt schrijven. In het bovenstaande voorbeeld is ... een JSX-expressie. JSX-code wordt door Babel omgezet in standaard JavaScript-code, zodat de browser deze kan begrijpen.

De App-component aanpassen

Laten we de App-component aanpassen om een eenvoudige teller te maken.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
``` const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# Teller

      Huidige telling: {count}

      +
      -
    
  );
}

export default App;

Wijzigingsuitleg:

• import React, { useState } from 'react'; Importeer de useState Hook. useState is een React Hook die wordt gebruikt om state toe te voegen aan functionele componenten.
• const [count, setCount] = useState(0); Gebruik de useState Hook om een state-variabele te maken met de naam count en initialiseer deze op 0. setCount is een functie om de count-state bij te werken.
• const increment = () => { setCount(count + 1); }; Definieer een functie met de naam increment om de count-state met 1 te verhogen.
• const decrement = () => { setCount(count - 1); }; Definieer een functie met de naam decrement om de count-state met 1 te verlagen.
• Huidige telling: {count} Toon de waarde van de count-state op de pagina. {count} is een JSX-expressie die wordt gebruikt om JavaScript-variabelen in JSX-code in te voegen.
• + en - Maak twee knoppen die respectievelijk de functies increment en decrement binden. onClick is een event handler die wordt gebruikt om de opgegeven functie uit te voeren wanneer op de knop wordt geklikt.

Nadat u het bestand src/App.js hebt opgeslagen, wordt de browser automatisch vernieuwd en ziet u een eenvoudige teller. Klik op de knop "+" om de telling te verhogen en klik op de knop "-" om de telling te verlagen.

CSS-stijlen gebruiken

U kunt CSS gebruiken om uw React-applicatie te verfraaien. create-react-app ondersteunt CSS Modules en gewone CSS-bestanden.

CSS Modules gebruiken:

Met CSS Modules kunt u onafhankelijke CSS-stijlen voor elke component maken om stijlconflicten te voorkomen. Om CSS Modules in een component te gebruiken, moet u een bestand maken dat eindigt op .module.css.

Maak bijvoorbeeld een bestand met de naam App.module.css en voeg de volgende CSS-stijlen toe:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

Importeer vervolgens CSS Modules in het bestand src/App.js:

import React, { useState } from 'react';
import styles from './App.module.css'; // Importeer CSS Modules

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* Gebruik het styles object om naar CSS klassen te verwijzen */}
      

# Teller

      Huidige telling: {count}

      +
      -
    
  );
}

export default App;

Gebruik een normaal CSS bestand:

Je kunt ook een normaal CSS bestand gebruiken om globale stijlen te definiëren. In het src/index.css bestand kun je globale stijlen definiëren.

Bijvoorbeeld, voeg de volgende CSS stijl toe:

body {
  font-family: sans-serif;
}

Deze stijl zal worden toegepast op het body element van de hele applicatie.

Volgende stappen

Proficiat, je hebt je eerste React applicatie voltooid! Vervolgens kun je meer leren over React, bijvoorbeeld:

• Component communicatie: Leer hoe je verschillende componenten met elkaar kunt laten communiceren.
• Formulier verwerking: Leer hoe je formulieren kunt maken en verwerken.
• Routing: Leer hoe je React Router kunt gebruiken om een applicatie met meerdere pagina's te maken.
• Redux of Context API: Leer hoe je de status van de applicatie kunt beheren.
• Hooks: Krijg een dieper inzicht in React Hooks, zoals useEffect, useContext, enz.

Onthoud dat React een technologie is die constant oefening en studie vereist. Veel plezier met leren!