lek 6

Question 1

DEMO slajd 7
Kako bi odstranili stolpec z ID-jem (#) iz prikaza v HTML tabeli?

Answer 1

ako, da v HBS (Handebars) predlogi izbrišemo vrstico, ki izpisuje {{_id}}.
Primer v list.hbs:

html
Copy
Edit
<!-- to vrstico izbrišemo -->

<td>{{_id}}</td>

Question 2

Kako bi filtrirali prikazane elemente, da bi prikazali le nakupovalni listek?

Answer 2

V kontrolerju (NoteItemController) moramo v find() dodati pogoj za iskanje samo elementov z Category == “Shopping” ali podobno:

NoteItemModel.find({ category: ‘Shopping’ }, function (err, items) {
// …
});

Question 3

Kaj prikazuje vrednost “5e7b0f4ba790143d18815a3e” in zakaj ni smiselno za uporabnika?

Answer 3

To je MongoDB ObjectID (unikaten identifikator dokumenta). Za uporabnika nima posebne vrednosti, zato ga običajno skrijemo.

Question 4

Kaj moramo popraviti, če želimo, da uporabnik vidi samo svoje vnose?

Answer 4

Dodamo pogoj user: req.session.userId v poizvedbo find(), da se prikažejo samo elementi tega uporabnika.

Question 5

Kaj je MERN stack?

Answer 5

MongoDB, Express, React, Node.js

Question 6

Zakaj uporabimo React v MERN skladu?

Answer 6

Za čelni del aplikacije, omogoča SPA in AJAX interakcijo.

Question 7

Kaj omogoča React?

Answer 7

Hiter, komponentni, odziven UI z uporabo JavaScript-a
plikacijo na strani odjemalca (client-side) Večja hitrost, ker se stran ne osveži v celoti ob vsakem kliku
✅ AJAX – brez ponovnega nalaganja strani API-je kličeš prek fetch/axios in samo osvežiš del podatkov
✅ SPA – Single Page Application Enotna, moderna izkušnja kot Google Docs, Facebook itd.
✅ Komponentni pristop Vsak del vmesnika je ločena komponenta (gumb, forma…) – večja ponovna uporabnost
✅ Delo samo z JavaScript-om Celotna aplikacija je napisana v JavaScript-u (tudi logika, tudi izgled)

Question 8

Zakaj Express sam ni dovolj?

Answer 8

Renderira cel HTML, ni komponent, ni SPA.
❌ Kaj je slabost samo Expressa brez Reacta?

Server-side rendering s predlogami -počasneje, celotna stran se naloži ob vsaki zahtevi
Težje ustvarjati dinamične vmesnike-Več ročnega HTML-a, manj odzivnosti
Ni komponent-Manj strukture v kódi uporabniškega vmesnika.

Question 9

Kaj je CORS?

Answer 9

CORS omogoča, da spletna aplikacija na eni domeni (npr. React na localhost:3000) pošlje zahtevo drugemu strežniku (npr. Express na localhost:5000). Privzeto brskalnik blokira take zahteve zaradi varnostnih razlogov. CORS to prepreči.

Question 10

Katera velika podjetja stojijo za Angular in React?

Answer 10

Angular je razvil Google, React pa Facebook.

Question 11

Kaj je Angular in kaj je React z vidika definicije?

Answer 11

Angular je celoten framework, medtem ko je React le library (knjižnica).

Question 12

Kakšna je razlika v jeziku in načinu pisanja komponent med Angular in React

Answer 12

Angular uporablja HTML + TypeScript, React pa JS + JSX.

Question 13

Kako poteka podatkovna vezava (data binding) v Angularju in v Reactu?

Answer 13

Angular uporablja 2-smerno vezavo (two-way binding), React pa enosmerno (uni-directional).

Question 14

Kateri DOM uporablja Angular in kateri React?

Answer 14

Angular uporablja običajni DOM, React pa virtualni DOM, kar omogoča hitrejše posodabljanje vmesnika.

Question 15

Kaj je razlika med res.json in res.render?

Answer 15

res.json vrne surove podatke (JSON), res.render vrne HTML predlogo.

Question 16

Prevajalnik (compiler)

Answer 16

Prevajalnik vzame JavaScript ES6 kodo, jo preoblikuje in vrne JavaScript kodo v obliki, ki jo lahko interpretira brskalnik. Običajno se uporablja prevajalnik Babel.

Question 17

Kaj je JSX?

Answer 17

Sintaktična razširitev za pisanje HTML v JavaScriptu.
Kako v JSX vključimo izraze JavaScripta?
✅ Z uporabo zavitih oklepajev {}.

❓ Ali lahko uporabimo if-else znotraj JSX?
✅ Ne, ampak lahko uporabimo pogojni (ternarni) izraz: {pogoj ? “Da” : “Ne”}.

Question 18

Katere novosti prinaša ES6?

Answer 18

Arrow functions, razredi, let/const, predloge z Babel.

Question 19

Kaj je React komponenta?

Answer 19

Ponovno uporabna enota vmesnika, lahko funkcijska ali razredna.

Question 20

Kje se naloži prva komponenta v React aplikaciji?

Answer 20

V datoteki index.js z uporabo ReactDOM.render.

Question 21

Kakšna je razlika med funkcijsko in razredno komponento?

Answer 21

Funkcijske: preproste, brez lastnega stanja (razen s useState).

Razredne: bolj kompleksne, lahko vsebujejo lastno stanje in metode življenjskega cikla.

Question 22

Kaj je props?

Answer 22

Vhodi v komponento, ki jih nastavi nadrejena komponenta – so nespremenljivi.

Question 23

Kaj je state?

Answer 23

Podatki, ki se lahko spreminjajo znotraj komponente.

Question 24

Zagon aplikacije-na katerem portu

Answer 24

http://localhost:4100/

Question 25

Kaj naredi metoda render()?

Answer 25

Vrne JSX, ki se izriše na zaslon. ne spreminja stanja komponente (pure function), vrne enak rezultat vsakič ko je klicana.

Question 26

Kaj je componentDidMount()?

Answer 26

Metoda življenjskega cikla, ki se izvede po prikazu komponente. ▪ Če moramo komunicirati z brskalnikom, uporabimo to

Question 27

Povezava metode render() in komponent

Answer 27

Komponenta App ima stanje (state), ki hrani podatke (npr. seznam "items"). ➡️ Metoda render() vrača komponento Items in ji preko props-ov posreduje podatke (this.state.items). class App extends Component { state = { items: [] } render () { return ( ); } }

Question 28

Hierarhija komponent

Answer 28

index.js naloži App komponento. App.js naloži Items komponento in ji poda podatke. items.js upodobi podatke. React tok podatkov: zgoraj navzdol (top-down), props → child komponenta.

Question 29

Kaj omogoča React Router?

Answer 29

Navigacijo med stranmi brez osveževanja strani. import {BrowserRouter, Routes, Route, Navigate} from "react-router-dom"; }/> }/> }/> Definiramo poti (path) in določimo, katera komponenta se naj naloži za določen URL. ➡️ BrowserRouter omogoča zgodovino, Routes vsebuje več Route.

Question 30

Kako namestimo React Router?

Answer 30

npm install react-router

Question 31

Kaj omogoča useState?

Answer 31

Upravljanje lokalnega stanja v funkcijski komponenti.

Question 32

Kaj omogoča useEffect?

Answer 32

Obravnava stranskih učinkov (npr. fetch) v komponenti.

Question 33

Kaj omogoča Redux?

Answer 33

Centralizirano upravljanje stanja aplikacije.

Question 34

Kako povežemo Redux z Reactom?

Answer 34

Z uporabo knjižnice react-redux.

Question 35

Kako ustvarimo novo React aplikacijo?

Answer 35

Z ukazom create-react-app my-app.

Question 36

Kaj naredi npm run build?

Answer 36

Pripravi aplikacijo za produkcijo (mapa /build).

Question 37

Kako zaženemo aplikacijo?

Answer 37

npm start in odpremo localhost.

Question 38

Ali lahko uporabimo if-else direktno v JSX?

Answer 38

Ne, uporabljamo pogojne izraze ali ternarni operator.

Question 39

Kako komentiramo v JSX?

Answer 39

Z uporabo { /* komentar */ }.

Question 40

Kakšna je razlika med props in state?

Answer 40

Props se ne spreminjajo, state se lahko spremeni znotraj komponente.

Question 41

Kaj omogoča plop.js?

Answer 41

Avtomatsko generiranje React komponent (page, hook, service).

Question 42

React Hooks

Answer 42

Hooksso funkcije, ki razvijalcem omogočajo, da se iz komponent (ki so zapisane kot funkcije) priklopijo na stanje in življenjski cikel. Reactzagotavlja nekaj vgrajenih funkcij: useState, useContext, useReducer in useEffect, itd. ◼ useState in useEffect se najpogosteje uporabljajo za nadziranje stanj in stranskih učinkov v React komponentah. ◼ Obstajajo pravila za uporabo Hook, ki jih je treba upoštevati: ▪ Hooklahko uporabljamo samo na najvišji ravni (ne znotraj zank ali if stavkih). ▪ Hookje treba poklicati samo iz funkcije komponente, ne pa iz običajnih funkcij ali razreda komponente.