React basics Flashcards
Jakie są podstawowe założenia biblioteki React?
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.
Jakiego rodzaju mamy komponenty?
1) Funkcyjne
const MyComponent = (props)=>{
return (
)
}
2) Klasowe (mają stan)
class MyComponent extends React.Component {
render() {
return (
) } }
Jak porównać JSX fo JS?
<div>
vs
React.createElement('div', {classContainer: 'container'},
React.createElement..
ReactDOM.render(React.createElement(Hello, null), mountNode);</div>
Jak wygląda naprostsza aplikcja React?
function Hello(){
return <div>Hello</div>;
}
ReactDOM.render(
,
document.getElementById(‘mountNode’);
);
Jak wygląda komponent funkcyjny bez JSX?
function Hello(){
return React.createElement('div', null, 'Hello React!!!');
}
ReactDOM.render(
React.createElement(Hello, null),
document.getElementById(‘mountNode’)
);
Do czego służy React Hook?
Pozwala dodać funkcjonalność do komponentu funkcyjnego - np. zarządzanie stanem.
Jak dodać stan do komponentu funkcyjnego?
Użyć metody useState(). (a - state object, updater function (setter))
Jak skorzystać z metody useState(‘key’)?
const [counter, setCounter]=useState(0);
Jak dodać uruchomienie metody w komponencie?
…
Czy jest różnica między
Tak, jedno to przekazanie wskaźnika, a inne to wywołanie i przekazanie rezultatu do nnClick
Czy można przekazać lambdę do onClick={function}
Tak, console.log(‘Ala’)}
lub
setCounter(counter+1)
Jak przekazać dane do komponentu za pomocą props?
function Button(props){
... props.message
}W jaki sposób dane/stan przepływa w aplikacji React?
Stan przepływa w dół aplikacji - od komponentu nadrzędnego do podrzędnego
Jak stworzyć komponent, który może być używany w wielu miejscach (reużywany)?
Jak nazywany jest algorytm odświeżający drzewo DOM w React?
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.
Czym jest komponent i Reactivex update?
Komponent to część interfejsu.
Jakie są przykłady React events?
Takie przykłady to onClick i onSubmit
Jak dzielimy komponenty w React?
Na funkcyjne i klasowe
Jaka jest różnica między props i state?
props są immutable, a state mutowalne
Jak nazywa się komitet wprowadzający usprawnienia do JS?
TC39
Co oznacza słówko const?
Oznacza, że referencja jest immutable
Jakie są metody programowania funkcyjnego w JS?
map, reduce i filter
Jaka jest róznica między arrow funtion i normalną funkcją? Podaj przykład
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”.
Jaki będzie wynik kodu?
const myster='answer';
const obj={
[mystery]: 42
}obj.answer=42, a obj.mystery => undefined
