[S7L1] React Tooling

Question 1

Wie checkt man die Version von NodeJS und welche sollte man für React besitzen?

Answer 1

node –v

Mindestens 8.1+

Question 2

Wie check man die Version von NPM und welche sollte man für React besitzen?

Answer 2

npm –v

Mindestens 5.2+

Question 3

Wie erstellt man ein neues React Project?

Answer 3

npx create-react-app my-example-project

Question 4

Braucht man Yarn für React?

Answer 4

Nein, create react app benutzt yarn intern, aber es wird nicht benötigt um React zu nutzen.

Question 5

Wie kann man das Projekt starten?

Answer 5

Mit npm start

Question 6

Wie installiert man andere libraries für React?

Answer 6

Im Terminal npm install –save libraryname
Danach ist die Dependency im package.json
Kann danach mit import xxx from ‘./lxx’; importiert werden

Question 7

Was sind Types in JavaScript?

Answer 7

Number (42)
Boolean (true, false)
String ('Hello World')
Object ({ tasK: 'Learn React' }, [1, 'foo'])
undefined (undefined)
Null (null)

Question 8

Was sind Types in JavaScript?

Answer 8

Number (42)
Boolean (true, false)
String ('Hello World')
Object ({ tasK: 'Learn React' }, [1, 'foo'])
undefined (undefined)
Null (null)
Symbol (const Symbol = Symbol('foo');

Question 9

Sind Arrays in JavaScript Objects?

Answer 9

JA! Fast alles ist ein Object

Question 10

Was ist undefined in JavaScript?

Answer 10

-Ein Platzhalter für einen Wert der noch nicht im Memory zugewiesen wurde

Question 11

Was ist Null in JavaScript?

Answer 11

-Kann ein ValueType sein

Question 12

Was ist die React Tool Fatigue?

Answer 12

• Bevor es CRA(Create React App) gab musste man jedes Projekt von Scratch auf neu bauen und alle Dependies und Tools einbinden.
• Damit hatten viele Developer Probleme und verloren die Lust überhaupt neue Projekte aufzubauen
• War mal ein Teil von NPM wurde aber entfernt

Question 13

Was ist npx?

Answer 13

Kommt mit npm und ist ähnlich zu yarn

Question 14

Wie switched man von Yarn zu npm?

Answer 14

• Löschen von yarn.lock
• Löschen von npm_modules Ordner
• Dann im Projektordner mit npm install die dependencies installen

Question 15

Warum benutzt man PropTypes?

Answer 15

-Um Types zu checken von Props

Question 16

Wie nutzt man PropTypes?

Answer 16

import PropTypes from ‘prop-types’;

Pokemon.propTypes = {
pokemon: PropTypes.array
};

Question 17

WIe installiert man PropTypes in Visual Code?

Answer 17

npm install -.-.save prop-types

yarn add prop-types

Question 18

Wo kommen die PropTypes hin?

Answer 18

-Immer in die Datei die die Props anzeigt

Question 19

Was sind TypeScript oder Flow?

Answer 19

-Third Party Libraries die JavaScript erweitern, um TypeChecking durchzuführen

Question 20

Was erlaubt Props-Types?

Answer 20

-Erlaubt es manche Daten wie z.B. Props auf ihre Types zu checken

Question 21

Läuft PropsType auch in Production Environment?

Answer 21

Nein! Nur in Development!

Question 22

Was nutzt man wenn ein Prop ein Object ist?

Answer 22

PropTypes.shape({item: PropTypes.string})

Question 23

Was nutzt man wenn ein Prop ein Array ist?

Answer 23

PropTypes.arrayOf(PropTypes.string)