Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Lambda School > [S8L1] React Router 1 > Flashcards

[S8L1] React Router 1 Flashcards

1
Q

Was ist Routing?

A
  • Der Weg mit dem durch das Web navigiert wird
  • Eine URL im Web Browser schickt die Website einen Request an Daten die irgendwo anders liegen
  • Diese Daten werden zu unserem Browser geschickt und der Browser rendert die Website
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Was ist Server Side Routing (SSR)?

A
  • Naivigation auf Website
  • Website requests data für webstie
  • Server returned ein Dokument/HTML/Template zum Browser und Browser kann die Seite rendern
  • Alles macht der Server! (Kompilieren des HTML)
  • Bei jeder Navigation wird eine frische Webseite vom Browser geladen, zum Browser gesendet und der Browser refreshed die Website
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Was ist Client Side Routing (CSR) ?

A
  • Javascript mit einer Client App (Web, Desktop, Mobile) managed diie Daten für die Applikation in seinem Memory
  • Daher hat der Browser in seinem Memory alles um andere URLs zu laden
  • Wenn zusätzliche Daten benötigt werden, wird ein API request und eine JSON wird zurückgegeben, aber keine ganze HTML Seite
  • Da der Browser nicht mehr kompiliert, benötigt man keine Refreshes der Website um zwischen Routes zu wechseln!
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Benutzt React Client Side oder Server Side Routing?

A

-Client Side Routing

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Was sind die Vorteile von Server Side Routing? (SSR)

A
  • Routes Requesten nur die Daten, welche sie benötigen und nicht mehr
  • SEO Vorteile, durch lange Tradition dieser Art. Will man vorne in Google sein braucht man SSR.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Was sind die Nachteile von Server Side Routing? (SSR)

A
  • Jeder Request führt zu einem Seiten Refresh, daher wird unnötige Daten requested. Header und Footer werden oft tausend Mal neugeladen, obwohl sie sich nie ändern.
  • Das Rendern der Website kann ein wenig dauern, bei großen Dateien oder langsamer Verbindung.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Was sind die Vorteile von Client Side Routing?

A
  • Es lädt nicht die ganze Seite neu beim Refreshen
  • Weniger Daten werden verarbeitet, daher ist das switchen von Routes schneller
  • Smooth transitions und animations zwischen Routes sind einfacher
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Was sind die Nachteile von Client Side Routing?

A
  • Beim ersten Request muss die ganze Website geladen werden, daher ist das erste Laden etwas langsamer
  • Außerdem werden beim ersten Laden auch Views geladen, die den Nutzer evtl gar nicht interessieren
  • Benötigt Setup und Libraries, mehr Arbeit und Komplexität
  • SEO Nachteile
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Was ist die Philosophie von React Router?

A
  • React Router hat nicht den Prinzipien gefolgt, daher wurde mit Version 4 Dynamic Routing mit einem Rehaul ermöglicht
  • React Router V4 ist deklarativ und Routing findet statt wenn APP rendert
  • V4 erlaubt auch das Composen von Routes mit UI Components
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Wie fügt man einem Projekt React Router hinzu?

A

yarn add react-router-dom

import { BrowserRouter as Router } from ‘react-router-dom’;

ReactDOM .render(
 Router/>
 App/>
/Router>,
document.getElementById("root"));
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Warum importiert man BrowserRouter und nicht Router von react-routercom?

A
  • Weil dann die App nicht nur in BrowserRouter genested wird, sondern auch in Browser.
  • Code und Nesting in DOM sind kongruenter
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Wofür ist die match Property in State vom Router Element?

A

-Refenziert die aktuelle URL

-

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Was macht das Router history Object?

A
  • Liefert Protope Methoden wie goBack, goForward etc

- Zum navigieren

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Was ist alles was man von react-router-dom importiert?

A

-Components, z.B. Route ist eine Component

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Was bedeutet es, dass der Code in React Router deklarativ ist?

A
  • Man schaut auf den Code und sieht was passiert
  • Man kann gedacht explizit deklarieren
  • “I habe eine Route, welche wenn der Path /users ist die component Users rendern wird”
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Wie wird die Component zu / /contact und /about genannt?

A 
/ ist Home Component
Route exact path="/" component={Home} />
/contact ist Contact Component
Route path="/contact" component={Contact} />
/about ist About Component
Route path="/about" component={About} />
17
Q

Ist man wenn man auf /contact ist in React Route auch noch auf der Route /?

A

-Ja, weil die Routes mit Regex nicht exakt gecheckt werden, befindet man sich auf beiden Seiten
-Das löst man dadurch, dass man die Home route mit der exact Props ergänzt
Route exact path=”/” component={Home} />

18
Q

Was sind Dynamic Routes?

A
  • Browser können dynamische Routen aufrufen mit Params

- React Router wird nur conditionally die URL mit den zugehörigen Params rendern

19
Q

Was sind Dynamic Routes nützlich?

A

-Betrachten einer Profilansicht bestimmten ID von einem User

20
Q

Wie setzt man eine Dynamic Route in React?

A

Route path=”/users/:usersID” compontent={SingleUser] />

21
Q

Wie sieht eine Dynamic Route in der URL aus?

A

website/users/5

22
Q

Warum ist das match Object relevant bei Dynamic Routing?

A
  • Wenn die SingleUser Component die URL mit der ID erhält muss sie auf die ID der URL zugreifen
  • Die Route besitzt ein match Object, welche den Key params: besitzt. Params enthält dynamic Daten.
  • Das match Object ist verfübar für das SingleUser Component via Props.match.userid
23
Q

Was ist eine Single Page Application?

A
  • Eine einzelne HTML Page, die dem Browser direkt am Anfang beim Page Load geserved wird
  • Der Apps ist schon im Browser geladen und muss daher nicht mehr refreshed werden
  • Server Side Routing Apps sind verschiedene HTML Pages
24
Q

Was ist Client Side Routing (CSR) ?

A
25
Q

Was ist ein bekanntes Beispiel für eine Single Page Application?

A
  • Facebook lädt die Seiten nicht neu, wenn man Groups, Stores, Browse wechselt
  • Ist schneller beim Wechseln von Seiten, da keine neue HTML Seite vom Server geladen wird
26
Q

Was ist Deep Linking?

A

-Tiefer Verlinken von IDs/spezifischen Dingen auf einer Website

27
Q

Warum ist das Kontrolieren der URL über den Zustand der Web Applikation wichtig?

A

-Wenn der User z.B. einen bestimmten Artikel an einen Freund teilen möchte, kann er einfach die URL weitergeben

28
Q

Ist die ID aus der URL für Dynamic Routing ein String oder eine Number?

A

-Immer ein String, daher muss man vor einem Vergleich mit dieser noch die andere ID durch String Interpolation in eine ID umwandeln

const singleUser = userList.find(user => ${uiser.id} === id);

29
Q

Was macht die Link Component?

A

-Hilft zwischen Routes zu navigieren

30
Q

Wie nutzt man die Link Component?

A

import { Route, Link } from “react-router-dom”;

Link to=”/about”>About /Link>

31
Q

Wofür ist die .find() Methode beim Dynamic Routing?

A

-const item = items.find((item) => ``${item.id}` == props.match.params.id)

Lambda School (59 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions