• 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
115 wizyt
pytanie zadane 3 stycznia w JavaScript, jQuery, AJAX przez Jestem_Szaleńcem Początkujący (480 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 (480 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 (46,000 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 (480 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 (46,000 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 (46,000 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 (480 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 (480 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 157 wizyt
+1 głos
3 odpowiedzi 321 wizyt
0 głosów
0 odpowiedzi 42 wizyt
Porady nie od parady
Możesz ukryć, zamknąć lub zmodyfikować swoje pytanie, za pomocą przycisków znajdujących się pod nim. Nie krępuj się poprawić pochopnie opublikowanego pytania czy zamknąć go po uzyskaniu satysfakcjonującej odpowiedzi. Umożliwi to zachowanie porządku na forum.Przyciski pytania

65,677 zapytań

112,314 odpowiedzi

237,031 komentarzy

46,654 pasjonatów

Przeglądających: 216
Pasjonatów: 9 Gości: 207

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.

...