Examenvoorbereiding (eigenaarschap)

• newEditor
• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

Keuzedeel Frontend Development

Leerdoelen

Na deze les kun je:

• uitleggen hoe een React-app is opgebouwd

• routing toepassen

• responsive design uitleggen

• SEO verbeteren met Helmet

• jouw examen-notities compleet maken

Als je morgen examen had…

waar ben je dan nog onzeker over?

Overzicht keuzedeel

• Kickoff & voorbereiding

• Introductie React + React Apps

• Components, sub-components en properties

• Component Libraries

• Search engine optimization

• React Router

• Examenvoorbereiding

Examen

• Vrijdag (aanstande) 26 juni om 09:00 beginnen

  • dus 8:45 aanwezig!

Planning

• Opfirssen theorie (20 min)

• Individuele notities maken (10 min)

• Notities vergelijken (15 min)

• Tips & tricks (25 min)

• Afsluiting (10 min)

React

Wat is React eigenlijk?

A

Database

B

JavaScript library voor UI

C

CSS Framework

D

Backend framework

React basics

• Components

• JSX

• Props

• State (globaal begrip)

• Events

React basics

• Components

• JSX

• Props

• State (globaal begrip)

• Events

Welke 3 zijn het belangrijkst voor het examen?

Structuur

Waar gebruik je main.jsx voor?

A

Styling

B

App opzetten

C

API calls

D

SEO vastleggen

React Router

Belangrijke onderdelen:

• BrowserRouter

• Routes

• Route

• Link / NavLink

React Router

Wat gebeurt hier?

Wat is beter voor navigatie?

A

<a> element

B

<Link> element

Responsiveness

Wat betekent responsive?

Responsive tools

React Bootstrap

• grid (<Row> en <Col>)

• breakpoints

• flex

• spacing classes

Wat doet dit?

A

altijd 50%

B

mobiel 100%, desktop 50%

C

altijd 100%

Search Engine

Optimization

Waarom is SEO belangrijk?

React Helmet

Wat verbeteren we hiermee?

SEO checklist

Examen-proof:

• goede titels

• meta description

• headings

• alt tags

• sterk advies

Opdracht

Maak jouw examen cheatsheet

Verdeel blad in 4 blokken:

• React

• Router

• Responsive

• SEO

Schrijf per blok:

• belangrijkste begrippen

• code snippets

• valkuilen

10

minute

00

second

add30s

Uitwisseling met je buur

Bespreek elkaars notities a.d.h.v. de volgende vragen:

• Wat mis ik?

• Wat heb jij dat ik niet heb?

• Welke fouten zie je?

15

minute

00

second

add30s

Tips, tricks & valkuilen

Wat is fout?

Wat is fout?

href moet to zijn

Wat is de juiste volgorde van het project maken?

1

selecteer JS

2

npm create vite@latest <naam>

3

npm install

4

npm run dev

5

selecteer React

SEO documentatie

Technische SEO

• Wat heb ik gedaan?

• Waarom verbetert het de SEO?

Advies

• Wat kan de klant zelf doen?

• Waarom verbetert dat de SEO?

Wat te doen als ik vastloop?

• Ga niet te lang aan kleine dingen werken

• Maak een andere pagina

• Focus niet op perfectionisme, maar op functionaliteit

GitHub SSH-key

• Login op github

• Settings -> SSH & GPG Keys

• Test of je bestaande key werkt

  • of maak een nieuw: ssh-keygen -t rsa -b 4096

Vragen?