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

Code review aplikacji React Snake

+2 głosów
88 wizyt
pytanie zadane 3 stycznia w JavaScript, jQuery, AJAX przez Jestem_Szaleńcem Początkujący (460 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 przez NIMuser Stary wyjadacz (10,960 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 przez Jestem_Szaleńcem Początkujący (460 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 przez rafal612b Nałogowiec (43,180 p.)
wybrane 5 stycznia 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 przez Jestem_Szaleńcem Początkujący (460 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 przez rafal612b Nałogowiec (43,180 p.)
Ok  kilka komentarzy dodałem juz na samym GItHubie ;) Co do rendera jeszcze go zmienimy ;) Opisze to potem ;)
komentarz 4 stycznia przez rafal612b Nałogowiec (43,180 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 przez Jestem_Szaleńcem Początkujący (460 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 przez Jestem_Szaleńcem Początkujący (460 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

0 głosów
2 odpowiedzi 141 wizyt
+1 głos
3 odpowiedzi 285 wizyt
+57 głosów
0 odpowiedzi 88,153 wizyt
Porady nie od parady
Zadając pytanie postaraj się o poprawną pisownię i czytelne formatowanie tekstu.Kompozycja

63,266 zapytań

109,520 odpowiedzi

228,793 komentarzy

43,447 pasjonatów

Przeglądających: 191
Pasjonatów: 3 Gości: 188

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...