Wat is een Component?

Het idee achter React is dat je custom HTML tags maakt. React noemt zo'n custom HTML tag een component.

LEGO analogie:

Een component is als een LEGO blokje. Door verschillende blokken te combineren bouw je steeds grotere dingen:

  • Klein blokje → muur → kamer → huis → woonwijk

Je maakt dus in React kleine componenten, die door samen te werken steeds grotere componenten worden.

Je Eerste Component Maken

Stap 1: Components folder aanmaken

Maak in je src folder een nieuwe folder components (met kleine letter):

src/
├── components/       ← Nieuwe folder
│   └── Car.jsx      ← Nieuw component
├── App.jsx
├── main.jsx
└── index.css

Stap 2: Component bestand aanmaken

Maak in de components folder een bestand Car.jsx. Een component bestand begint altijd met een hoofdletter en heeft de extensie .jsx.

Stap 3: Component code schrijven

Een component maak je met een arrow function die begint met een hoofdletter:

// src/components/Car.jsx
const Car = () => {
  return <h1>Hi, I am a Car!</h1>;
};

export default Car;

VS Code shortcut: Type sfc en druk op Tab. Dit maakt automatisch een basis component aan!

Belangrijke regels:

  • Component begint altijd met hoofdletter
  • Vergeet niet export default onderaan

Component Gebruiken

Stap 1: Component importeren

Voordat je een component kunt gebruiken, moet je het eerst importeren:

// src/App.jsx
import Car from './components/Car';

Stap 2: Component renderen

Vervolgens kun je dit component gebruiken alsof het een HTML tag is:

// src/App.jsx
import Car from './components/Car';

function App() {
  return (
    <div>
      <Car />
    </div>
  );
}

export default App;

Dit zet het volgende op het scherm: Hi, I am a Car!

Meer Voorbeelden

// src/components/Welcome.jsx
const Welcome = () => {
  return <h2>Welkom op mijn website!</h2>;
};

export default Welcome;
// src/components/Button.jsx
const Button = () => {
  return <button>Klik hier</button>;
};

export default Button;
// src/App.jsx - Gebruik beide components
import Welcome from './components/Welcome';
import Button from './components/Button';

function App() {
  return (
    <div>
      <Welcome />
      <Button />
    </div>
  );
}

export default App;

Wat is JSX?

Je vraagt je misschien af: hoe is het mogelijk dat je HTML binnen JavaScript kan gebruiken?

Het antwoord is JSX: JSX is een "uitbreiding" op JavaScript die het mogelijk maakt HTML te gebruiken in JavaScript.

JSX = JavaScript + XML

JSX maakt React code leesbaarder. In plaats van React.createElement() schrijf je gewoon <div>!

Belangrijke Regels

  • Component namen beginnen ALTIJD met hoofdletter: Car, niet car
  • Een component geeft altijd iets terug met return
  • Je kunt maar 1 element teruggeven - gebruik <div> om meerdere elementen te groeperen
  • Components maak je met arrow functions: const MijnComponent = () => { }

Veelgemaakte Fouten

Fout - meerdere elementen zonder wrapper:

const MijnComponent = () => {
  return <h1>Titel</h1><p>Tekst</p>;
}

Goed - gebruik een div:

const MijnComponent = () => {
  return (
    <div>
      <h1>Titel</h1>
      <p>Tekst</p>
    </div>
  );
};

Fout - kleine letter:

const myComponent = () => {
  return <h1>Dit werkt niet</h1>;
};

Goed - hoofdletter:

const MyComponent = () => {
  return <h1>Dit werkt wel</h1>;
};