Summary  
This chapter explains different methods for organizing and applying CSS styles to React components—inline style objects, external CSS files with class names, and an overview of common styling libraries.  

General domain of usage  
User interface styling in front-end web applications

React dwingt geen enkele manier af om componenten te stylen. In plaats daarvan biedt het flexibiliteit om te kiezen hoe stijlen worden toegepast, afhankelijk van de behoeften van je project.

Styling in React is nog steeds gebaseerd op **CSS**. Het verschil zit in **hoe stijlen worden georganiseerd en toegepast** op componenten.

In deze cursus ligt de focus op twee kernbenaderingen voor styling:
- Inline stijlen: stijlen worden direct toegepast op elementen met behulp van het `style`-attribuut en JavaScript-objecten;
- Externe CSS-bestanden: stijlen worden geschreven in traditionele CSS-bestanden en toegepast via class-namen.

### Styling met bibliotheken en frameworks
In praktijkprojecten worden React-applicaties vaak gestyled met **derde partij bibliotheken** en frameworks. Enkele populaire opties zijn:
- CSS Modules;
- Styled Components;
- Emotion;
- Tailwind CSS;
- Material UI (MUI);
- Chakra UI.

Deze tools bieden geavanceerde functies zoals gescope stijlen, design systemen en utility-gebaseerde styling.

### Waarom We Ze Hier Niet Behandelen
Hoewel krachtig, voegen stylingbibliotheken **extra complexiteit** toe en introduceren ze nieuwe concepten buiten de kern van React.
In deze cursus is het doel om een sterke basis te leggen, te begrijpen hoe React-componenten werken en onnodige afleidingen in een vroeg stadium te vermijden.



Zodra je vertrouwd bent met de basis van React, wordt het veel eenvoudiger om een stylingbibliotheek te leren.

Opmerking

Ontdek de basisprincipes van het bouwen van gebruikersinterfaces met React. Focus op componenten, JSX, gegevensstroom, toestand en neveneffecten die worden gebruikt in alledaagse React-toepassingen.

Ontdek wat React is en hoe het gebruikersinterfaces rendert. Focus op componenten, JSX-syntaxis en het weergeven van elementen op het scherm.

Verdieping in het doorgeven van gegevens tussen componenten en het aansturen van de UI-uitvoer. Focus op props, conditionele weergave en het weergeven van lijsten met gegevens.

Leer hoe gebruikersinteracties en externe gegevens de gebruikersinterface in de loop van de tijd veranderen. Focus op het beheren van toestand en het afhandelen van neveneffecten met React hooks.

Ontdek gangbare methoden om React-componenten te stylen. Focus op het toepassen van stijlen met inline stijlen en externe CSS.

Leer hoe u een React-project uitvoert en de structuur ervan begrijpt. Focus op het starten van een project met Vite en het navigeren door de projectbestanden.

Stijlopties in React

Styling met bibliotheken en frameworks

Waarom We Ze Hier Niet Behandelen