Skip to main content

Inleiding

React

React is een framework of library (een verzameling van tools) waarmee je een userinterface kan maken. React is dus een front end taal.

Q: PHP en Yii zijn back-end talen. Weet je het verschil nog?

frontend-backend.jpgimage-1657984534973.png

Juist! Front-end fraai je op je eigen PC/Laptop in de browser en Back-end draait op een server en stuurt de resultaten naar jouw browser.

Q; PHP draait op de server? Hmm mijn PHP draait toch op XAMPP op mijn Laptop?

Ja dat is zo. Omdat wij niet allemaal een server hebben, gebruiken wij XAMPP. XAMPP (of soortgelijke programma's) doet alsof zij een server zijn. Dat heet emulatie. XAMPP emuleert dus een server.

De meeste web-applicaties zijn een combinatie van front-end en back-end componenten. Wij zullen in deze module ook een combinatie gebuiken.

Wij gaan een quiz applicatie maken op de front-end met REACT en later gaan we een back-end maken waarin we de quizvragen kunnen bijhouden. Via een REST API gaan we dan vanuit REACT de back-end server benaderen. De backend maken we in Yii/PHP.

Een REST API is een standaard manier waarop een programmagegevens kan uitwisselen met een ander programma. Het word heel veel gebruikt in de webwereld.

Wat ga je leren?

Wat je gaat leren is een introductie in REACT waarbij we een volledig werkende applicatie gaan maken.

Daarnaast gaan we leren hoe we via een REST API gegevens uit een Yii/PHP applicatie kunnen halen.

Wat moet je weten?

Je kunt omgaan met Visual Studio Code en de terminal en je weet hoe je software kan installeren. Je weet hoe je in de VCS terminal commando's kan geven. Dit wordt ook in de Yii module behandeld.

Voor het laatste deel van deze module heb je kennis nodig van Yii. Je hebt de Yii module dus gedaan.

Je kent verder HTML, CSS CSS  en JavaScript (liefst ES6 maar ES5 is ook goed).

Kijk nu de volgende video (60 seconden) in LinkedIn Learning en beantwoord de vragen in de Quiz.

https://www.linkedin.com/learning/learning-react-js-5/what-is-react?u=84048860  (Links to an external site.)

Note

De hele LinkedIn cursus waar deze video bij hoort, duurt één uur en is ook een goede introductie op React. Let wel op dat in deze video gebruik wordt gemaakt van React Hooks. Dat doen wij in deze module niet. In deze module gaan we met de tijd mee en gebruiken we OOP (classes). Hierdoor hoeven we geen gebruik te maken van relatief lastige React Hooks. Evengoed kan ik de LinkedIn cursus wel aanraden als je meer van React wilt weten.