React basis componenten

Wat is een React-component?

Een React-component is een herbruikbaar stuk code dat de gebruikersinterface beschrijft. Het kan een functie of een klasse zijn en ontvangt props om gegevens te verwerken.

Verschil tussen functionele en klassecomponenten?

Functionele componenten zijn stateless en eenvoudiger. Klassecomponenten kunnen state en lifecycle methods bevatten, maar zijn complexer in structuur.

Wat is 'JSX'?

JSX is een syntactische uitbreiding van JavaScript die het mogelijk maakt om HTML-achtige syntaxis te gebruiken binnen JavaScript. Het maakt React-componenten leesbaarder.

Wat doet de render-methode?

De render-methode retourneert de JSX die de component moet weergeven op het scherm. Dit is de basis van hoe React de UI bouwt.

Vul de lege ruimte in: een component kan _____ zijn.

Een component kan stateless of stateful zijn.

Wat zijn props?

Props zijn parameters die aan componenten worden doorgegeven. Ze stellen componenten in staat om gegevens van ouders te ontvangen en te gebruiken.

Wat is een fragment in React?

Een fragment is een manier om meerdere elementen te groeperen zonder een extra DOM-knooppunt toe te voegen. Het helpt bij het optimaliseren van de structuur.

Stelling: Alle componenten in React moeten een unieke sleutel hebben.

Waar, omdat sleutels helpen React te identificeren welke items zijn gewijzigd, toegevoegd of verwijderd in lijsten.

Wat is een 'Controlled Component'?

Een controlled component is een component waarvan de invoerwaarden worden beheerd door de state van de React-component. Het maakt het gemakkelijker om gegevens te controleren.

Wat is de rol van 'defaultProps'?

defaultProps definieert standaardwaarden voor props. Dit is nuttig wanneer props niet worden doorgegeven, zodat de component toch correct functioneert.

Wat is de component lifecycle?

De component lifecycle beschrijft de verschillende fases van een component, zoals het aanmaken, bijwerken en verwijderen. Dit helpt bij het optimaliseren van prestaties.

Wat doet 'setState'?

setState is een methode waarmee de state van een component kan worden bijgewerkt. Dit zorgt ervoor dat de UI opnieuw wordt gerenderd met de nieuwe gegevens.

Wat is 'prop drilling'?

Prop drilling is het proces waarbij props door verschillende niveaus van componenten worden doorgegeven, zelfs als sommige componenten deze niet gebruiken.

Wat is een HOC (Higher Order Component)?

Een HOC is een functie die een component als parameter neemt en een nieuwe component teruggeeft. Dit wordt gebruikt voor herbruikbare logica.

Geef een voorbeeld van een eenvoudige component.

function Groet() { return <h1>Hallo Wereld!</h1>; } Dit is een functionele component die een begroeting weergeeft.

Wat is de Context API?

De Context API is een manier om gegevens door de componentenboom te delen zonder props handmatig door te geven. Dit vereenvoudigt het beheer van globale staten.

Wat zijn props in React?

Props zijn gegevens die van een bovenliggend component naar een onderliggend component worden doorgegeven. Ze zijn read-only in het ontvangende component.

Wat is state in React?

State is een object dat een component kan gebruiken om gegevens op te slaan die kunnen veranderen. Het wordt lokaal binnen een component beheerd.

Waarvoor worden props gebruikt?

Props worden gebruikt om gegevens te delen, zoals: - Componentconfiguraties - Gebruikersinformatie - Functieaanroepen

Waarvoor wordt state gebruikt?

State wordt gebruikt om: - Componentgedrag te beheren - De gebruikersinterface dynamisch bij te werken - Gegevens op te slaan die mutabel zijn

Wat gebeurt er als je props verandert?

Props kunnen niet worden veranderd door het ontvangende component. Ze zijn immutable. Verander de props in het bovenliggende component om updates te zien.

True or False: State is zichtbaar voor andere componenten.

False. State is enkel zichtbaar binnen de component waar het gedefinieerd is, tenzij het wordt doorgegeven via props.

Fill in the blank: Props zijn __________.

Props zijn immutable.

Geef een voorbeeld van state gebruik.

Bijvoorbeeld, een tellercomponent: ```jsx const [count, setCount] = useState(0); ```

Wat is het verschil tussen props en state?

Props zijn statisch en worden van boven naar beneden doorgegeven. State is dynamisch en lokaal voor het component.

Hoe update je state?

Gebruik de setState functie. Bijvoorbeeld: ```jsx setState({ count: newCount }); ```

Wanneer gebruik je props?

Gebruik props wanneer je gegevens van een oudercomponent naar een kindcomponent wilt doorgeven zonder dat de kindcomponent deze kan wijzigen.

Wat is een veelvoorkomende toepassing van props?

Props worden vaak gebruikt voor het configureren van componenten, zoals het instellen van een titel of een afbeelding.

Wat zijn Lifecycle Methods?

Lifecycle Methods zijn functies die de verschillende fasen van een React-component definiëren en beheren, van creatie tot verwijdering.

componentDidMount() → toepassing?

Deze methode wordt aangeroepen na de eerste render. Gebruik het om API-aanroepen te doen of initialisatie van externe bibliotheken.

componentWillUnmount() → functie?

Deze methode wordt gebruikt om schoonmaakwerkzaamheden te verrichten voordat een component uit de DOM wordt verwijdert, zoals het annuleren van timers.

Waarvoor dient componentDidUpdate()?

Het wordt aangeroepen na een update van een component. Gebruik het om te reageren op wijzigingen in de props of state.

True or False: componentWillMount() is aanbevolen.

False: componentWillMount() is verouderd en het gebruik ervan wordt niet aanbevolen in nieuwe React-versies.

componentDidCatch() → functie?

Deze methode vangt fouten in de render-methode van een component, wat nuttig is voor foutafhandeling in de UI.

Invullen: componentWillReceiveProps() is ______.

verouderd en moet worden vermeden. Gebruik componentDidUpdate() in plaats daarvan.

Vergelijk componentDidMount() en componentWillUnmount().

componentDidMount() wordt gebruikt om initialisatie uit te voeren, terwijl componentWillUnmount() wordt gebruikt voor opschoning.

Oorzaak → Effect: componentDidUpdate()?

Als een component updates ontvangt, kan componentDidUpdate() extra logica uitvoeren of de DOM bijwerken.

Wat doet getDerivedStateFromProps()?

Het is een statische methode die de state kan aanpassen op basis van veranderingen in props, voor elke render.

Voorbeeld: gebruik van componentWillUpdate().

Het is verouderd, maar vroeger gebruikt om voorbereidingen te treffen vóór een update, zoals het afbreken van API-aanroepen.

Wat is de rol van de levenscyclusmethoden?

Ze bieden controle over hoe en wanneer een component reageert op veranderingen in de applicatiestaat en levenscyclus.

Wat is een gecontroleerd formulier in React?

Een gecontroleerd formulier is een formulier waarvan de invoerwaarden worden beheerd door de React state. Dit betekent dat elke wijziging in het invoerveld de state bijwerkt.

Vul de lege ruimte in: Een ________ is een manier om gebruikersinvoer te verzamelen.

formuliertype

Hoe verwerk je een formulierinvoer in React?

Gebruik de onChange gebeurtenis om de state bij te werken bij elke invoerwijziging. Bijvoorbeeld: <input type='text' onChange={handleChange} />

Waarvoor dient de onSubmit gebeurtenis?

De onSubmit gebeurtenis wordt gebruikt om acties te ondernemen wanneer een formulier wordt ingediend, bijvoorbeeld het valideren en verzenden van gegevens.

True or False: Een niet-gecontroleerd formulier heeft geen state.

True. Een niet-gecontroleerd formulier beheert zijn invoerwaarden niet via React state, maar via de DOM.

Vergelijk gecontroleerde en niet-gecontroleerde formulieren.

Gecontroleerd: React state beheert invoer. Niet-gecontroleerd: Directe DOM-invoer. - Gecontroleerd: Betere controle. - Niet-gecontroleerd: Simpeler voor eenvoudige formulieren.

Wat is een input field in React?

Een input field is een HTML-element dat gebruikersinvoer mogelijk maakt, zoals tekst, e-mail of wachtwoorden. Voorbeeld: <input type='text' />

Oorzaak → Effect: Een formulier wordt ingediend zonder validatie.

Effect: De gebruikersgegevens kunnen onjuist of incompleet zijn, wat kan leiden tot fouten bij gegevensverwerking.