Frontend-ontwikkelaar - cursus 47.600 wrijven. van Loft School, opleiding 3 maanden, Datum 28 november 2023.

Vue.js geavanceerde webontwikkeling

Week 1 - Werkstroom

— We ontmoeten de mentor en de groep.
— Met behulp van webpack-assemblage creëren we de geselecteerde lay-out voor het uiteindelijke project.
— We plaatsen het resultaat op Github en leggen het ter verificatie voor aan de mentor.

Opening van de cursus
1. Hoe de training verloopt (01:09:37)

Vue. Belangrijkste kenmerken

1. Theorie (04:49)
2. Hallo wereld (06:20)
3. Gebeurtenisafhandeling (02:38)
4. Meerdere evenementen afhandelen (01:19)
5. Dynamische waarden (01:30)
6. Inleiding tot richtlijnen (05:40)
7. Verkorte richtlijnen (00:37)
8. Methoden met parameters (01:36)
9. Gebeurtenismodificatoren (08:52)
10. Berekende eigenschappen (10:50)
11. Kijkers (06:02)
12. Werken met klassen (03:37)
13. Werken met CSS-eigenschappen (02:49)
14. Toegang tot DOM-elementen (03:50)
15. Voorwaardelijke weergave (04:46)
16. Lijsten renderen (05:12)
17. Een component maken (04:16)
18. Lokale componenten (02:44)
19. Gegevensreactiviteit (04:35)
20. Componenteigenschappen (03:52)
21. Slots (04:37)
22. Slots met reikwijdte (04:52)
23. Aangepaste evenementen (04:27)
24. Teleports (02:53)

Vue. Componenten met één bestand
1. Het project installeren. VUE-CLI (09:22)
2. Component met één bestand (03:18)
3. Werken met stijlen (07:02)
4. Attributen en handlers doorgeven (02:53)
5. Individuele bestanden (01:26)
6. Validatie van componenteigenschappen (07:35)
7. Validatie van gebruikersgebeurtenissen (02:01)
8. Tweerichtingsdatacommunicatie (04:11)
9. Aangepast v-model (05:51)
10. Levenscyclushaken (07:08)
11. Onzuiverheden (04:40)

NPM
1. Wat is npm? (05:50)
2. NPM installeren en bijwerken (02:33)
3. Hulp bij npm (01:28)
4. Pakketten zoeken en installeren (04:24)
5. Pakketafhankelijkheden (02:09)
6. Manifestbestand package.json (03:02)
7. Pakketten verwijderen en bijwerken (03:02)
8. afhankelijkheden en devDependencies (01:51)
9. Webpack en npx (04:04)
10. npm-scripts (04:02)
11. npm, git en github (02:40)

Garen
1. Garen (07:07)

Webpakket. Basisprincipes
1. Theorie (01:09)
2. Minimale configuratie en lancering (04:41)
3. Bestandsnaamgeving (02:34)
4. Laders (04:28)
5. Ontwikkelaarsserver (02:43)
6. Plug-ins (02:34)
7. Modules zoeken (03:18)
8. Sorskaarten (03:17)
9. Ontwikkelaar et al (02:42)
10. Soorten modules (03:00)
11. Minimale montage (05:30)

ESLint. Configuratieoverzicht
1. Introductie (01:26)
2. Installatie en lancering (03:10)
3. Bugfixes (02:04)
4. Configuratie (05:21)
5. Uitvoerformaat (00:52)

Figma voor lay-outontwerper
1. Figma. Interface (04:37)
2. Figma. Projectorganisatie (01:32)

Flexbox
1. Introductie (00:45)
2. Flexcontainer (01:43)
3. Uitlijning van de hoofdas (01:37)
4. Dwarsasuitlijning (01:50)
5. Eén enkel element uitlijnen (01:09)
6. Flexelement - container (00:53)
7. Asrichting (03:18)
8. Meerlijnscontainer (02:54)
9. Inhoud met meerdere regels uitlijnen (01:25)
10. Verhoudingen (02:46)
11. Compressieverhoudingen (01:24)
12. Basismaat (04:02)
13. Volgorde van elementen (02:40)

GIT
1. Introductie (07:03)
2. Aan de slag met Git (03:01)
3. Een nieuwe repository aanmaken (01:09)
4. Bestanden toevoegen aan de Git-index (controlegebied) (06:49)
5. Een commit aanmaken (07:17)
6. Navigatie vastleggen. Wijzigingen annuleren (12:10)
7. Typische Git-cyclus (03:34)
8. Vertakking in Git (11:27)
9. Conflicten bij het samenvoegen van vestigingen (06:06)
10. Tijdelijk (zonder verplichting) gegevens opslaan (05:25)
11. Werken met externe opslagplaatsen (20:04)
12. GitHub-pagina's gebruiken om projecten te hosten (04:31)

Vue. Werkplaats #1
1. Start van het project (05:24)
2. Koptekstcomponent (04:13)
3. Pictogramcomponent (05:06)
4. Een lijst met componenten weergeven (02:56)
5. Schakelcomponent (03:19)

Week 2 - Vue.js

— Wij maken de indeling adaptief.
— We zullen het blok “Vaardigheden” in Vue.js implementeren.
— We zullen het blok “Mijn projecten” in Vue.js implementeren.
— We implementeren het blok “Slider for reviews” met behulp van de Vue.js-plug-in.

Verhalenboek
1. Installatie (01:56) 
2. Eerste verhaal (04:35)
3. Een component aansluiten (01:24)
4. Configuratie-uitbreiding (04:26)
5. Algemene stijlen (02:08)
6. Verhaal voor het onderdeel (05:23)
7. CDD (04:16)
8. Een onderdeel maken (02:28)
9. Een onderdeel toepassen (02:29)
10. Gebeurtenisregistratie (03:29)
11. Achtergronden-add-on (01:41)
12. Extra knoppen (02:28)
13. Add-onbron (02:17)
14. Conclusie (01:11)

JavaScript - ES6
1. Stringinterpolatie (07:39)
2. Vereenvoudiging van methodebeschrijvingen (13:35)
3. Standaardinstellingen (30:08)
4. Destructurerende opdracht: objecten (07:30)
5. Nieuwe functies en oude browsers (13:07)

Asynchronie in JavaScript
1. Timers (23:44)
2. Foto's laden (22:21)
3. Beloften (36:29)
4. Ajax (32:28)

Axios. Zoekbibliotheek
1. Introductie (02:23)
2. Een verzoek verzenden (02:12)
3. Configuratieoverzicht (04:30)
4. Verzoektekst (01:43)
5. Standaardinstellingen (01:38)
6. Onderscheppers (02:11)
7. Diensten (02:33)
8. asynchroon wachten (01:18)

Vue. Werkplaats #2
1. Voorbereiding (02:39)
2. Een component aansluiten (02:16)
3. Stuuruitgang (02:38)
4. Voortgangscomponent (05:09)
5. Verzoek aan de server (06:38)
6. Gegevensuitvoer (05:55)

Week 3 - Native JavaScript

— We zijn het beheerderspaneel aan het maken.
— We bestuderen Storybook en passen het toe in ons project.
— Wij voeren de noodzakelijke verwerking (validatie) uit van projectformulieren.

VueRouter. Routering in de browser
1. Introductie (04:31)
2. Linkbuilding (02:41)
3. Softwarenavigatie (02:35)
4. Padparameters (04:42)
5. Parameters als eigenschappen (00:49)
6. Geavanceerde opties en 404 (03:29)
7. Geneste routes (03:23)
8. Activiteitenlessen (02:37)
9. Verschillende routerweergaven (01:08)
10. Dynamische import (02:00)
11. Mooie URL (02:16)

Vuex. Staatsmanager
1. Introductie (01:13)
2. Verbinding (02:30)
3. Actie (02:27)
4. Mutaties (02:16)
5. Getters (02:02)
6. Toepassing in de praktijk (08:07)
7. Assistent-functies (02:59)
8. Modules (05:18)
9. Dynamische modules (01:38)
Vraag antwoord

Vue. Werkplaats #3
1. Indeling (04:33)
2. Gegevensuitvoer (02:42)
3. Voorbereiden op animatie (02:14)
4. Knopweergave (03:45)
5. Extra inhoud laden (11:38)
6. Dia tonen na overgang (02:17)

Week 4 - Vue.js, SPA

— We implementeren SPA in het beheerdersdashboard.
— We bestuderen het werken met gegevens via de applicatieopslag
— We gebruiken Ajax om met de API te communiceren en client-server-interacties op te zetten.

Autorisatie. Munten
1. Autorisatietypen (04:20)
2. GitHub OAuth (01:42)
3. Een GitHub-applicatie maken (02:28)
4. Een token ontvangen (08:38)
5. Gegevens opslaan in code (01:46)
6. Routebeveiliging (04:13)

Vue. Werkplaats #4
1. Voorbereiding (01:33)
2. Een actie aanmaken (02:30)
3. Downloadstatus (04:01)
4. Verzoek (02:27)
5. Duplicaten verwijderen (03:29)
6. Routebeveiliging (03:23)
7. Uitloggen (00:51)

Week 5 - Oefenen

— We geven de opgeslagen gegevens weer van het beheerdersdashboard naar de landingspagina.
— We testen de componenten.
— Groepswerk aan een project met een mentor.

Vue.js. Samenstelling-API
1. Introductie (01:29)
2. Algemeen voorbeeld (03:57)
3. Liedfunctie (01:51)
4. Reactieve functie (00:55)
5. toRef-functie (01:35)
6. toRefs-functie (00:58)
7. Berekende eigenschappen (00:56)
8. horlogefunctie (01:41)
9. watchEffect-functie (03:14)
10. alleen-lezen-functie (00:40)
11. Testfuncties (02:30)
12. unref-functie (01:27)
13. Levenscyclushaken (00:58)
14. Voorbeeld. Projectoverzicht (00:53)
15. Voorbeeld. Laadfunctionaliteit (01:20)
16. Voorbeeld. Categorieën (02:20)
17. Voorbeeld. Eerste filtering (02:46)
18. Voorbeeld. Filterschakeling (02:11)
19. Voorbeeld. Overige filterfuncties (02:03)
20. Voorbeeld. Sorteermethode (03:05)
JS-code testen
1. Introductie (16:05)
2. Scherts (15:47)
3. De voordelen van testen (09:01)
4. Dekking (10:02)

Vue.js. Testen van componenten
1. Pakketten instellen (04:39)
2. Componentverpakking (04:13)
3. Wat te testen (02:48)
4. Eerste proef (05:25)
5. De emissiegebeurtenis controleren (03:44)
6. Eigendommen overdragen (02:58)
7. Werken met formulierelementen (05:42)
8. Algemene instellingen (01:15)
9. Moki (05:04)
10. Bibliotheken verbinden (02:32)
11. Actietesten (03:26)
12. De winkel testen (02:53)
13. Testen met foto's (03:08)

Testen. Moki
1. Een mockup maken (02:39)
2. Werken met argumenten (01:39)
3. Retourwaarde (02:57)
4. Modules (04:24)
5. Timers (02:05)

Vue. Werkplaats #5
1. Eenvoudig onderdeel (03:03)
2. Onderdeel met winkel (05:21)
3. Testen. Voorbereiding (03:20)
4. Testen. Wisselaar (02:38)
5. Testen. Problemen (05:08)

Week 6 - Het project voltooien

— We zijn het project aan het afronden.
— We leggen het project ter beoordeling voor aan mentoren.
— Het beoordelen van diploma's.

Hoe u een baan in de IT kunt krijgen: tips en trucs
1. Hoe vind je een baan in de IT? Zoektocht, sollicitatiegesprek en proeftijd (42:21)
2. Hoe vind je werk op afstand en freelance-bestellingen? (20:12)
3. Eerste baan in de IT - hoe gedraag je je? Stages, officiële banen en werk “voor voedsel” (14:11)
4. Hoe de proeftijd doorkomen? (27:10)
5. Hoe u zich kunt voorbereiden op een sollicitatiegesprek bij een FAANG-bedrijf (08:52)
6. Het proces van het laden van een webpagina (25:19)
7. Interview met programmeur - alles wat u moet weten (01:24:07)
8. Een probleem oplossen uit een interview met een programmeur (19:36)
9. Interview met frontend-ontwikkelaar (01:37:17)

React.js-ontwikkeling van webapplicaties

Week 1 - Inleiding tot React.js

— We maken kennis met het cursusteam en de klasgenoten.
- JSX en virtuele DOM leren in React.
— We overwegen de componentbenadering en methoden voor gegevensoverdracht.

Kennis
1. Cursusopening (05:41)

Ik reageer.js
1. Wat is Reageren (07:05)
2. Virtuele DOM (02:46)
3. JSX (06:10)
4. Renderen met voorwaarden (05:11)
5. Werken met lijsten (02:45)
6. Componenten (02:41)
7. Rekwisieten (01:45)
8. Staat (06:45)
9. Evenementen (02:26)
10. Reageer Ontwikkeltools (03:58)

II React.js
1. Levenscyclusmethoden (05:19)
2. Componenten - functies (01:29)
3. Puur onderdeel (02:54)
4. Synthetische evenementen (01:42)
5. Werken met formulieren (02:51)
6. Foutafhandeling (01:39)

Analyse van taken #1
1. Workshop #1 (30:36)

Week 2 - React.js-patronen, testen

— We bestuderen componenten, elementen en instanties van de componentklasse.
— We houden rekening met de Recompose-bibliotheek, hoogwaardige componenten en Render Props-patronen.
— We begrijpen de voordelen van tests, bestuderen Jest, Enzyme, Snapshots.

III Reageren
1. Inleiding (01:43)
2. PropTypes (10:18)
3. Context (05:19)
4. Ref. (05:18)
5. Portalen (05:02)
6. Haken (10:42)

IV React.js
1. Componenten van hoge orde (HOC's) - Componenten van hogere orde (10:33)
2. Ref-doorsturen (HOC's) (04:31)
3. Render rekwisietenpatroon (05:25)
4. HOK-bibliotheek opnieuw samenstellen (10:32)
5. Profilering (04:02)

Testen
1. Inleiding (05:06)
2. Testloper (02:51)
3. DSL testen (08:41)
4. Enzym (06:57)
5. Momentopnamen (03:09)
6. Sagen testen (05:01)
7. Reageertestbibliotheek (06:32)

Analyse van taken #2
1. Workshop #2 (27:54)

Week 3 - Redux, routering

— We bestuderen routering: eenvoudige routering, routering met Switch en geneste routering.
— Kennismaken met de Redux-bibliotheek: basisconcepten en concepten van Store, Actions, Reducers, React-redux.
— Middleware wordt beschouwd als een manier om met Sideeffect te werken.

Routering in de browser
1. Geschiedenis-API (02:48)
2. Eenvoudige routering (05:39)
3. Routering vanaf Switch (04:16)
4. Geneste routing (05:32)
5. Privéroute (04:39)

Ik Redux
1. Inleiding (04:07)
2. Winkel (05:03)
3. Acties (02:17)
4. Verloopstukken (07:56)
5. React-redux (03:26)

II Redux
1. Inleiding (03:11)
2. CreateActions (redux-acties) (09:13)
3. Middleware (07:54)
4. Acties afhandelen (05:52)
5. Keuzeschakelaars (06:17)
6. Opnieuw selecteren (04:49)
7. Eenden (06:56)

Analyse van taken #3
1. Workshop #3 (39:13)

Week 4 - Redux-saga

— We bestuderen de Redux-saga-bibliotheek. Herhaalgenerator*-functies. Laten we leren hoe we ze parallel kunnen uitvoeren.
— Laten we eens kijken naar de Take-methode. Laten we Select bestuderen als een manier om gegevens uit de Store te halen.
— We kijken naar manieren om een ​​React-applicatie vorm te geven. We bestuderen de bibliotheken ClassNames, StyledComponents, BrowserList, MaterialUI.

I Redux-saga
1. Inleiding (00:57)
2. Overzicht (02:08)
3. Generatoren (04:11)
4. Sagen toevoegen (02:07)
5. Reageer op acties (03:53)
6. Functielanceringen (02:06)

II Redux-saga
1. Inleiding (00:27)
2. Effecten parallel uitvoeren (03:41)
3. Van kracht (02:45)
4. Effect selecteren (02:04)
5. Effecten annuleren (04:05)

Werken met stijlen
1. Inleiding (01:34)
2. CRA-stijlen (05:21)
3. Klasnamen (06:32)
4. StyledComponenten (07:11)
5. BrowserLijst (01:37)
6. Materiaal-UI (08:13)

Analyse van taken #4
1. Workshop #4 (09:55)

Week 5 – Formulieren, CI & DI & Klantfoutafhandeling

— We overwegen om met formulieren te werken met behulp van de Formik-, Redux Forms- en React Final Form-bibliotheken.
— We overwegen methoden om de kwaliteit van de productiecode te garanderen. We analyseren tools als: Husky, TravisCI, HerokuNow.
— We bestuderen een reeks nuttige bibliotheken voor ontwikkeling (Storybook, RamdaJS, Axios).
— We overwegen TypeScript.

Werken met formulieren
1. Inleiding (05:07)
2. Formik (08:51)
3. Redux-formulier (06:22)
4. Reageer definitief formulier (06:36)

Foutafhandeling van CI & DI & Client
1. Inleiding (05:07)
2. Husky (02:32)
3. CI met TravisCI (03:32)
4. Implementeren in heroku (04:57)
5. Rolbeugel (02:00)

Een reeks nuttige bibliotheken voor ontwikkeling
1. Verhalenboek (05:32)
2. RamdaJS (04:47)
3. Axios (05:52)
4. Getypte tekst (09:31)

Analyse van taken #5
1. Workshop #5 (13:17)

Week 6 - Projectwerk

— We voltooien de aanvraag en sturen deze ter beoordeling.

Hoe u een baan in de IT kunt krijgen: tips en trucs
1. Hoe vind je een baan in de IT? Zoektocht, sollicitatiegesprek en proeftijd (42:21)
2. Hoe vind je werk op afstand en freelance-bestellingen? (20:12)
3. Eerste baan in de IT - hoe gedraag je je? Stages, officiële banen en werk “voor voedsel” (14:11)
4. Hoe de proeftijd doorkomen? (27:10)
5. Hoe u zich kunt voorbereiden op een sollicitatiegesprek bij een FAANG-bedrijf (08:52)
6. Het proces van het laden van een webpagina (25:19)
7. Interview met programmeur - alles wat u moet weten (01:24:07)
8. Een probleem oplossen uit een interview met een programmeur (19:36)
9. Interview met frontend-ontwikkelaar (01:37:17)