• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Code review aplikacji React Snake

VPS Starter Arubacloud
+2 głosów
288 wizyt
pytanie zadane 3 stycznia 2019 w JavaScript przez Jestem_Szaleńcem Użytkownik (530 p.)

Witam!

Zwracam się z prośbą o code review aplikacji ponieważ dopiero rozpocząłem nauke React i chce dowiedzieć się jak mi idzie i czy w ogóle w dobry sposób korzystam z tego narzędzia.

Link do repo: https://github.com/KubaWysocki/Snake

No i link do apki: https://kubawysocki.github.io/Snake/

Gdzieś na kanale discord ktoś skomentował że nie powinno się używać .querrySelector' ów w react i też nie wiem czy to jest błąd czy nie do końca. Używam ich do animacji i do 'rysowania' gry ale mam ich bardzo mało. Poza tym mam tyle nowej wiedzy z kursu że ciężko się w tym połapać i chciałbym żeby ktoś doświadczony rzucił okiem. 

komentarz 4 stycznia 2019 przez NIMuser Stary wyjadacz (11,030 p.)
Kuba - fajna gra, ale tak jak ktoś napisał nie wiem czy React jest do tego stworzony :) Ale ogólnie efekt dobry! Nie zrobię code review po nie znam zupełnie React.js, niech się inni wypowiedzą.

Ten "ServiceWorker.js" to rozumiem że w celu stworzenia PWA??
komentarz 4 stycznia 2019 przez Jestem_Szaleńcem Użytkownik (530 p.)
To znaczy ServiceWorker.js jest dodawany automatycznie przez create-react-app ale będę się wybierał na event na temat pwa niedługo i ogólnie jaram się tematem strasznie i będę coś w tym kierunku kombinował

1 odpowiedź

+1 głos
odpowiedź 3 stycznia 2019 przez rafal.budzis Szeryf (85,260 p.)
wybrane 5 stycznia 2019 przez Jestem_Szaleńcem
 
Najlepsza
Pograłem chwile działa super ;) Kodu nie analizowałem ale odpowiem na podstawie twoich pytań i własnej wiedzy.

querrySelector nie wolno używać zamiast querrySelector możesz używać ref wynik działania jest taki sam :)

w JSX robisz
<div ref={(ref) => this.tenDiv = ref} >

I następnie możesz się odwoływać do this.tenDiv :) bez querrySelector Dzięki temu masz pewnośc ze zawsze pracujesz z najnowszym divem i nie wykonujesz operacji na div którego nie ma w DOM

 

Co do samego pomysłu tworzenia gry w React jestem dość sceptycznie nastawiony. React jest bardziej do tworzenia aplikacji z przyciskami. Moim zdaniem sprawdzi się super do Menu gry oraz kontrolek jednak samą plansze oraz poruszanie zrobił bym poza reactem. React mógłby ewentualnie stworzyć znacznik <canvas> który przekaazał by w funkcji ref do jakiejś cklasy Game niezwiązanej z React.
komentarz 3 stycznia 2019 przez Jestem_Szaleńcem Użytkownik (530 p.)
Okej pare tych querrySelectorów zmieniłem na te referencje i działa fajnie. Ale jak byś mógł zerknąć do Board.js to tam w render() tworze plansze z divów. I teraz jak bez querrySelectora mam przeiterować po całej tej planszy (w metodzie drawGame)? A tymbardziej jak mam aktywować na nowo pointerEvents komponent niżej bez querrySelectora? Szybkie wyjaśnienie- po zmianie kierunku poruszania sie węża usuwam możliwość ponownej zmiany kierunku aż do pierwszego przesunięcia się węża. I przy ponownym narysowaniu planszy dodaje możliwość sterowania znowu. Ma to na celu uniemożliwienie zmiany kierunku dwa razy podczas jendego narysowania bo wtedy wąż by sie bugował i na przykład cofał sam w siebie.

Obecnie w apce zostały 3 querrySelectory i dalej nie wiem jak miałbym sobie bez nich poradzić :( to chyba wina mojego podejścia do mechaniki. Chyba to nie do końca 'react way'
komentarz 4 stycznia 2019 przez rafal.budzis Szeryf (85,260 p.)
Ok  kilka komentarzy dodałem juz na samym GItHubie ;) Co do rendera jeszcze go zmienimy ;) Opisze to potem ;)
komentarz 4 stycznia 2019 przez rafal.budzis Szeryf (85,260 p.)

Ok skończyłem dodawać Ci issue na GitHub ;) Największą uwagę powinieneś zwrócić na tą uwage https://github.com/KubaWysocki/Snake/issues/5 Myśle ze z pomocą pozostałych wskazówek uda Ci się napisać Board w podejściu bardziej Reactowym :) 

Moje uwagi możesz zamykać pisząc ich numer w nazwie commita w git. np "fixed #5". 

https://blog.github.com/2013-01-22-closing-issues-via-commit-messages/

komentarz 4 stycznia 2019 przez Jestem_Szaleńcem Użytkownik (530 p.)

Odpowiem już tu po tych numerkach może :) po pierwsze wielkie dzięki za odpowiedź i zaangażowanie!

#5 Z tym ref do ustawiania klas to nawet w dokumentacji jest napisane że to jest dobre do odpalania animacji

#4 to chyba akurat bez różnicy wink

#3 Ogon jest w state. Dosłownie linijke niżej jest setState ;) 

#2 Wielkie dzięki smiley o tej funkcjonalności ES6 jeszcze nie słyszałem laugh

#1 A co do tego to te mapy przeniose do returna, i odrazu przy mapowaniu będę nadawał klasy zależnie od tego czy te iteratory -> ' i , j ' pokrywają się z jakimiś pozycjami ze state. W dobrym kierunku ide?

 

komentarz 5 stycznia 2019 przez Jestem_Szaleńcem Użytkownik (530 p.)

Poprawiłem Board.js laugh teraz to jest już chyba 'react way' a przy okazji zrobiłem refactor i polepszyłem czytelność i skróciłem o 20 linijek smiley Wielkie dzięki za wypowiedzi!!! Naprowadziły mnie na pewno 

Podobne pytania

+1 głos
0 odpowiedzi 177 wizyt
pytanie zadane 10 września 2020 w JavaScript przez creend Gaduła (4,700 p.)
0 głosów
2 odpowiedzi 380 wizyt
+1 głos
3 odpowiedzi 719 wizyt

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...