Frontend kūrėjas - kursas 47 600 rub. iš Lofto mokyklos, mokymai 3 mėn., Data 2023 m. lapkričio 28 d.

„Vue.js“ išplėstinis žiniatinklio kūrimas

1 savaitė – darbo eiga

– Susitinkame su mentoriumi ir grupe.
— Naudodami webpack surinkimą sukuriame pasirinktą galutinio projekto maketą.
– Paskelbiame rezultatą „Github“ ir pateikiame mentoriui patikrinti.

Kurso atidarymas
1. Kaip vyksta treniruotės (01:09:37)

Vue. Pagrindiniai bruožai
1. Teorija (04:49)
2. Sveikas pasaulis (06:20)
3. Renginių valdymas (02:38)
4. Kelių įvykių tvarkymas (01:19)

5. Dinaminės reikšmės (01:30)
6. Įvadas į direktyvas (05:40)
7. Sutrumpintos direktyvos (00:37)
8. Metodai su parametrais (01:36)
9. Įvykių modifikatoriai (08:52)
10. Apskaičiuotos ypatybės (10:50)
11. Stebėtojai (06:02)
12. Darbas su klasėmis (03:37)
13. Darbas su CSS ypatybėmis (02:49)
14. Prieiga prie DOM elementų (03:50)
15. Sąlyginis atvaizdavimas (04:46)
16. Atvaizdavimo sąrašai (05:12)
17. Komponento kūrimas (04:16)
18. Vietiniai komponentai (02:44)
19. Duomenų reaktyvumas (04:35)
20. Komponento savybės (03:52)
21. Laiko tarpsniai (04:37)
22. Lizdai su apimtimi (04:52)
23. Tinkinti įvykiai (04:27)
24. Teleportai (02:53)

Vue. Vieno failo komponentai
1. Projekto diegimas. VUE-CLI (09:22)
2. Vieno failo komponentas (03:18)
3. Darbas su stiliais (07:02)
4. Perdavimo atributai ir tvarkyklės (02:53)
5. Atskiri failai (01:26)
6. Komponentų savybių patvirtinimas (07:35)
7. Vartotojo įvykių patvirtinimas (02:01)
8. Dvipusis duomenų ryšys (04:11)
9. Pasirinktinis v-modelis (05:51)
10. Gyvenimo ciklo kabliukai (07:08)
11. Priemaišos (04:40)

NPM
1. Kas yra npm? (05:50)
2. Diegimas ir atnaujinimas npm (02:33)
3. Pagalba su npm (01:28)
4. Paketų paieška ir įdiegimas (04:24)
5. Paketo priklausomybės (02:09)
6. Manifesto failas package.json (03:02)
7. Paketų pašalinimas ir atnaujinimas (03:02)
8. priklausomybės ir kūrėjasPriklausomybės (01:51)
9. Webpack ir npx (04:04)
10. npm scenarijai (04:02)
11. npm, git ir github (02:40)

Verpalai
1. Verpalai (07:07)

Webpack. Pagrindai
1. Teorija (01:09)
2. Minimali konfigūracija ir paleidimas (04:41)
3. Failo pavadinimo suteikimas (02:34)
4. Krautuvai (04:28)
5. Kūrėjo serveris (02:43)
6. Papildiniai (02:34)
7. Ieškoti modulių (03:18)
8. Sorsmaps (03:17)
9. Dev ir kt. (02:42)
10. Modulių tipai (03:00)
11. Minimalus surinkimas (05:30)

ESLint. Konfigūracijos apžvalga
1. Įvadas (01:26)
2. Diegimas ir paleidimas (03:10)
3. Klaidų pataisymai (02:04)
4. Konfigūracija (05:21)
5. Išvesties formatas (00:52)

Figma maketuotojui
1. Figma. Sąsaja (04:37)
2. Figma. Projekto organizavimas (01:32)

Flexbox
1. Įvadas (00:45)
2. Lankstus konteineris (01:43)
3. Pagrindinės ašies išlygiavimas (01:37)
4. Kryžminių ašių lygiavimas (01:50)
5. Vieno elemento lygiavimas (01:09)
6. Lankstus elementas – konteineris (00:53)
7. Ašių kryptis (03:18)
8. Multiline konteineris (02:54)
9. Kelių eilučių turinio lygiavimas (01:25)
10. Proporcijos (02:46)
11. Suspaudimo proporcijos (01:24)
12. Pagrindinis dydis (04:02)
13. Elementų tvarka (02:40)

GIT
1. Įvadas (07:03)
2. Darbo su Git pradžia (03:01)
3. Naujos saugyklos kūrimas (01:09)
4. Failų įtraukimas į „Git“ indeksą (žiūrėjimo sritis) (06:49)
5. Įsipareigojimo kūrimas (07:17)
6. Atlikti navigaciją. Atšaukti pakeitimus (12:10)
7. Tipiškas Git ciklas (03:34)
8. Išsišakojimas Gite (11:27)
9. Konfliktai sujungiant filialus (06:06)
10. Laikinas (be įsipareigojimo) duomenų išsaugojimas (05:25)
11. Darbas su nuotolinėmis saugyklomis (20:04)
12. „GitHub“ puslapių naudojimas projektams priglobti (04:31)

Vue. Seminaras Nr.1
1. Projekto pradžia (05:24)
2. Antraštės komponentas (04:13)
3. Piktogramos komponentas (05:06)
4. Rodomas komponentų sąrašas (02:56)
5. Perjungti komponentą (03:19)

2 savaitė – Vue.js

– Maketą darome adaptyvų.
— Vue.js įdiegsime bloką „Įgūdžiai“.
— Įdiegsime bloką „Mano projektai“ Vue.js.
— Įdiegiame bloką „Apžvalgų slankiklis“ naudodami Vue.js papildinį.

Pasakų knyga
1. Diegimas (01:56) 
2. Pirma istorija (04:35)
3. Komponento prijungimas (01:24)
4. Konfigūracijos išplėtimas (04:26)
5. Bendrieji stiliai (02:08)
6. Komponento istorija (05:23)
7. CDD (04:16)
8. Komponento kūrimas (02:28)
9. Komponento taikymas (02:29)
10. Įvykių registravimas (03:29)
11. Fono priedas (01:41)
12. „Addon Knobs“ (02:28)
13. Priedo šaltinis (02:17)
14. Išvada (01:11)

JavaScript – ES6
1. Eilučių interpoliacija (07:39)
2. Metodų aprašymų supaprastinimas (13:35)
3. Numatytieji nustatymai (30:08)
4. Naikinimo užduotis: objektai (07:30)
5. Naujos funkcijos ir senos naršyklės (13:07)

Asinchronija „JavaScript“.
1. Laikmačiai (23:44)
2. Įkeliamos nuotraukos (22:21)
3. Pažadai (36:29)
4. AJAX (32:28)

Axios. Užklausų biblioteka
1. Įvadas (02:23)
2. Užklausos siuntimas (02:12)
3. Konfigūracijos apžvalga (04:30)
4. Užklausos turinys (01:43)
5. Numatytieji nustatymai (01:38)
6. Perėmėjai (02:11)
7. Paslaugos (02:33)
8. asinchroninis laukimas (01:18)

Vue. Seminaras Nr.2
1. Pasiruošimas (02:39)
2. Komponento prijungimas (02:16)
3. Valdymo išvestis (02:38)
4. Pažangos komponentas (05:09)
5. Prašymas serveriui (06:38)
6. Duomenų išvestis (05:55)

3 savaitė – vietinis JavaScript

– Kuriame administratoriaus skydelį.
— Mes studijuojame Storybook ir taikome jį savo projekte.
— Atliekame reikiamą projektų formų apdorojimą (tvirtinimą).

VueRouter. Maršrutas naršyklėje
1. Įvadas (04:31)
2. Nuorodų kūrimas (02:41)
3. Programinės įrangos navigacija (02:35)
4. Kelio parametrai (04:42)
5. Parametrai kaip savybės (00:49)
6. Išplėstinės parinktys ir 404 (03:29)
7. Įdėti maršrutai (03:23)
8. Veiklos pamokos (02:37)
9. Įvairūs maršrutizatoriaus rodiniai (01:08)
10. Dinaminis importavimas (02:00)
11. Gražus URL (02:16)

Vuex. Valstybės vadovas
1. Įvadas (01:13)
2. Ryšys (02:30)
3. Veiksmas (02:27)
4. Mutacijos (02:16)
5. Getteriai (02:02)
6. Taikymas praktikoje (08:07)
7. Asistento funkcijos (02:59)
8. Moduliai (05:18)
9. Dinaminiai moduliai (01:38)
Klausimo atsakymas

Vue. Seminaras Nr.3
1. Išdėstymas (04:33)
2. Duomenų išvestis (02:42)
3. Pasiruošimas animacijai (02:14)
4. Mygtukų ekranas (03:45)
5. Papildomas turinio įkėlimas (11:38)
6. Rodyti skaidrę po perėjimo (02:17)

4 savaitė – Vue.js, SPA

— SPA diegiame administratoriaus skydelyje.
— Mes tiriame darbą su duomenimis per programų saugyklą
- Mes naudojame ajax bendrauti su API, nustatyti kliento ir serverio sąveiką.

Autorizacija. Žetonai
1. Leidimų tipai (04:20)
2. „GitHub OAuth“ (01:42)
3. „GitHub“ programos kūrimas (02:28)
4. Žetono gavimas (08:38)
5. Duomenų saugojimas kode (01:46)
6. Maršruto apsauga (04:13)

Vue. Seminaras Nr.4
1. Pasiruošimas (01:33)
2. Veiksmo kūrimas (02:30)
3. Atsisiuntimo būsena (04:01)
4. Prašymas (02:27)
5. Pašalinamos dublikatai (03:29)
6. Maršruto apsauga (03:23)
7. Atsijungti (00:51)

5 savaitė – praktika

— Išsaugotus duomenis rodome iš administratoriaus skydelio į nukreipimo puslapį.
– Testuojame komponentus.
— Grupinis darbas projekte su mentoriumi.

Vue.js. Kompozicijos API
1. Įvadas (01:29)
2. Bendras pavyzdys (03:57)
3. Dainos funkcija (01:51)
4. Reaktyvioji funkcija (00:55)
5. toRef funkcija (01:35)
6. toRefs funkcija (00:58)
7. Apskaičiuotos savybės (00:56)
8. laikrodžio funkcija (01:41)
9. WatchEffect funkcija (03:14)
10. tik skaitymo funkcija (00:40)
11. Bandymo funkcijos (02:30)
12. unref funkcija (01:27)
13. Gyvenimo ciklo kabliukai (00:58)
14. Pavyzdys. Projekto apžvalga (00:53)
15. Pavyzdys. Įkėlimo funkcija (01:20)
16. Pavyzdys. Kategorijos (02:20)
17. Pavyzdys. Pradinis filtravimas (02:46)
18. Pavyzdys. Filtro perjungimas (02:11)
19. Pavyzdys. Kitos filtravimo funkcijos (02:03)
20. Pavyzdys. Rūšiavimo metodas (03:05)
JS kodo testavimas
1. Įvadas (16:05)
2. Juokas (15:47)
3. Testų privalumai (09:01)
4. Aprėptis (10:02)

Vue.js. Komponentų testavimas
1. Paketų nustatymas (04:39)
2. Komponentų įvynioklis (04:13)
3. Ką išbandyti (02:48)
4. Pirmas testas (05:25)
5. Emisijos įvykio tikrinimas (03:44)
6. Nuosavybių perkėlimas (02:58)
7. Darbas su formos elementais (05:42)
8. Bendrieji nustatymai (01:15)
9. Moki (05:04)
10. Bibliotekų prijungimas (02:32)
11. Veiksmo testavimas (03:26)
12. Parduotuvės testavimas (02:53)
13. Testavimas su nuotraukomis (03:08)

Testavimas. Moki
1. Maketo kūrimas (02:39)
2. Darbas su argumentais (01:39)
3. Grąžinimo vertė (02:57)
4. Moduliai (04:24)
5. Laikmačiai (02:05)

Vue. Seminaras Nr.5
1. Paprastas komponentas (03:03)
2. Komponentas su parduotuve (05:21)
3. Testavimas. Pasiruošimas (03:20)
4. Testavimas. Perjungiklis (02:38)
5. Testavimas. Problemos (05:08)

6 savaitė – projekto užbaigimas

– Baigiame projektą.
— Projektą pateikiame peržiūrėti mentoriams.
- Vertinimo diplomai.

Kaip gauti darbą IT srityje: patarimai ir gudrybės
1. Kaip įsidarbinti IT srityje? Paieška, pokalbis ir bandomasis laikotarpis (42:21)
2. Kaip rasti nuotolinį darbą ir laisvai samdomų vertėjų užsakymus? (20:12)
3. Pirmas darbas IT srityje – kaip elgtis? Stažuotės, oficialus įdarbinimas ir darbas „už maistą“ (14:11)
4. Kaip išlaikyti bandomąjį laikotarpį? (27:10)
5. Kaip pasiruošti pokalbiui FAANG įmonėje (08:52)
6. Tinklalapio įkėlimo procesas (25:19)
7. Interviu su programuotoju – viskas, ką reikia žinoti (01:24:07)
8. Problemos sprendimas iš programuotojo interviu (19:36)
9. Interviu su sąsajos kūrėju (01:37:17)

React.js žiniatinklio programų kūrimas

1 savaitė – React.js įvadas

— Susipažįstame su kurso komanda ir klasės draugais.
— Mokymasis JSX ir virtualiojo DOM programoje „React“.
— Svarstome komponentinį metodą ir duomenų perdavimo būdus.

Pažintis
1. Kurso atidarymas (05:41)

I React.js
1. Kas yra React (07:05)
2. Virtualus DOM (02:46)
3. JSX (06:10)
4. Atvaizdavimas su sąlygomis (05:11)
5. Darbas su sąrašais (02:45)
6. Komponentai (02:41)
7. Rekvizitas (01:45)
8. Valstija (06:45)
9. Įvykiai (02:26)
10. „React Devtools“ (03:58)

II React.js
1. Gyvenimo ciklo metodai (05:19)
2. Komponentai – funkcijos (01:29)
3. Grynas komponentas (02:54)
4. Sintetiniai įvykiai (01:42)
5. Darbas su formomis (02:51)
6. Klaidų apdorojimas (01:39)

1 užduočių analizė
1. Seminaras Nr. 1 (30:36)

2 savaitė – React.js šablonai, testavimas

— Mes tiriame komponentų klasės komponentus, elementus ir egzempliorius.
– Atsižvelgiame į Perkomponavimo biblioteką, didelės eilės komponentus ir „Render Props“ modelius.
- Mes suprantame testų pranašumus, studijuojame „Jest“, „Enzyme“, „Snapshots“.

III Reaguoti
1. Įvadas (01:43)
2. PropTypes (10:18)
3. Kontekstas (05:19)
4. Refs (05:18)
5. Portalai (05:02)
6. Kabliukai (10:42)

IV React.js
1. Aukštos eilės komponentai (HOC) – aukštesnės eilės komponentai (10:33)
2. Persiuntimas (HOC) (04:31)
3. Pateikti rekvizitų šabloną (05:25)
4. HOK bibliotekos perkomponavimas (10:32)
5. Profiliavimas (04:02)

Testavimas
1. Įvadas (05:06)
2. Bandomasis bėgikas (02:51)
3. Išbandyti DSL (08:41)
4. Fermentas (06:57)
5. Momentinės nuotraukos (03:09)
6. Testavimo sagos (05:01)
7. Reagavimo testavimo biblioteka (06:32)

2 užduočių analizė
1. Seminaras Nr. 2 (27:54)

3 savaitė – Redux, maršruto parinkimas

- Mes tiriame maršruto parinkimą: paprastą maršrutą, maršruto parinkimą su jungikliu, taip pat įdėtą maršrutą.
— Susipažinimas su „Redux“ biblioteka: pagrindinės „Store“, „Actions“, „Reducers“, „React-redux“ sąvokos ir sąvokos.
— Tarpinė programinė įranga laikoma darbo su Sideeffect būdu.

Maršrutas naršyklėje
1. Istorijos API (02:48)
2. Paprastas maršrutas (05:39)
3. Maršrutas iš Switch (04:16)
4. Įdėtas maršrutas (05:32)
5. Privatus maršrutas (04:39)

Aš Redux
1. Įvadas (04:07)
2. Parduotuvė (05:03)
3. Veiksmai (02:17)
4. Reduktoriai (07:56)
5. React-redux (03:26)

II Redux
1. Įvadas (03:11)
2. CreateActions (redux-actions) (09:13)
3. Tarpinė programinė įranga (07:54)
4. Tvarkyti veiksmus (05:52)
5. Selektoriai (06:17)
6. Pasirinkti iš naujo (04:49)
7. Ducks (06:56)

3 užduočių analizė
1. 3 seminaras (39:13)

4 savaitė – Redux-saga

— Studijuojame Redux-saga biblioteką. Pakartokite generatoriaus* funkcijas. Išmokime juos paleisti lygiagrečiai.
— Pažiūrėkime į Take metodą. Panagrinėkime pasirinkimą kaip būdą gauti duomenis iš parduotuvės.
— Ieškome būdų, kaip sukurti „React“ programos stilių. Mes tiriame bibliotekas ClassNames, StyledComponents, BrowserList, MaterialUI.

Aš Redux saga
1. Įvadas (00:57)
2. Apžvalga (02:08)
3. Generatoriai (04:11)
4. Sagų pridėjimas (02:07)
5. Reaguoti į veiksmus (03:53)
6. Funkcijos paleidimas (02:06)

II Redux-saga
1. Įvadas (00:27)
2. Efektų atlikimas lygiagrečiai (03:41)
3. Įsigalioja (02:45)
4. Pasirinkite efektą (02:04)
5. Atšaukti efektus (04:05)

Darbas su stiliais
1. Įvadas (01:34)
2. CRA stiliai (05:21)
3. Klasių pavadinimai (06:32)
4. StyledComponents (07:11)
5. Naršyklės sąrašas (01:37)
6. Medžiagos vartotojo sąsaja (08:13)

4 užduočių analizė
1. 4 seminaras (09:55)

5 savaitė – formos, CI ir DI bei kliento klaidų tvarkymas

— Mes svarstome galimybę dirbti su formomis naudodami Formik, Redux Forms, React Final Form bibliotekas.
— Svarstome gamybos kodo kokybės užtikrinimo būdus. Mes analizuojame tokius įrankius kaip: Husky, TravisCI, HerokuNow.
— Mes tiriame naudingų plėtrai bibliotekų rinkinį (Storybook, RamdaJS, Axios).
– Svarstome „TypeScript“.

Darbas su formomis
1. Įvadas (05:07)
2. Formik (08:51)
3. Redux forma (06:22)
4. Reaguoti galutinę formą (06:36)

CI ir DI bei kliento klaidų tvarkymas
1. Įvadas (05:07)
2. Haskis (02:32)
3. CI naudojant TravisCI (03:32)
4. Paskirstyti į heroku (04:57)
5. Rollbar (02:00)

Naudingų plėtrai bibliotekų rinkinys
1. Pasakų knyga (05:32)
2. RamdaJS (04:47)
3. „Axios“ (05:52)
4. Mašinraštis (09:31)

5 užduočių analizė
1. 5 seminaras (13:17)

6 savaitė – Projektinis darbas

— Užpildome paraišką ir išsiunčiame ją peržiūrėti.

Kaip gauti darbą IT srityje: patarimai ir gudrybės
1. Kaip įsidarbinti IT srityje? Paieška, pokalbis ir bandomasis laikotarpis (42:21)
2. Kaip rasti nuotolinį darbą ir laisvai samdomų vertėjų užsakymus? (20:12)
3. Pirmas darbas IT srityje – kaip elgtis? Stažuotės, oficialus įdarbinimas ir darbas „už maistą“ (14:11)
4. Kaip išlaikyti bandomąjį laikotarpį? (27:10)
5. Kaip pasiruošti pokalbiui FAANG įmonėje (08:52)
6. Tinklalapio įkėlimo procesas (25:19)
7. Interviu su programuotoju – viskas, ką reikia žinoti (01:24:07)
8. Problemos sprendimas iš programuotojo interviu (19:36)
9. Interviu su sąsajos kūrėju (01:37:17)