Michał Miszczyszyn / typeofweb
JavaScript, HTML, CSS, TypeScript, Node.js, React.js, Angular, ReasonML
Ostatnie newsy
React.js w przykładach: filtrowanie statycznej listy
W jednym z komentarzy ktoś zasugerował mi, abym pokazywał jak najwięcej praktycznych przykładów. Inna osoba pytała konkretnie o przykład filtrowania listy na podstawie tekstu wpisywanego w input. Stwierdziłem, że warto skorzystać z tych sugestii ? Oto powstaje seria wpisów, które będą się przeplatały z kursem Reacta jako takim. Tutaj będę pokazywał konkretne przykłady i implementacje, bez tłumaczenia teorii. Pierwszym przykładem będzie właśnie taka …
Odmiana rzeczowników przy liczebnikach w języku polskim
A to Ci nietypowe temat na tym blogu ? Ale spokojnie, będzie o programowaniu ? Ostatnio szlifuję pierwszą publiczną wersję pewnej aplikacji, nad którą pracuję hobbystycznie. Gryzła mnie tylko jedna rzecz: Odmiana słów przy liczbach. Temat powszechnie znany i irytujący. Jak ładnie i prosto zapisać w kodzie „1 komentarz”, „2 komentarze” ale „5 komentarzy”? Czy da się to jakoś zautomatyzować? Podany przykład muszę zapisać w postaci kodu. …
Metody cyklu życia komponentu w React.js
Przy okazji omawiania komponentów będących klasami w React.js, wspomniałem też o możliwości korzystania z metod cyklu życia (lifecycle methods). Chciałbym do tego tematu teraz powrócić. Pokażę jakie metody cyklu życia definiuje React.js, do czego one służą i kiedy mogą się przydać. Cykl życia komponentu Każdy komponent ma pewien określony cykl życia. Na odpowiednich etapach wywoływane są też …
State w React.js 2
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… Pod koniec poprzedniego wpisu zadałem podchwytliwe ćwiczenie dotyczące state w React.js. Jeśli jeszcze go nie wykonałaś/eś to teraz jest ten moment, aby wrócić i spróbować ? W tym wpisie rozwijam temat state, opisuję dokładniej jak działa setState i jakie argumenty przyjmuje. Zacznijmy może od wykonania ćwiczenia z poprzedniego wpisu. Zadanie brzmiało tak: Dodaj dwa nowe liczniki. Pierwszy, który będzie zliczał …
Podsumowanie roku 2017 i plany na 2018
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łaśnie wracam z ponad dwutygodniowego urlopu. Była to dla mnie całkowita przerwa od wszystkiego co robię na codzień — przerwa od pracy, od bloga, bez internetu, z dala od domu. Życzyłem Wam chwili wytchnienia od projektów, dedlajnów i fakapów — i sam się do swoich zaleceń zastosowałem ? W tym wpisie chciałbym, po krótkim odpoczynku i zdystansowaniu się, podsumować rok 2017. Dalej opiszę swoje plany na 2018, aby za kolejne …
Stan komponentów React.js
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… Przyszedł czas na poznanie tajemniczego state w React.js. Udało nam się tworzyć komponenty, które pięknie wyświetlały przekazane propsy, ale trzeba przyznać szczerze: Bez wewnątrznego stanu nie da się zbudować funkcjonalnej aplikacji. Dzisiaj nauczysz się taki stan dodawać i wykorzystywać ? Zacznijmy może od typowego przykładu powielonego w wielu kursach: Licznika. Stwórz komponent, który ma dwa przyciski (plus i minus) oraz output na …
Joi — walidacja danych
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… Walidacja danych to bardzo ciekawy i rozbudowany temat, a ja znalazłem swoją ulubioną paczkę do tego ? Ten wpis poświęcam w 100% bibliotece Joi. Wbrew pozorom, nie jest to wcale tak banalna sprawa, jakby się mogło wydawać! Joi służy do walidacji danych w Node.js. Można jej używać z dowolnym frameworkiem, ale, co dla mnie istotne, jest mocno zintegrowana z HapiJS! O Joi… Dość …
Interakcja z komponentami React.js
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… Tworzenie aplikacji nie miałoby sensu, gdyby użytkownik nie mógł wchodzić z nią w interakcje ? Dzisiaj nauczysz się obsługiwać zdarzenia wywoływane przez użytkowników: Kliknięcia, najechania kursorem, zmiany tekstu w polu tekstowym… oczywiście w React.js. Zdarzenia w JS Wszystkie interakcje użytkownika z aplikacją w przeglądarce opierają się o zdarzenia. W czystym JS, aby takie eventy móc obsługiwać, używamy przeznaczonych do tego funkcji, które tworzą i usuwają …
Klasy jako komponenty React.js
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 używaliśmy prostych funkcji i z nich tworzyliśmy komponenty React. Mimo, że przeważająca część komponentów, które tworzę są właśnie takimi prostymi funkcjami, to jednak nie wszystkie. Funkcje są bardzo przydatne, jednak poniekąd ograniczone. Jak więc inaczej można tworzyć komponenty w React.js? Używając klas! Stateless Functional Component SFC, albo Stateless Functional Component — tak profesjonalnie nazywają się te komponenty, które do tej pory …
Podział na komponenty w React.js
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 tej części skupisz się na teorii i praktyce dzielenia zaprojektowanych aplikacji na poszczególne komponenty. Zaczniesz też tworzyć prostą appkę — menedżer kontaktów. W planach wyświetlanie, dodawanie i edycja kontaktów. Ale najpierw — musimy przecież zaprojektować HTML i CSS dla tej aplikacji. Projekt Przyjrzyj się temu co będziesz budował(a). Będzie to lista kontaktów, ale na początku spójrz tylko na pierwszy widok: To dzisiaj „potniemy” i podzielimy na komponenty React.js w JSX. …
Hackowanie CSS
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… Numerem 1 podatności aplikacji internetowych wg. OWASP jest szerokopojęte „Injection”. Zazwyczaj kiedy o tym mówimy gdzieś z tyłu głowy mamy wyłącznie JavaScript i tylko XSS. A to przecież błąd ? W tym wpisie pokażę Ci jak można wykorzystać ciekawe elementy języka CSS do kradzieży wrażliwych danych z aplikacji ofiary. Wpis powstał na podstawie mojej prezentacji z UnleashConf 2017 w Krakowie (występowałem z nią również na meet.js Gdańsk). …
Props czyli atrybuty w React.js
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 tej części nauczysz się parametryzować komponenty w React.js. Poznasz pojęcie „props” oraz dowiesz się do czego one (te „propsy”) służą. To co zrobiliśmy do tej pory było spoko, ale przecież nie będziesz tworzyć nowego komponentu zawsze gdy będziesz chciał(a) wyświetlić inny tekst w aplikacji, prawda? Wyobraź sobie, że masz do zaprojektowania popup, w którym będzie wyświetlony tytuł oraz tekst. Za moment to zaimplementujemy! Projekt Zacznijmy od zaprojektowania kodu takiego …
Pierwszy komponent w React.js
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 tym wpisie pokażę prosty komponent React.js, opiszę jego budowę i podstawowe elementy. Napiszemy też (razem) pierwszą pełnoprawną aplikację w React, którą będziesz mogła/mógł uruchomić u siebie na dysku. Będzie to baza do dalszych części kursu React.js. Wróćmy do poprzedniego przykładu, tak zwanego Hello World, w React.js. Oto on, tym razem w pełnej okazałości: …
Poznaj React.js
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 jest biblioteką do budowania interfejsów w JavaScript, stworzoną przez Facebooka. React zdobył ogromną popularność wśród programistów i jest jedną z tych bibliotek, w których pisze się całkiem przyjemnie. Koncept Reacta opiera się o znane od dawna wzorce, które zostały tutaj odświeżone i zunifikowane: Jednokierunkowy przepływ danych i budowanie aplikacji w oparciu o komponenty. Co to jest React.js? React nie jest kompletnym frameworkiem — jest raczej …
Wprowadzenie do kursu React.js od podstaw
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… Oto kurs React.js od podstaw. Moje gratulacje za podjęcie tego tematu! To pierwszy krok w kierunku realizacji Twoich ambicji i poznania tego niezwykle przydatnego narzędzia. Ten kurs React.js sprawi, że będziesz umiał(a) tworzyć rozbudowane i profesjonalne aplikacje internetowe oraz przybliży Cię do celu jakim zapewne jest znalezienie pracy w tej technologii. Na pewno warto! Skąd u mnie w ogóle pomysł opracowania tego tematu? Odpowiedź jest prosta: …
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.