Brainscape's Knowledge GenomeTM

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


See full index

Lambda School > [S6L1] React Basiscs > Flashcards

[S6L1] React Basiscs Flashcards

1
Q

Wie initialisiert man an einen Pfad ein Basis React Projekt, welches schon vieles mitbringt?

A

In der Konsole:

npx create-react-app name

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

Was ist im Ordner node-modules?

A

Alle Packages die mit npm installiert werden

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

Was ist im Ordner public im React Projekt?

A

index.html
favicon
manifest.json

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

Was macht .gitignore?

A

Schließt angegebene Dateien aus dem Git Commit aus:

Api_Keys, Passwörter etc

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

Was beinhaltet package.json im React Projekt?

A

-Skripts für das Starten, Testen Builden etc

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

Was beinhaltet package-löck.json im React Projekt?

A
  • Informationen über Versionen für Packages des Projektes
  • Wenn jemand anderes unser Projekt installiert werden trotzdem unsere Packageversions installiert und nicht seine veralteten oder neueren genutzt, somit bleibt alles funktionabel
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Was beinhaltet der src Ordner im React Projekt?

A

-All unseren Code

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

Wie startet man ein React Projekt?

A

In der Konsole mit dem Befehl:

npm start

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

Was beinhaltet die App.css Datei im React Projekt?

A

Das grundlegende Styling

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

Was beinhaltet die App.js Datei im React Projekt?

A

Den Code des Projektes

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

Was beinhaltet die App.test.js Datei im React Projekt?

A

Tests für das Projekt

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

Was beinhaltet die index.css Datei im React Projekt?

A

Styling für Body und Basic HTML Elemente

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

Was ist eine Komponente in React?

A

Z.B. App.js, welches als eine Datei die gesamte Logik, das HTML und das Styling beinhaltet

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

Was beinhaltet die index.js Datei im React Projekt?

A

Rendert eine App Component für den ReactDOM der index.html

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

Was benötigt jede Component in React?

A

import React from ‘react’

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

Wie erschafft man eine Component in React?

A

-Als Function

import React from ‘react’

function App() {
  return(
    <div>
      <h1>Hello React</h1>
    </div>
  );
}

export default App;

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

Wohin fügt React Components in HTML ein?

A

In die index.html in den “root” div wird der gesamte Javascript Code als HTML eingefügt

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

Ist der Code, welcher in einer Component steckt und so wie HTML aussieht auch wirklich HTML?

A

Nein, es ist Javascript Code (JSX)

-DIeser wird dann intern mit <div> zur createElement(div) etc übersetzt und dann für die index.html gerendert</div>

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

Wo kann in der React Compontent Logik eingefügt werden?

A

-Vor dem Return des JSX Codes der gerendert werden soll

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

Muss man mit React noch mit querySelectorn seine Elemente/Klassen aus dem DOM suchen und dann evenListener hinzufügen?

A

Nein! Man kann einfach in das JSX Javascript Code einfügen und so Events definieren

import React from ‘react’

function App() {

  const sayHello = () => {
    console.log("hello")
  }
  return(
    <div>
      <h1>Hello React</h1>
      Hello
    </div>
  );
}

export default App;

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

Wie schreibt man Javascript in JSX in React?

A

Mit Curly Brackets

Hello

22
Q

Wie kann man andere Components auslagern und definieren?

A

-Einfach eine neue Datei z.B. sayHello.js in src erstellen und dort die Compontent schreiben
-Diese muss React importieren
-Und sich selbst exportieren
-Dann kann in der App.js diese mit folgendem Code einfach eingebunden werden
return(
<div>

</div>   );

import React from ‘react’;

function Hello() {

const sayHello = () => console.log("hello");
    return(
        <div>
            <h1>Hello React</h1>
            Hello
        </div>
    )
}

export default Hello;

23
Q

Wie nennt man eine JSX Klasse in React? Mit class?

A

Nicht mit class, sondern

<div></div>

24
Q

Wie kann man auf Properties einer React Component zugreifen?

A 
function Tweet({name, message}){
    return(
        <div>
            <h3>{name}</h3>
            <p>{message}</p>
            <h3>Number of Likes</h3>
        </div>
    );
}
25
Q

Was ist ein state in React?

A
  • Ein Zustand wie eine Variable als Boolean, welcher darüber entscheidet wie das HTML gerendert wird
  • Ist isLogedIn == True sieht die Seite anders aus, als wenn diese False ist
26
Q

Wie benutzt man einen state in React?

A

import React, {useState} from ‘react’;
import Tweet from ‘./Tweet’;

function App() {

const [isRed, setRed] = useState(false);
const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  }
  return(
    <div>
      Increment
      <h1>{count}</h1>
    </div>
  );
}
27
Q

Was macht states in React so besonder?

A
  • Das JSX/HTML wird neu gerendet abhängig von dem Zustand der Variablen/states
  • Damit wird eine Website sehr dynamisch
28
Q

Was ist React JS?

A

-Eine User Interface Component Library gebaut von Facebook

29
Q

Warum wurde React JS gebaut?

A
  • Weil es auf jeder Website einen Zustand der Daten gibt mit denen der Nutzer interagiert
  • Von einem Zustand in den anderen Zustand zu gelangen ist das was eine Website heutzutage ausmacht
  • Und man eine Lösung für die Komplexität haben wollten
30
Q

Ist React ein Framework?

A
  • NEIN!

- Es ist nur eine Library um ein Dinge sehr gut zuerledigen, nämlich das Rendern von User Interface

31
Q

Welche Eigenschaften besitzt React?

A
  • Sehr skalierbar
  • Wiederbenutzbar
  • Alles ist eine Component
  • Unopinionated über wie man Daten managed
  • Interessiert sich nur dafür die Daten gerendered werden, also auf den DOM gebracht werden
  • Nutzt den Virtual DOM
32
Q

Was ist der Virtual DOM?

A
  • Eine virtuelle Repräsentation davon was der DOM einmal werden wird.
  • React kompiliert den gegebenen Code durch die virtual DOM Enginge zu der Website
33
Q

Was ist JSX?

A
  • Eine Markup Language die aussieht wie HTML
  • Es ist eine Templating Style Language um das HTML zu representärien
  • Erlaubt es inline Javascript zu schreiben
34
Q

Ist JSX gleich HTML?

A
  • NEIN!

- Es ist eine Templating Style Language um das HTML zu representärien

35
Q

Was ist ReactJS und welches Problem versucht es zu lösen?

A

-ReactJS ist eine UI Library, welche sich großer Beliebtheit erfreut, da es mittels Components und States sich um Probleme kümmert wie teuren DOM Operationen, welche zur Verlangsamung von Websiten führen. Dafür nutzt es den virtuellen DOM, welcher ein Diff auf den DOM ausübt und nur die geänderten Elemente auf einer Seite neulädt, ohne die Website neu zu laden.Weiterhin ist ReactJS durch Components sehr wiederverwendbar, funktional und offen in der Art wie Javascript in dieser verwendet werden kann.

36
Q

Wie kann man React in einem HTML nutzen?

A

-Einfach durch den import als von react.,development.js und react-dom.development.js

37
Q

Wie kann man JSX Syntax in HTML nutzen?

A

Mit

und 


















38










Q













Benötigt React die Benutzung von JSX?


















A













-















39










Q













Was ist eine Component in React?


















A













-Eine JavaScript Function/Klasse die einen willkürlichen paramenter namens props akzeptiert















40










Q













Wofür steht props in React?


















A













-Für Property und ist ein besonderer Teil der Rect API















41










Q













Was tun Components in ReacT?


















A













-Kapseln Teile des UI ein















42










Q













Können Components in React neben Functions auch Klassen sein?


















A













Ja















43










Q













Wie sieht eine Besipiel Component in React aus?


















A













const MyFirstReactComponent = props => {
return <div> My first component</div>;
};















44










Q













Was ist der Unterschied zwischen opinionated und unopinioated Libraries/Frameworks?


















A













    

  • Je mehr opinionated desto einfacher und schneller sind Dinge erstellt, jedoch so eingeschränkter sind sie auch. Es gibt eine gewisse Art etwas zu tun und wenig Individidualisierung.
    • 

  • Je mehr unopinionated desto mehr Freiheit hat man, jedoch ist es auch schwerer alleine auf gute Lösungen zu kommen. Es ist weniger vorgegeben und verschieden Entwickler entwickeln evtl. unterschiedliche Lösungen. Man hat jedoch mehr Macht die Dinge so zu bauen, wie man sie haben möchte.
    • 
















45










Q













Was sind mehr opinionated Libraries als React?


















A















  • Angular (ein wenig mehr)


- Ember (Sehr viel mehr opinionated.

















46










Q













Ist Yarn ein wenig schneller und einfacher als NPM?


















A













-Es ist betrachtungssache, aber ja















47










Q













Was ist eine Web Application?


















A













-Software die im Browser läuft















48










Q













Wofür ist React sehr gut?


















A













-Einfach und schneller Web Applications bauen als mit normalen HTML und CSS















49










Q













Was ist der Unterschied zwischen einer Website und einer Web Application?


















A













    

  • Eine Website ist statisch und handlet maximal Kontaktformulare
    • 

  • Eine WebApplication ist komplette Software die im Browser läuft
    • 
















50










Q













Sollte man statische Websiten mit React bauen?


















A













-Braucht man nicht, es ist ein wenig Overkill






























Lambda School (59 decks)


























Brainscape helps you reach your goals faster, through stronger study habits.


© 2024 Bold Learning Solutions. Terms and Conditions