Michał Miszczyszyn / typeofweb
JavaScript, HTML, CSS, TypeScript, Node.js, React.js, Angular, ReasonML
Ostatnie newsy
Formularze w React.js — niekontrolowane komponenty
Część druga formularzy w React.js — tym razem formularze tak zwane „niekontrolowane” — czyli Uncontrolled Components. Czym są i jak się ich używa? No i po co Ci w ogóle formularze niekontrolowane w React.js? Niekontrolowane formularze — Uncontrolled Components W większości przypadków poleca się używanie jednak kontrolowanych formularzy. Jak już wcześniej pisałem, w kontrolowanych formularzach to React jest jedynym źródłem danych i tylko React kontroluje …
Tworzymy własne Dependency Injection w TypeScript
Najlepiej uczy się na konkretnych przykładach. Dzisiaj napiszesz własną bibliotekę do Dependency Injection w TypeScripcie! Przydadzą nam się dekoratory, metadane, refleksja i kilka sztuczek. Do dzieła ? Zaczynamy Upewnij się, że masz zainstalowaną najnowszą wersję TypeScript (aktualnie 2.7.0). Do szybkiego testowania kodu przyda się też ts-node, więc warto go doinstalować. Zaczynam od skonfigurowania projektu w TypeScripcie. To nigdy nie było prostsze niż teraz: npm …
Jak nie zrobimy z Ciebie programisty w dwa miesiące
Jestem absolwentką dwóch kursów programowania: Front-end z biblioteką React oraz podstaw Javy. Po kilku latach spędzonych za granicą i odłożeniu odpowiedniej ilości pieniędzy, postanowiłam świadomie dokonać w swoim życiu przewrotu. Ze specjalistki ds. marketingu internetowego chciałam przebranżowić się w programistkę. Uczestnictwo w pierwszym kursie planowałam przez kilka miesięcy i opłaciłam z własnych środków. Decyzja o skorzystaniu z drugiego kursu zapadła spontanicznie. Głównie ze względu na to, że koszty …
Formularze w React.js — niekontrolowane komponenty
Dzisiaj zajmiesz się imlementacją formularzy w React.js. Już wcześniej dokonywałaś/eś interakcji z polami formularza — ale raczej w prosty sposób. Dzisiaj o formularzach kontrolowanych w React.js Kontrolowane formularze w React.js Kontrolowane komponenty w React.js (Controlled Components) — to takie komponenty, których wewnętrzny stan jest kontrolowany przez Reacta. O czym mówię? Weźmy prosty kod: Ten input nie jest kontrolowany przez Reacta dlatego, że jego …
Formularze w React.js — kontrolowane komponenty
Dzisiaj zajmiesz się imlementacją formularzy w React.js. Już wcześniej dokonywałaś/eś interakcji z polami formularza — ale raczej w prosty sposób. Dzisiaj o formularzach kontrolowanych w React.js Kontrolowane formularze w React.js Kontrolowane komponenty w React.js (Controlled Components) — to takie komponenty, których wewnętrzny stan jest kontrolowany przez Reacta. O czym mówię? Weźmy prosty kod: Ten input nie jest kontrolowany przez Reacta dlatego, że jego …
X-Team — opis, rekrutacja, moja opinia
Od momentu gdy zdecydowałem się na 100% pracę zdalną, kilka razy zmieniałem już „pracę” — klientów. Od pewnego czasu współpracuję z X-Team. Jak mi jest z X-Team? Dawno obiecywałem sobie, że opiszę moje doświadczenia z tą firmą i ten dzień nadszedł właśnie dzisiaj. Jeśli szukasz tylko krótkiego podsumowania to bardzo proszę: Jest super. X-Team X-Team to australijska agencja z benefitami ? Działa na zasadzie pośrednictwa pomiędzy programistami …
Komunikacja z API w React.js
Bardzo często powracającym wątkiem jest pytanie o to, w jaki sposób zaimplementować komunikację z API w React.js. Moja odpowiedź może Cię nieco zaskoczyć: React nie ma nic do tego. Możesz to robić absolutnie dowolnie. Plan Rozpatrzę teraz popularny przypadek: W momencie załadowania aplikacji, potrzebuję pobrać jakieś dane z API. Gdy już będą gotowe — chcę je wyświetlić. Brzmi dobrze? Rozbuduję więc swój poprzedni przykład: Znaną i lubianą …
Komunikacja pomiędzy komponentami w React.js
Przyszedł ten moment, gdy Twoja aplikacja zaczyna się rozrastać i zmagasz się z różnymi problemami z architekturą. Zacznijmy od prostego problemu: Komunikacja pomiędzy komponentami. Ale nie tylko tymi, które są bezpośrednio obok siebie, ale też tymi dowolnie oddalonymi w aplikacji… Napisałem wcześniej podobne artykuły na temat AngularJS (link) i Angular2 (link). Wiedza tam zawarta jest w dużej części uniwersalna i możesz chcieć do nich zajrzeć. …
Odpowiadam na pytania: Babel, ECMAScript, destrukturyzacja, onClick, className
W komentarzach na blogu i na Facebooku pojawiło się całe mnóstwo różnych pytań do mnie. Super! Staram się odpowiadać na nie na biężąco. Ale teraz postanowiłem też zebrać je w jednym miejscu wraz z odpowiedziami — i stworzyć swego rodzaju kompendium wiedzy ? Jeśli masz jakieś pytania to pisz! Odpowiem na nie w jednym z kolejnych wpisów. Wasze pytania i odpowiedzi Babel — co on tak naprawdę robi? Myślałem, że kompiluje tylko ES6, a Ty napisałeś, …
Poprawne bindowanie funkcji w React.js
Jak pewnie zauważyłaś/eś — wywołanie metody klasy w React.js z poziomu funkcji render kończy się źle, o ile nie użyjesz bind. Wspominałem też o tym w kursie i sam używałem po prostu bind w czasie renderowania. Ale czy to dobre rozwiązanie? Co z wydajnością i czytelnością takiego kodu? bind w ogóle Zacznijmy może w ogóle od tego po co Ci bind i co ta funkcja robi ? Otóż w JS-ie metody tak naprawdę …
Testowanie React.js w Enzyme — props, state i interakcje
Pokazałem już jak pisać proste testy do aplikacji React.js z użyciem Enzyme. Sprawdzanie czy coś się renderuje, czy zawiera tekst, czy dobrze pokazuje elementy… W tym wpisie idę o krok dalej. Pokazuję jak w Enzyme testować interakcje z komponentami, odczytywać i zmieniać propsy a także state. Pobieranie i ustawianie propsów oraz state Na elementach (selektorach) Enzyme można wywołać kilka ciekawych metod. W tym momencie interesują …
Testowanie aplikacji React.js — podstawy Enzyme
Testowanie aplikacji to rzecz ważna. Do tej pory jednak nie wspomniałem ani słowem o testowaniu React.js. Czas najwyższy to zrobić! I od razu wrzucam Cię na głęboką wodę — użyjesz React.js i Enzyme — przemiłej biblioteki do testowania komponentów. O zaletach samego testowania nie muszę chyba pisać. Utrzymanie kodu, łatwiejsze dodawanie nowych funkcji, testy służące jako dokumentacja… bajka ? Dlatego teraz po prostu weźmiesz poprzedni przykład …
React.js na GitHub Pages dzięki create-react-app
Bardzo często początkujący pytają mnie gdzie mogą łatwo wrzucić nieco bardziej rozbudowany projekt, żeby go pokazać. Nie mają swojego hostingu, na Codepenie nie będzie to wygodne jeśli aplikacja podzielona jest na wiele plików. Co robić? Zazwyczaj odpowiadam: GitHub Pages. GitHub Pages GitHub Pages to specyficzny rodzaj hostingu. Pozwala Ci hostować i udostępnić innym to, co wrzucisz do repozytorium na GitHubie. …
Tworzenie aplikacji React.js dzięki create-react-app
Do tej pory pokazałem kilka przykładów z React.js, a wszystkie wrzuciłem na codepen. Jak się pewnie domyślasz, tworzenie rozbudowanych aplikacji wygląda nieco inaczej. Dzielisz je na wiele plików, chcesz odpalać testy jednostkowe, a ostatecznie chciałabyś kod zminifikować. create-react-app to paczka pozwalająca na łatwe stworzenie projektu opartego o React.js. Tworzy dla Ciebie strukturę katalogów i plików, zawiera wszystkie potrzebne na początek narzędzia i pozwala …
Nowa inicjatywa: Recenzje portali z pracą zdalną
Praca zdalna jest celem dla wielu osób. Wiele razy ludzie pytali mnie: „Gdzie szukać pracy zdalnej?”. Z pamięci jestem w stanie przytoczyć zazwyczaj tylko kilka serwisów. A przecież podobnych portali z pracą zdalną w Internecie na pewno jest więcej! Dlatego stworzyłem stronę, na której zbierzemy wszystkie interesujące portale z pracą zdalną! Znajdź pracę zdalną z tymi serwisami. Chcę stworzyć zbiór portali …
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.