Wprowadzenie do kursu React.js od podstaw

Ten wpis jest 1 częścią z 3 w kursie React.js
wp-content/uploads/2017/10/React_logo_wordmark-300x101-1-e1508612391308.png
  1. Wprowadzenie do kursu React.js od podstaw
  2. Poznaj React.js
  3. Pierwszy komponent w React.js

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: nie chcę, abyś musiał(a) po omacku przechodzić przez gąszcz dokumentacji i tutoriali React.js — jak robiłem to ja.

Kurs React.js

Jeśli zaglądałaś/eś tutaj wcześniej to pewnie drapiesz się teraz po głowie i zastanawiasz skąd w ogóle ta seria wpisów. Tak, to prawda, dawniej byłem mocno związany z AngularJS, stworzyłem w nim wiele projektów i uwielbiałem tę technologię. Pracowałem też z Angularem 2, a teraz pracuję z React. I muszę przyznać, że jednak to z Reactem pracuje mi się dotąd najlepiej. Czuję, że technologia w niczym mnie nie ogranicza, że mogę użyć Reacta w wielu miejscach, na różne sposoby i nic nie stoi na przeszkodzie, aby połączyć go z dowolnymi innymi rozwiązaniami, które sobie upodobam. Wolność i swoboda 🙂 Dlatego powstaje ten kurs React.js.

Moje własne doświadczenia tylko dowodzą od dawna powtarzanej prawdy — trzeba cały czas zachować otwarty umysł. Nawet jeśli nigdy nie próbowałeś React, to może właśnie ten moment? Na pewno warto zapoznać się przynajmniej z podstawowymi konceptami, nie tylko dlatego, że React.js jest najbardziej popularnym rozwiązaniem na front-endzie, ale także dlatego, że są to zasady i wzorce uniwersalne.

Co dalej?

Jednocześnie ta seria wpisów jest początkiem czegoś zupełnie nowego! Nowa formuła. Od teraz, w małych odstępach czasu, będę publikował kolejne części serii, w której poznasz React. Wpisy będą krótkie, lekkie i przystępne, i będą się pojawiały częściej niż zwykle. W kolejnych wpisach m.in. stworzysz pierwszy kompletny komponent, poznasz JSX, nauczysz się składać komponenty niczym klocki i zapoznasz się z cyklem życia komponentów. Postaram się też wyjaśnić jak wygląda podejście React do przepływu danych, gdzie używać stanu komponentów, jak można przechowywać stan całej aplikacji i wiele innych rzeczy… Konkretnie, bez owijania w bawełnę 🙂 Mam nadzieję, że ta forma Ci się spodoba.

Idealnie byłoby, gdyby udało Ci się przeznaczyć pewien określony czas regularnie na naukę nowych rzeczy. Codziennie kilka linii kodu. Co dwa dni stronę w dokumentacji. Co tydzień dokładnie przerób jeden odcinek kursu. Albo nawet tylko jeden akapit. Mały krok przybliżający Cię do celu każdego dnia — oto klucz do sukcesu! Cokolwiek co pozwoli Ci systematycznie osiągnąć cel jakim jest poznanie React.js. Nie musisz tego robić codziennie, ale nie czekaj ze startem za długo. Chcesz poznać React.js? Zacznij teraz! Zaufaj mi, to jest aż tak proste.

Jeśli chcesz być na bieżąco z kolejnymi wpisami to zapisz się na newsletter poniżej i śledź mnie na Facebooku.

Ćwiczenie

Po każdym wpisie w serii będzie się pojawiało krótkie ćwiczenie, które musisz wykonać 🙂 Będzie to podsumowanie wszystkiego czego miałaś/eś się nauczyć w danej części kursu. Tak również jest i w tym wpisie!

Ćwiczenie: Napisz w komentarzu czego chciałabyś/chciałbyś się nauczyć, jakie są Twoje oczekiwania oraz jakie masz cele. Chcesz się rozwijać? Szukasz pracy? A może jeszcze coś innego?

Nawigacja po kursie:
  1. Wprowadzenie do kursu React.js od podstaw
  2. Poznaj React.js
  3. Pierwszy komponent w React.js
  • Zapowiada się ciekawa seria. Bartek u siebie na nafrontendzie też ma bardzo dobr artki o React, więc gdy powstaną dwa takie blogi to wreszcie stworzy się coś konkretnego o React w języku polskim 🙂
    A skoro pytasz o oczekiwania czytelników to może na początek coś o strukturze plików/folderów w React, np. bez redux i z redux 🙂 Wydaje mi się, że tego troszkę brakuje w polskiej sieci, a jest to dość istotne. Sam chętnie poznam jakieś inne punkty widzenia, bo przyznam, że chyba ostatnio popadłem w pewną rutynę co do aplikacji w React…

  • Kuba

    Chętnie poczytał bym o komunikacji z API (jakieś podstawowe żądania GET czy POST) i o routingu:)

  • Kuba

    Chętnie poczytał bym o komunikacji z API (jakieś proste żądania GET czy POST) oraz o routingu:)

  • a ja z chęcią poczytam o praktycznym wykorzystaniu react.
    Dlaczego o tym piszę? Bo wszelkiego rodzaju tuty są o błahostkach w stylu „5mb kodu, framework, automatyzacja, składnia taka i siaka, nazewnictwo i w końcu po 30 minutach walki wyświetliłem napis >>test<< w tym divie". Brakuje praktycznego podejścia do frameworków- większość przykładów "zastosowania" ma większą rację bytu w vanilla.js niz z uzyciem tego czy innego frameworka- zarowno pod katem szybkości wykonywania kodu jak i prostoty jego wykonania.
    Kurs dużo zyska, gdy dasz prostą odpowiedź "dlaczego tu wykorzystam react, a nie angular, ember, vue, backbone czy vanilla.js i dlaczego tak będzie lepiej, a byc moze nawet prosciej".

    P.S może przydałby się newsletter dedykowany do kursu?

    • dlaczego tu wykorzystam react, a nie angular, ember, vue, backbone czy vanilla.js
      Szczerze mówiąc, to myślę, że to nie jest dobry pomysł. Lepiej, żeby Kolega skupił się na omawianiu samego Reacta z jego „dodatkami” jak redux, redux-thunk lub inne, SSR, może coś o css in react, itp. Jeden zna lepiej Reacta inny Vue, a inne Angular… nie ma co szukać usilnie tego najlepszego.
      Co do tej wydajności to też bym tak nie przesadzał… owszem, są apki gdzie wydajność ma priorytetowe znaczenie ale w wielu innych jest to mniej istotne, a liczy się szybkość wykonania zlecenia, wygoda pisania, utrzymania itp.
      Co do tych 30 minut i test to nieco przesadzasz… 🙂 Hello World w React możesz odpalić w parę minut i w zasadzie ośmielę się stwiedzić, że najwięcej czasu zajmie nie React ale konfiguracja webpacka co zresztą i tak pewnie robisz w każdym projekcie, więc… 🙂
      Niech Kolega Autor bloga zajmie się samym React i myślę, że da mu to bardzo dużo czytelników i wiele ciekawych dyskusji…

      • Masz sporo racji Tomek, ale jest jedna ważna różnica pomiędzy Twoim zdaniem, a moim: ja piszę z perspektywy osoby nie znającej Reacta, a chcącej się go uczyć- Ty z perspektywy osoby już w nim tworzącej, a Michał z kolei nazwał ten artykuł „Wprowadzenie do kursu React.js od podstaw”. To tak jakbyś tworzył kurs prawa jazdy i chciałbyś na nim uczyć manewrów kaskaderskich 😉 Nie mówię, że tego nie ma być w pewnym miejscu, gdzie kursanci są już zaznajomieni z pracą z Reactem, jednak naprawdę sporo jest kursów/artykułów z tego czy innego języka, frameworka, technologii itd. i żaden nigdy nie mówi dlaczego tego frameworka warto zastosować i dlaczego by go nie użyć zamiast czegoś alternatywnego.

        Mówiąc o wyświetleniu „test” w React w ciągu kilku minut utwierdzasz mnie w moim zdaniu na ten temat. Bo wypisanie tej frazy z użyciem zwykłego JS zajmuje jakieś 30 sekund (włącznie z odpaleniem przeglądarki). I przy tym przykładzie (akurat tym, żeby nie było) React przegrywa z marszu.
        Teraz mi przykładowo mógłbyś napisać „tak, ale jak masz taką i taką rzecz do stworzenia to z użyciem React możesz zrobić to znacznie szybciej, a jeszcze to i to 5x szybciej, a tutaj masz jeszcze co innego 50x szybciej i prościej” i właśnie o tą esencję mi chodzi.

        Kursów które nie przemawiają argumentami za pewnym rozwiązaniem i charakteryzują się swego rodzaju odrealnieniem (brakiem praktycznego przykładu z życia) jest mało. I szkoda by powstał kolejny taki kurs, fajnie by się wyróżniał.

        Ty szukasz artykułów-poradników branżowych, ja szukam kursu, a o to właśnie chyba chodzi w kursie od podstaw 😉

      • posta mi oznaczyło jako spam, więc przeklejam ponownie:
        „Masz sporo racji Tomek, ale jest jedna ważna różnica pomiędzy Twoim zdaniem, a moim: ja piszę z perspektywy osoby nie znającej Reacta, a chcącej się go uczyć- Ty z perspektywy osoby już w nim tworzącej, a Michał z kolei nazwał ten artykuł „Wprowadzenie do kursu React.js od podstaw”. To tak jakbyś tworzył kurs prawa jazdy i chciałbyś na nim uczyć manewrów kaskaderskich 😉 Nie mówię, że tego nie ma być w pewnym miejscu, gdzie kursanci są już zaznajomieni z pracą z Reactem, jednak naprawdę sporo jest kursów/artykułów z tego czy innego języka, frameworka, technologii itd. i żaden nigdy nie mówi dlaczego tego frameworka warto zastosować i dlaczego by go nie użyć zamiast czegoś alternatywnego.
        Mówiąc o wyświetleniu „test” w React w ciągu kilku minut utwierdzasz mnie w moim zdaniu na ten temat. Bo wypisanie tej frazy z użyciem zwykłego JS zajmuje jakieś 30 sekund (włącznie z odpaleniem przeglądarki). I przy tym przykładzie (akurat tym, żeby nie było) React przegrywa z marszu.
        Teraz mi przykładowo mógłbyś napisać „tak, ale jak masz taką i taką rzecz do stworzenia to z użyciem React możesz zrobić to znacznie szybciej, a jeszcze to i to 5x szybciej, a tutaj masz jeszcze co innego 50x szybciej i prościej” i właśnie o tą esencję mi chodzi.
        Kursów które nie przemawiają argumentami za pewnym rozwiązaniem i charakteryzują się swego rodzaju odrealnieniem (brakiem praktycznego przykładu z życia) jest wiele. I szkoda by powstał kolejny taki kurs, fajnie by się wyróżniał.
        Ty szukasz artykułów-poradników branżowych, ja szukam kursu, a o to właśnie chyba chodzi w kursie od podstaw”

        • @kamil_rogala:disqus chciałbym skupiać się na konkretnych i życiowych przykładach, ale zacząć trzeba od totalnych podstaw 🙃 Dlatego najpierw hello world, ale potem krok po kroku powstanie apka.
          Ma to sens?

          Co do porównania z Angularem, Emberem, czy innym frameworkiem to totalnie tego nie planowałem, ale może zweryfikuję swoje plany 😉 Chociaż MOIM ZDANIEM to po pierwsze bardzo trudno jest napisać coś sensownego (żeby nie zawierać tam osobistych preferencji, a także być na bieżąco ze wszystkimi technologiami), a po drugie nie wiem do końca jaki byłby tego cel 😁

          • @Michał
            Mi chodzi właśnie o to jak napisać ‚hello world’, a potem krok po kroku przejść dalej aż do faktycznej apki, także jak najbardziej mi to pasuje 😉

            Przykłady innych frameworków troszkę zostały opacznie zrozumiane 😉 bo o ile część rzeczy można porównywać to wielu już nie i faktycznie wchodzą tu preferencje.
            Raczej były one podane tylko w ujęciu ogółu tutoriali- niezależnie (od nawet języka) występują wspólne problemy:
            -pierwszym są odrealnione przykłady (szczerze to spotkałem do tej pory 2 tutoriale w których autor powiedział coś w stylu „to co widzisz wykorzystałem tu i tu do stworzenia tego i tego. Zmodyfikowałem to i to i utworzyłem idealną bazę pod dalszą pracę nad tym i tym. Więc widzisz, to ma rację bytu”. Reszta to abstrakcja. A z programowaniem związany jestem od 2006 roku więc trochę już przerobiłem różnych rzeczy…). Przykładowo ktoś mi może pokazać że istnieje funkcja atob() btoa() i ze to fajnie działa, „takie szyfry uhuhu jakie hakery. z nas bo mamy magiczne znaczki” Tylko co z tego, skoro użytkownik nie wie jak realnie to wykorzystać- znajomość takiej funkcji jest niemalże bezcelowa, bo nie zna się jej realnych możliwości. Albo gorzej- wymyśli taką możliwość, która będzie dla niego szkodliwa (base64 jest odwracalne)
            -drugi to kwestia dlaczego warto skorzystać z tego frameworka zamiast z czystego języka, jaką ma zaletę, co się po nim zmieni w pisaniu projektu, a być może (choć jak wyżej pisałeś i Ty i Tomek + ja obu wam przyznaję też rację, że to trochę bezsensowne) jak ten framework wypada na tle innych, jakie są znaczące różnice (a być może plusy/minusy). Gdyby było całkiem wszystko jedno to by nie było takiej różnorodności, prawda? 😉

          • Tomasz Sochacki

            base64 uzywam czasami do przesylania danych w ktorych moge miec potencjalnie niebezpieczne znaki unicode, a nie zawsze chodzi tylko o slashe i apostrofy itp. robiąc base64 masz pewnosc ze ciag zawiera bezpieczny zakres ASCI tylko trzeba pamietac ze ciag taki bedzie dłuższy niż oryginał. I tu wlasnie zaletą jest odwracalnosc. Ponadto base64, akcji85 itp to fajne ćwiczenie żeby nauczyć się pisać własne algorytmy 🙂

          • do tego samego wykorzystuje base64 😉

  • grimlok

    Hej, super sprawa Michał.
    Jak nawięcej praktycznych, moze z Twojej pracy przykładów?
    Byłoby naprawdę ciekawie.

  • To pierwsze to praktycznie całkowicie kwestia bakendowa 😉 Po stronie frontendu tylko formularz. To będzie 🙂

    • Marcin

      tak chodzi mi właśnie o formularz jak filtrować dane z listy
      że jest kilka pól formuarza i w locie widzimy wyniki po filtracji

  • Kacper Perzankowski

    Cześć Michał. Mam już za sobą parę projektów w react, ale wciąż nie wiem w jaki sposób budować architekturę dla aplikacji, która potencjalnie będzie całkiem spora. Czy będzie to poruszone w kursie?