Examenvoorbereiding (portfolio maken)
Keuzedeel Frontend Development
Onderdelen in deze les
Keuzedeel Frontend Development
Planning
Status rapport (oefen)examens (5 min)
Uitleg opdracht (5 min)
Aan de slag (60 min)
Afsluiting (10 min)
Statusrapport
Inleveren oefenexamen
vorige week
Statusrapport
Ik wil meedoen aan het examen van 26 juni
Ja!
Nee, ik heb uitstelgedrag*
*Na de zomervakantie zijn er in principe geen lessen FE meer, alleen de NexEd module
Overzicht keuzedeel
Kickoff & voorbereiding
Introductie React + React Apps
Components, sub-components en properties
Component Libraries
Search engine optimization
React Router
Examenvoorbereiding
Portfolio maken
Doelen van vandaag
Een React-app structureren met meerdere pagina’s
Navigatie maken met React Router
React Bootstrap gebruiken voor layout en componenten
Waarom een portfolio?
Een portfolio laat zien:
Wie je bent als developer
Welke projecten je hebt gemaakt
Welke technieken je beheerst
Hoe je code en design combineert
Bij het examen moet je kunnen laten zien dat je frontend-keuzes bewust maakt.
Wat ga je bouwen?
Homepagina
Over mij pagina*
Projectenpagina*
Contactpagina*
Navigatiebalk
Responsive layout
* 1 verplicht, 2 optioneel - zelf kiezen
Examenkoppeling
Componentgericht werken
Herbruikbare UI
Routing tussen pagina’s
Responsive design
Structuur en onderhoudbaarheid
Keuzes uitleggen
Dit zijn vaardigheden die terugkomen bij frontend development.
Even ophalen
React componenten
Props
State
JSX
Router
SCSS styling
Bestandsstructuur
Wat is het verschil tussen
een component en een pagina?
React Router
Meerdere paginas in dezelfde React-app.
/
/about
/projects
/contact
De pagina wordt gewisseld zonder dat de hele website
opnieuw laadt.
React Bootstrap
React Bootstrap geeft je kant-en-klare componenten, zoals:
Navbar
Container
Row
Col
Card
Button
Je gebruikt Bootstrap-styling, maar dan als React-componenten.
Eindresultaat van vandaag
Aan het einde van de les heb je:
Een werkende React portfolio-app
Een navigatiebalk
Minimaal twee pagina’s
Bootstrap layout
Minimaal drie projectkaarten
Een basis die je kunt uitbreiden
Projectstructuur
Samen starten
Aanmaken nieuw react project
Configureren Bootstrap
Opzetten Router
Maken nieuw React Project
Maken nieuw React Project
React
JavaScript
React Bootstrap
React Bootstrap
SCSS
Import
React Router
reactrouter.com
React Router
React Router
Terugblik
Vandaag heb je gewerkt aan:
Een eigen portfolio
React Router
React Bootstrap
Componentstructuur
Examenvoorbereiding
Afsluiting
Vragen?
Volgende week:
Nog meer SEO
Portfolio maken
the sequal
Planning
Terugblik (3 min)
Uitleg opdracht (5 min)
Aan de slag (60 min)
Afsluiting (10 min)
Doelen van vandaag
Aan het einde van de les kun je:
Routes maken in React
Navigatie maken met
NavLinkEen 404-pagina toevoegen
Per pagina een eigen titel en meta description instellen
Uitleggen waarom SEO belangrijk is
Terugblik
Portfolio website
React Bootstrap
Meerdere pagina’s
Navbar
SEO
Search Engine Optimization
Goede paginatitel
Duidelijke meta description
Logische headings
Goede URL’s
Alt-tekst bij afbeeldingen
Snelle en toegankelijke pagina’s
Waarom SEO bij React?
React-apps hebben vaak meerdere pagina’s in één app.
Zonder extra aandacht kunnen pagina’s allemaal dezelfde titel hebben, bijvoorbeeld: React App
Dat is niet professioneel.
Helmet
Met Helmet kun je per pagina de <head> aanpassen.
Voorbeelden:
Titel
Meta description
Meta keywords
Open Graph informatie
Helmet
Doelen van vandaag
Aan het einde van de les kun je:
Routes maken in React
Navigatie maken met
NavLinkEen 404-pagina toevoegen
Per pagina een eigen titel en meta description instellen
Uitleggen waarom SEO belangrijk is
Afsluiting
Vragen?
Volgende week:
?
