Michał Miszczyszyn / typeofweb
JavaScript, HTML, CSS, TypeScript, Node.js, React.js, Angular, ReasonML
Ostatnie newsy
Wprowadzenie do kursu Vue.js od podstaw
Oto kurs Vue.js! Moje gratulacje za podjęcie tego tematu! Vue.js to bardzo popularna biblioteka i warto ją poznać! Poznaj framework JavaScript Vue!
Leniwe ładowanie komponentów w React dzięki import
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… Czy w React da się ładować komponenty leniwie? A więc masz już sporą aplikację. Chcesz ją jakoś zoptymalizować. Do głowy przychodzi Ci, oczywiście, podział jej na kilka części, które będą ładowane na żądanie, dopiero gdy będą potrzebne — tzw. lazy load. Z pomocą przychodzi operator import(…) — po prostu! Operator import(…) Składni import something from 'something' używasz na pewno codziennie. W skrócie, powoduje ona, że dana zależność …
Nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate
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… Od wersji React 16.3 funkcje componentWillMount, componentWillReceiveProps i componentWillUpdate zostają oznaczone jako deprecated. Pojawiają się też dwie nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate. Co to dla nas oznacza? Do czego one służą? Jak ich używać? Informacje o pozostałych lifecycle methods w React znajdziesz tutaj: Metody cyklu życia komponentu w React.js Co złego w starych metodach? W React wprowadzony zostaje powoli Async Rendering …
24 blogi, które musi śledzić każdy JavaScript developer
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… Wciąż pytacie jakie blogi polecam śledzić. A ja nigdy nie pamiętam ? No, ale teraz jest już cała lista! Moja lista polecanych linków dla front-end developerów! To drugi wpis z serii. Blogi Na drugi ogień idą blogi, po grupach na Facebooku. Dla przypomnienia: 20 grup na Facebooku, które powinien śledzić każdy front-end developer Warto przeczytać oba wpisy i znaleźć tam coś dla …
Kiedy używać state, a kiedy Redux?
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… Bardzo często osoby poznające bibliotekę Redux próbują przenieść cały stan każdego komponentu do Reduksowego store’a. Czy to ma sens? Czy powinnaś całkowicie przestać używać setState? Nie ma nic złego w state Naprawdę. Nie ma nic złego w używaniu setState. Ale kiedy użyć setState, a kiedy Reduksa? W podjęciu decyzji może Cię wspomóc lista pytań pomocniczych. Znajdziesz je poniżej! Czy te dane dotyczą tylko jednego komponentu czy kilku? Prosta …
Asynchroniczność w Redux: redux-thunk
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… Do tej pory dane z API pobierałem po prostu w komponencie App, a po przyjściu odpowiedzi wysysyłałem odpowiednią akcję (contactsFetched). To działało. Ale wymyśliłem sobie nową funkcję w aplikacji: Możliwość parametryzowania zapytań do API. Posłuży mi do tego nowy komponent. Jak teraz mam wykonywać zapytania do API? Przekazywać coś do store, a to coś wpłynie na App, który wykona zapytanie i zwróci dane znowu do store? Nie brzmi za dobrze. Ale jest lepszy …
Projektowanie komponentów: Presentational & Container Components
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… Często w różnych artykułach poświęconych Reactowi i Reduksowi napotkasz takie sformułowania jak Presentational and Container Components albo Skinny and Fat Components albo Dumb and Smart Components i być może jeszcze kilka innych podobnych ? Wszystkie te określenia oznaczają to samo: Podział komponentów na 2 rodzaje: Służące prezentacji oraz zawierające logikę. Presentational Components Bardzo lubię określenie dumb, bo ono naprawdę …
React + Redux — filtrowanie listy, proste selektory
Jak dokładnie wygląda komunikacja pomiędzy komponentami przy użyciu Redux w React? W tym wpisie pokazuję jak zaimplementować filtrowanie listy przy użyciu Reduksa. Na dokładkę — poznasz pojęcie „selektor” i pewien ważny koncept w Reduksie. Do kodu! Komponenty a Redux Komunikowanie ze sobą komponentów, które leżą blisko siebie to bułka z masłem. Do tego bynajmniej nie jest potrzebny Redux ? Jeśli nie pamiętasz to odśwież sobie pamięć na temat …
Czy React.Amsterdam to najgorsza konferencja na jakiej byłem?
Zachęcony ciekawym miejscem, dobrą agendą i tematyką, kupiłem bilet na React.Amsterdam. I poleciałem. Jakie są moje wrażenia? Jaka jest moja opinia? Czy była to najgorsza konferencja na jakiej byłem? tl;dr: Tak. React.Amsterdam Do Amsterdamu przyleciałem dzień wcześniej, z nadzieją na jakieś zwiedzanie. W praktyce cały poranek przespałem, a popołudnie pracowałem ? Mniejsza o to. Skupmy się na konferencji. Następnego dnia rano poszliśmy w kierunku dworca …
TDD w React.js z pomocą react-testing-library
Jak tworzyć komponenty w React.js zgodnie z TDD dzięki react-testing-library? Jak zamockować axios? Jak napisać testy odporne na refactoring? To i kilka innych sztuczek w artykule poniżej ? Trzymanie się zasad TDD (Test-Driven Development) pisząc aplikacje po stronie front-endu w React.js może wydawać się trudniejsze niż testowanie kodu po stronie back-endu. Musimy w jakiś sposób wyrenderować nasz komponent, zasymulować interakcje …
Lokalny serwer HTTP: Proste sposoby na problemy z file:///
Po co Ci lokalny serwer HTTP? Bardzo wiele osób skarży się mi na dziwne problemy z aplikacjami. Błędy są przeróżne, a często mają wspólne źródło: Próba otwarcia pliku .html w przeglądarce przez file:// i brak serwera HTTP. Błędy protokołu file:// Przykładem błędu, na który często skarżą się czytelnicy jest: XMLHttpRequest cannot load file://…… Cross origin requests are only supported for protocol …
React + Redux — kurs: wprowadzenie i podstawy
Redux! Kurs Reacta dorobił się odcinka o Reduksie! Powoli wprowadzę Cię świat Reduksa, nauczysz się używać tej łatwej biblioteki, poznasz koncepty stojące za nią i napiszesz prostą aplikację. Redux: Oto wpis, na który wszyscy czekali! ? Nie będzie teorii. Od razu zaczniemy używać Reduksa. Bo on jest tak naprawdę niesamowicie łatwy w obsłudze. Brzmi dobrze? Zaczynajmy! Układ folderów przedstawiony w tym wpisie jest …
16 grup na Facebooku, które powinien śledzić każdy front-end developer
Często pytacie mnie jakie strony, blogi, newslettery, RSS-y i Twittery śledzę. Zazwyczaj nie potrafiłem na to pytanie szybko odpowiedzieć, bo nie miałem nigdzie pod ręką zebranej listy. Dotychczas. Ale oto jest. Powtaje. Moja lista polecanych linków dla front-end developerów! To pierwszy wpis z serii. Grupy na Facebooku dla front-end developerów Zacznijmy od grup na Facebooku. Tam przeniosła się większość ciekawych dyskusji. Tutaj na bieżąco …
Flux i Redux
Na codzień korzystam z Redux razem z React. Dawniej używałem też własnej implementacji architektury Flux razem z AngularJS. Postanowiłem napisać o tym koncepcie coś więcej — bo jest to bez wątpienia bardzo ciekawe! Jednokierunkowy przepływ danych, akcje, dispatcher, action creator, reducer… to wszystko w tym wpisie ? A do tego klarowne, praktyczne przykłady! Gdy opisywałem sposoby komunikacji pomiędzy kontrolerami w AngularJS, poniekąd celowo pominąłem …
Odpowiadam na pytania: props, nawiasy klamrowe, funkcje vs klasy, import react
Kolejna seria Waszych pytań i moich odpowiedzi na temat React. W komentarzach i na fejsie pojawia się ich mnóstwo, staram się wyłapywać, zapisywać i kompilować w postaci artykułu. Oto one ? Wasze pytania i odpowiedzi Jaka jest różnica pomiędzy props="{login}" a props={login}? To co wpiszesz wewnątrz "" będzie traktowane jako ciąg znaków. A więc props="{login}" spowoduje przekazanie do komponentu ciągu znaków "{login}". Drugia wersja, czyli props={login} …
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.