Brainscape's Knowledge GenomeTM

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


See full index

React > React basics > Flashcards

React basics Flashcards

1
Q

Jakie są podstawowe założenia biblioteki React?

A

1) Komponent to funkcja
2) Na wejściu: props i state
3) Są reużywalne i composable
4)
5) Mają prywatny stan
6) Automatycznie reagują na zmianę stanu i aktualizują przeglądarkę
7) React porównuje drzewo (DOM) z pamięci z faktycznym. Odświeża tylko elementy, które uległy zmianie.

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

Jakiego rodzaju mamy komponenty?

A 
1) Funkcyjne
const MyComponent = (props)=>{
     return (
     )
}
2) Klasowe (mają stan)
class MyComponent extends React.Component {
     render() {
              return (
          )
 } }
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Jak porównać JSX fo JS?

A

<div>
vs
React.createElement('div', {classContainer: 'container'},
React.createElement..

ReactDOM.render(React.createElement(Hello, null), mountNode);</div>

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

Jak wygląda naprostsza aplikcja React?

A 
function Hello(){
    return <div>Hello</div>;
}

ReactDOM.render(
,
document.getElementById(‘mountNode’);
);

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

Jak wygląda komponent funkcyjny bez JSX?

A 
function Hello(){
     return React.createElement('div', null, 'Hello React!!!');
}

ReactDOM.render(
React.createElement(Hello, null),
document.getElementById(‘mountNode’)
);

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

Do czego służy React Hook?

A

Pozwala dodać funkcjonalność do komponentu funkcyjnego - np. zarządzanie stanem.

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

Jak dodać stan do komponentu funkcyjnego?

A

Użyć metody useState(). (a - state object, updater function (setter))

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

Jak skorzystać z metody useState(‘key’)?

A

const [counter, setCounter]=useState(0);

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

Jak dodać uruchomienie metody w komponencie?

A

…

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

Czy jest różnica między

A

Tak, jedno to przekazanie wskaźnika, a inne to wywołanie i przekazanie rezultatu do nnClick

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

Czy można przekazać lambdę do onClick={function}

A

Tak, console.log(‘Ala’)}
lub
setCounter(counter+1)

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

Jak przekazać dane do komponentu za pomocą props?

A 
function Button(props){
      ... props.message
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

W jaki sposób dane/stan przepływa w aplikacji React?

A

Stan przepływa w dół aplikacji - od komponentu nadrzędnego do podrzędnego

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

Jak stworzyć komponent, który może być używany w wielu miejscach (reużywany)?

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

Jak nazywany jest algorytm odświeżający drzewo DOM w React?

A

Tree reconciliation alghorhitm - przykład z formularzem, w którym odświeżany jest aktualny czas, ale nie input, który przechowuje dane użytkownika.

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

Czym jest komponent i Reactivex update?

A

Komponent to część interfejsu.

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

Jakie są przykłady React events?

A

Takie przykłady to onClick i onSubmit

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

Jak dzielimy komponenty w React?

A

Na funkcyjne i klasowe

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

Jaka jest różnica między props i state?

A

props są immutable, a state mutowalne

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

Jak nazywa się komitet wprowadzający usprawnienia do JS?

A

TC39

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

Co oznacza słówko const?

A

Oznacza, że referencja jest immutable

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

Jakie są metody programowania funkcyjnego w JS?

A

map, reduce i filter

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

Jaka jest róznica między arrow funtion i normalną funkcją? Podaj przykład

A

Arrow function - słówko this jest brane z kontekste wewnąrz którego, arrow function jest zdefiniowana. W przypadku normalnej funkcji jest to “calling context”.

24
Q 
Jaki będzie wynik kodu?
const myster='answer';
const obj={
   [mystery]: 42
}
A

obj.answer=42, a obj.mystery => undefined

25
Q

Jak wygląda destrukturalizacja parametrów przekazywanych do funkcji?

A

const circleArea=( {readiu}, {precision=2}={} => (PI*radius).toFixed(precision);

26
Q

Jak wygląda przykład destruktulizacji na tablicy?

A

const [first, second, , forth]=[10, 20, 30, 40];

27
Q

Jak użyć operatora .. do destrukturyzacji obiektów?

A

const [first, …restOfItems] = [10, 20, 30, 40];

28
Q

Jak skorzystać z destrukturyzacji obieków/tablic?

A

…array or …object

const[PI]=…Math;

29
Q

Jak użyć destrukturyzacji jako named parameters?

A

({radius}, {precision = 2}={})=>….

30
Q

Jak wykorzystywać template string w Reacte?

A

Wykorzystując backticks

31
Q

Jak użyć Promise’a, żeby pobrać dane z github API?

A 
const fetchData=()=>{
     fetch('url').then((resp)=>{
                resp.json().then(data=>{console.log(data)});
      };
}
32
Q

Jak użyć Promise ze słówkami await i async?

A 
const fetchData=async()=>{
     const resp=await fetch('url');
     const data=await resp.json();
     console.log(data);
};
33
Q

Jaka klasa w komponencie, który jest klasą jest potrzebna do renderowania?

A

render(){
return <div>aaa</div>;
}

34
Q

Po czym powinna dziedziczyć klasa kiedy tworzymy komponent klasowy?

A

React.Component

35
Q

Jak dodać do komponenty inline-styles?

A

render(){

<div style=""></div>

36
Q

Jak rozpocząć (inicjalizować) obiekt, który w komponencie pozwala nam na wykorzystanie stanu (stage - obiektu)?

A 
constructor(props){
super(props);
this.state={];
}
druga opcja to zamiast konstruktora

this.state={
profiles
};

37
Q

Do czego służy metoda React.createRef()

A

Pozwala na uzyskanie dostępu do elementów DOM z metody render().

38
Q

W jaki sposób możemy odczytywać wartości z komponentów?

A

Poprzez CreateRef() (bezpośrednio) lub poprzez controlled components (więcej kodu i bardziej skomplikowane scenariusze). W tym wypadku posługujemy się obiektem state. Łączymy element input i jego value do obiektu state i metodę onChange do metody setState.

39
Q

W jaki sposób React decyduje o identity elementy bez atrybutu key?

A

Założy, że pozycja elementu w liściu reprezentuje jego tożsamość.

40
Q

Do czego służy JSX?

A

Język pozwalający na wygodne generowanie komponentów JS. Podobny do szablonów.

41
Q

Czym jest embedded JSX?

A

Możemy w zmiennej trzymać html pomieszany z JS

42
Q

Czym jest embedded JSX?

A

Możemy w zmiennej trzymać html pomieszany z JS

43
Q

Pokaż przykład zmiennej zawierającej embedded JSX

A

https://github.com/petegg-pja/react-example-app/commit/ee6d53297a3fc646933f50c303fc2741b0336c26

44
Q

W przypadku JSX co może być umieszczone między {…}?

A

Dowolny poprawny kod JS.

https://github.com/petegg-pja/react-example-app/commit/2e2513ca91f8ea9ab8571c92b2f95000c24fc204

45
Q

Czy komponent musi być opakowany w jeden tag?

A

Tak

46
Q

Czy JSX może być zwracany przez funkcje lub występować w instrukcjach if?

A

Tak

https://github.com/petegg-pja/react-example-app/commit/66dc405650b21672893c7dd482d7cd1a9b1636e5

47
Q

Jak zaktualizować komponent?

A

Wywołać ponownie metodę React.Render

48
Q

Czy komponenty są immutable w React’ie?

A

Tak. Każdy komponent to migawka z filmu.

49
Q

Czy należy dodawać cudzysłów lub apostrofy do kodu oznaczonego jako atrybut w JSX?

A

Nie. Taki kod automatycznie uzyska odpowiednie apostrofy/cudzysłów.

50
Q

Czy można zagniżdżać user input w komponentach?

A

Tak, JSX jest zabezpieczony przed wstrzykiwaniem.

https://github.com/petegg-pja/react-example-app/commit/7f356f30c379666d57d6678d37f1c5c7b84bf4fb

51
Q

Jak piszemy atrybuty HTML w JSX?

A

Piszemy je następująco:

class => className

52
Q

Do czego kompilowany jest JSX przez Babel?

A 
Do React.CreateElement
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);
53
Q

W React jaka jest różnica między elementami i komponentami?

A

Komponent składa się z wielu elementów

54
Q

W jaki sposób można zaktualizować komponent/element?

A

Tylko ponownie używając metody React.Render(…);

55
Q

Wykonaj przykład pokazujący wielokrotne użycia React.createElement w celu ponownego odświeżania widoku.

A

https://github.com/petegg-pja/react-example-app/commit/5fa55553f1e398f72ee16f47bd5d1e0c8843dc45

56
Q

Wykonaj przykład pokazujący wielokrotne użycia React.createElement w celu ponownego odświeżania widoku.

A

https://github.com/petegg-pja/react-example-app/commit/5fa55553f1e398f72ee16f47bd5d1e0c8843dc45

57
Q

Pokaż w przeglądarce jak React aktualizuje wyłącznie różnice miedzy dwoma obiektami

A

https://github.com/petegg-pja/react-example-app/commit/5fa55553f1e398f72ee16f47bd5d1e0c8843dc45

React (1 decks)

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