Michał Miszczyszyn / typeofweb
JavaScript, HTML, CSS, TypeScript, Node.js, React.js, Angular, ReasonML
Ostatnie newsy
useMemo, useCallback, czyli rozwiązanie problemów ze zmieniającymi się propsami
Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Powszechnym zmartwieniem osób poznających komponenty funkcyjne jest tworzenie funkcji-callbacków przekazywanych dalej jako props. Wszak przy każdym renderze funkcja tworzona jest na nowo! Czy to aby nie marnotrastwo? Czy nie powoduje to problemów? React Hooks useMemo i useCallback przychodzą na ratunek! Problem z funkcjami Weźmy prosty komponent, w którym tworzony jest callback handleClick przekazywany jako props dalej: function MyComponent({ oneProp, anotherProp }) { …
useMemo, useCallback, czyli rozwiązanie problemów ze zmieniającymi się propsami
Type of Web - Blog o programowaniu. Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Powszechnym zmartwieniem osób poznających komponenty funkcyjne jest tworzenie funkcji-callbacków przekazywanych dalej jako props. Wszak przy każdym renderze funkcja tworzona jest na nowo! Czy to aby nie marnotrastwo? Czy nie powoduje to problemów? React Hooks useMemo i useCallback przychodzą na ratunek! Problem z funkcjami Weźmy prosty komponent, w którym tworzony jest callback handleClick przekazywany jako props dalej: function MyComponent({ oneProp, anotherProp }) { …
useReducer — przenoszenie logiki poza komponent
Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… useReducer to alternatywa dla useState. Ale po co i kiedy jej używać? W skrócie: Gdy logika komponentu się rozrasta i chcemy oddzielić ją całkowicie od widoku. Zgodnie z dobrymi praktykami! Użycie useReducer useReducer i useState pełnią bardzo podobne role: Służą do ustawiania stanu komponentu. Robią to jednak w inny sposób. Przypominam: useState przyjmuje stan początkowy, a zwraca aktualny stan i funkcję do ustawiania stanu: const [count, setCount] = …
useReducer — przenoszenie logiki poza komponent
Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… useReducer to alternatywa dla useState. Ale po co i kiedy jej używać? W skrócie: Gdy logika komponentu się rozrasta i chcemy oddzielić ją całkowicie od widoku. Zgodnie z dobrymi praktykami! Użycie useReducer useReducer i useState pełnią bardzo podobne role: Służą do ustawiania stanu komponentu. Robią to jednak w inny sposób. Przypominam: useState przyjmuje stan początkowy, a zwraca aktualny stan i funkcję do ustawiania stanu: const [count, setCount] = …
useReducer — przenoszenie logiki poza komponent
Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… useReducer to alternatywa dla useState. Ale po co i kiedy jej używać? W skrócie: Gdy logika komponentu się rozrasta i chcemy oddzielić ją całkowicie od widoku. Zgodnie z dobrymi praktykami! Użycie useReducer useReducer i useState pełnią bardzo podobne role: Służą do ustawiania stanu komponentu. Robią to jednak w inny sposób. Przypominam: useState przyjmuje stan początkowy, a zwraca aktualny stan i funkcję do ustawiania stanu: const [count, setCount] = …
useReducer — przenoszenie logiki poza komponent
Type of Web - Blog o programowaniu. Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… useReducer to alternatywa dla useState. Ale po co i kiedy jej używać? W skrócie: Gdy logika komponentu się rozrasta i chcemy oddzielić ją całkowicie od widoku. Zgodnie z dobrymi praktykami! Użycie useReducer useReducer i useState pełnią bardzo podobne role: Służą do ustawiania stanu komponentu. Robią to jednak w inny sposób. Przypominam: useState przyjmuje stan początkowy, a zwraca aktualny stan i funkcję do ustawiania stanu: const [count, setCount] = …
React Hooks a żądania do API
Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… React Hooks mocno upraszczają właściwie wszystko, co do tej pory robiłaś. W jednym z pierwszych odcinków kursu pokazywałem, jak można w szybki sposób pobierać dane z API używając fetch w Reakcie. Czy Hooki coś tutaj zmieniają? Ależ tak! Fetch do tej pory Zaczniemy może od przyjrzenia się, jak taki fetch wyglądał do tej pory w klasach: export class App extends React.Component { state = { contacts: …
React Hooks a żądania do API
Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… React Hooks mocno upraszczają właściwie wszystko, co do tej pory robiłaś. W jednym z pierwszych odcinków kursu pokazywałem, jak można w szybki sposób pobierać dane z API używając fetch w Reakcie. Czy Hooki coś tutaj zmieniają? Ależ tak! Fetch do tej pory Zaczniemy może od przyjrzenia się, jak taki fetch wyglądał do tej pory w klasach: export class App extends React.Component { state = { contacts: …
React Hooks a żądania do API
Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… React Hooks mocno upraszczają właściwie wszystko, co do tej pory robiłaś. W jednym z pierwszych odcinków kursu pokazywałem, jak można w szybki sposób pobierać dane z API używając fetch w Reakcie. Czy Hooki coś tutaj zmieniają? Ależ tak! Fetch do tej pory Zaczniemy może od przyjrzenia się, jak taki fetch wyglądał do tej pory w klasach: export class App extends React.Component { state = { contacts: …
React Hooks a żądania do API
Type of Web - Blog o programowaniu. Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… React Hooks mocno upraszczają właściwie wszystko, co do tej pory robiłaś. W jednym z pierwszych odcinków kursu pokazywałem, jak można w szybki sposób pobierać dane z API używając fetch w Reakcie. Czy Hooki coś tutaj zmieniają? Ależ tak! Fetch do tej pory Zaczniemy może od przyjrzenia się, jak taki fetch wyglądał do tej pory w klasach: export class App extends React.Component { state = { contacts: …
10 powodów, dla których używam jQuery razem z React
Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… W dobie frameworków takich jak React i bibliotek takich jak Angular, można by pomyśleć, że jQuery nie ma już prawa bytu. Nic bardziej mylnego! Ten najpopularniejszy dawniej framework nadal jest niezwykle przydatny w codziennej pracy! Wpis powstał z okazji 1. kwietnia 2019 r. Ale… Wiem co teraz myślicie: „Ale przecież wszyscy hejtują jQuery!”. No jasne, na forach i na Facebooku tak. …
10 powodów, dla których używam jQuery razem z React
Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… W dobie frameworków takich jak React i bibliotek takich jak Angular, można by pomyśleć, że jQuery nie ma już prawa bytu. Nic bardziej mylnego! Ten najpopularniejszy dawniej framework nadal jest niezwykle przydatny w codziennej pracy! Ale… Wiem co teraz myślicie: „Ale przecież wszyscy hejtują jQuery!”. No jasne, na forach i na Facebooku tak. W praktyce jednak… okazuje się, że aż 94% …
10 powodów, dla których używam jQuery razem z React
Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… W dobie frameworków takich jak React i bibliotek takich jak Angular, można by pomyśleć, że jQuery nie ma już prawa bytu. Nic bardziej mylnego! Ten najpopularniejszy dawniej framework nadal jest niezwykle przydatny w codziennej pracy! Wpis powstał z okazji 1. kwietnia 2019 r. Ale… Wiem co teraz myślicie: „Ale przecież wszyscy hejtują jQuery!”. No jasne, na forach i na Facebooku tak. …
10 powodów, dla których używam jQuery razem z React
Type of Web - Blog o programowaniu. Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… W dobie frameworków takich jak React i bibliotek takich jak Angular, można by pomyśleć, że jQuery nie ma już prawa bytu. Nic bardziej mylnego! Ten najpopularniejszy dawniej framework nadal jest niezwykle przydatny w codziennej pracy! Wpis powstał z okazji 1. kwietnia 2019 r. Ale… Wiem co teraz myślicie: „Ale przecież wszyscy hejtują jQuery!”. No jasne, na forach i na Facebooku tak. …
Obsługa zdarzeń w Vue.js za pomocą dyrektywy v-on
Type of Web - Dla front-end i back-end developerów. Trochę o urokach pracy zdalnej, ale przede wszystkim o: JavaScript, React, Vue, Angular, node.js, TypeScript, HapiJS… Aby aplikacja była ciekawa, musi pozwalać użytkownikowi na interakcję. Może to być nie tylko wprowadzanie danych do pól formularzy, ale również reagowanie na zdarzenia kliknięcia, czy ruchy myszką. Niezależnie od tego, jaki rodzaj interakcji chcesz oprogramować, Vue.js pozwoli Ci obsłużyć go za pomocą dyrektywy v-on. Dyrektywa v-on Dzięki dyrektywie v-on możesz nasłuchiwać na zdarzenia DOM i wykonać kod JavaScript gdy one zajdą. Wartością …
typeofweb
JavaScript, HTML, CSS, TypeScript, Node.js, React.js, Angular, ReasonML
Michał jest programistą JavaScript z wieloma latami profesjonalnego doświadczenia. Organizator meet.js Summit i meet.js Gdańsk. Bloger na typeofweb.com, a okazyjnie także prelegent.