[S7L4] CSS in JS

Question 1

const getOne = () => () => 1;

Was returned getOne();?
Was returned getOne()();?

Answer 1

• getOne(); // ==> anonymous function () => 1

- getOne()(); //==> 1

Question 2

Was ist Currying?

Answer 2

Durch das Invoken einer Function mehrere inner Functions durchqueren

getOne()();

Question 3

Was sind Styled Components?

Answer 3

• Eine Styling Library für React
• CSS Written in JavaScript
• Styles sind auch Componens, alles sind Components
• Deklarativ und Functional
• Sehr große Community

Question 4

Wie sieht eine styled component aus?

Answer 4

const Button = styled .button`
    padding: 6px 10px;
    margin: 5px;
    border: none;
    border-radius: 3px;
    color: white;
 ${props => (props.type ==='primary' ? 'background: ä2196f3;' : null)}`;

Question 5

Was ist der Unterschied zwischen Cookies und LocalStorage?

Answer 5

• Local Storage ist für Client-side Stuff

- Cookies sind für Server-Side Stuff

Question 6

Was erlauben Styled Components?

Answer 6

• CSS in Javascript zu beinhalten
• Durch Props wesentliche Charakteristiken einer Styled Component zu beeinflussen
• Props können ClassNames setzen

Question 7

Wie benutzt man eine Styled Component?

Answer 7

import styled from “styled - components”;

const WrapperDivBlue = styled.div`
font-family: sans-serif;
text-align: center;
color: blue;
`;

function App() {
return (
 WrapperDivBlue >
h1 Styled Compontents PlayGround /h1
/WrapperDivBlue >
);
}

Question 8

Was bringt ReactStrap?

Answer 8

-Fertige Bootstrap-like Components die in React genutzt werden können

Question 9

Wie interagiert man mit Components in React?

Answer 9

-Durch Props

Question 10

Wie setzt man einen reactstrap button auf outline false?

Answer 10

Button color”danger” outline={“”}>

-Es wird hier nicht nach dem String “false” oder so gesucht, sondern nach einem falsy value. Also etwas das selber false ergibt.

Question 11

Was gibt Tailwind CSS?

Answer 11

• Vordefinierte Classen, Stylings für hübsches CSS
• Ist leichter als Bootstrap zu ändern und zu bearbeiten
• Nachteil ist das viele Klassen zu einem Element geaddet werden müssen

Question 12

Was bietet Bootstrap?

Answer 12

-Fertige Klassen mit vordefinierten Namen

Question 13

Warum benutzt man Libraries?

Answer 13

• Sehr viel schneller
• Haben Responsiveness bereits gelöst und integriert
• Best Practise

Question 14

Was sind Template Literals in Styled Components?

Answer 14

JavaScript Syntax welche es erlaubt Functions anstatt mit () auch durch `` aufrufen zu können.
const Button = styled.button backgrouind: transparent:

Question 15

Wie nutzt man Props innerhalb von Styled Components?

Answer 15

const Button = styled.button`
backgrouind: transparent:

&:hover {
padding: 1rem;
font-size: 2rem;
}

${props => {
props.primary && 
css` 
    background: red;
     color: white;
´};
`;

Question 16

Was sind Short Circuit Conditionals?

Answer 16

Den AND Operator ausnutzen, um Code zu verkürzen

if (online){
getData();
}
Enspricht

online && getData();

Wennn online false ist wird sofort nach dem ersten falschen Evaluate abgebrochen und die Function nie gecallt.
Wenn es online ist wird auf das nächste geguckt und die Function gecalled.

Question 17

Ist es nicht schlecht wenn man mit Styled Components die Logik und das Styling in eine Datei mischt?

Answer 17

-Man kann die erstellten Elemente auch in neue Dateien unter dem Ordner “Styling” ausgleidern und dann in die Dateien importieren.

Question 18

Was ist das Extended Style in Styled Components?

Answer 18

-Wenn man eine Component für einen speziellen Fall besondersn stylen möchte.

Question 19

Wie nutzt man Extended Styles in Styled Components?

Answer 19

//Regular Styled Componens Button previously defined
const TomatoButton = styled(Button)``
color: tamato;
border-collor: tamato;
`;

TomatoButton> I am a Tomato Button /TomatoButton