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

Ocena małej strony z Reactem

Object Storage Arubacloud
+4 głosów
314 wizyt
pytanie zadane 18 sierpnia 2020 w JavaScript przez tony_montana Nowicjusz (190 p.)
Cześć, zwracam się z prośbą o ocenę kodu strony. Jest to wymyślona strona restauracji z możliwością zamawiania online (frontend) napisaną w React. To moja pierwsza styczność z tą technologią i chciałbym się dowiedzieć jakie błędy popełniam, bo nie do końca "czuję" tego Reacta i nie jest to dla mnie intuicyjne. I jeszcze pytanie: czy takie użycie Reacta na stronie jest poprawne? Powinno to wyglądać jak u mnie czy zamiast html komponenty w React?

Kod: https://github.com/bronchitis/restaurant-site

Live: https://bronchitis.github.io/restaurant-site/

3 odpowiedzi

+2 głosów
odpowiedź 19 sierpnia 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

Kod generalnie jest OK, natomiast nie jestem pewien co do struktury projektu. Mimo iż jest mało komponentów to czuje tam lekki bałagan. Nie myślałeś o tym aby np zrobić folder components/Dish i tam trzymać AddDish.js Dish.js DishList.js?

Folder styles też mi średnio odpowiada. Teraz jest łatwo się odnaleźć bo masz mało komponentów ale później jak dojdą kolejne może być masakra. Poczytaj może o atomic design.

 

Strona jest bardzo fajna i estetyczna ale oczywiście można kilka rzeczy poprawić. Zastanowiłbym się nad galerią.Obecnie jak wejdziesz w podgląd masz tylko jedno zdjęcie. Aby podejrzeć inne zdjęcia w trybie podglądu muszę się cofnąć do galerii s powrotem. Nie lepiej użyć komponentu który ma suwak w podglądzie na wszystkie zdjęcia. Nie myślałeś o dodaniu spinera który byłby wywoływany w momencie wysyłania zamówienia - tak aby użytkownik widział, że coś się dzieje :)

komentarz 19 sierpnia 2020 przez tony_montana Nowicjusz (190 p.)
Dziękuję za rady.
+2 głosów
odpowiedź 19 sierpnia 2020 przez imklau Nałogowiec (42,090 p.)

Fajnie, że nie jest to kolejne "todo" czy kalkulator!

Dobrze by było jakbyś dodatkowo:
- dorzucił walidację formularza
- skorzystał z jakiegoś eslinta

Jeśli chodzi o kod to zauważyłam na szybko tylko drobne poprawki:

import { Container } from '../styles/DishList'

Ten import wygląda trochę myląco. Raczej tworzyłabym pliki ze stylami tak, żeby były zgodne z nazwami komponentów, czyli w tym przypadku zwyczajnie "DishList". Swoją drogą może warto by było jakbyś specjalną nazwą oddzielał komponenty ze stylami od tych Reactowych. Tak jak zrobiłeś tutaj za pomocą słowa "Styled":

import React from 'react'
import { StyledButton } from '../styles/Button'

const Button = ({text, handleOnClick}) => {
  return (
    <StyledButton onClick={handleOnClick} type="submit">{text}</StyledButton>
  )
}

export default Button

jeśli dałbyś import * as Styled from '../styles/Button'  to mógłbyś tego użyć w ten sposób:

<Styled.Button onClick={...}>...</Styled.Button>

lepiej wtedy widać, co czym jest :)
 

{dishes.map((dish, i) => (
     <Dish key={dish.id} menu={menu} setMenu={setMenu} i={i} dish={dish}/>
 ))}

do czego służy Ci `i` ?

aa i dodatkowo, kiedy wyborę jakieś danie to nie jestem już w stanie cofnąć się do menu indecision



I też uważam, że kod całkiem spoko. Dawaj kolejną jakąś bardziej rozbudowaną apkę! :)

komentarz 19 sierpnia 2020 przez tony_montana Nowicjusz (190 p.)

Dziękuję za rady. 

do czego służy Ci `i` ?

 A, było użyte w stylach, ale później usunąłem, ale tego akurat zapomniałem usunąć.

komentarz 19 sierpnia 2020 przez Tomek Sochacki Ekspert (227,510 p.)

Fajnie, że nie jest to kolejne "todo" czy kalkulator!

a moim zdaniem, i powtarzam to wielu osobom, właśnie takie todo czy nawet kalkulator to jedno z lepszych zadan do nauki z możliwością praktycznie nieskończonego rozwoju, dodawania nowych rzeczy itp...

komentarz 19 sierpnia 2020 przez imklau Nałogowiec (42,090 p.)
Spoko, nie uważam że to złe zadania do nauki, ALE z tego co widziałam, a właściwie no nie widziałam tutaj tak wielu projektów "todo" z nieskończonym rozwojem, dodawaniem nowych rzeczy itd

Poza tym, najzwyczajniej w świecie fajnie móc tutaj przeglądać różnorodne projekty, a nie coś, co non stop się powtarza :)

Nie musimy się zgadzać :)
komentarz 19 sierpnia 2020 przez Tomek Sochacki Ekspert (227,510 p.)
jasne, jak najbardziej zgadzam się, że fajnie analizować różne projekty. Chodzi mi tylko o to, że dość często słyszę opinie "tylko nie rób TODO" itp., z czym już się nie zgadzam :)
0 głosów
odpowiedź 19 sierpnia 2020 przez Artek Stary wyjadacz (11,800 p.)
Nie znam React'a więc kodu nie oceniłem, ale wizualnie mi się podoba.

Podobne pytania

0 głosów
2 odpowiedzi 531 wizyt
pytanie zadane 7 grudnia 2019 w Nasze projekty przez Marchiew Dyskutant (7,690 p.)
0 głosów
3 odpowiedzi 271 wizyt
pytanie zadane 1 kwietnia 2017 w Nasze projekty przez PolskiMyster Użytkownik (660 p.)
0 głosów
5 odpowiedzi 672 wizyt
pytanie zadane 5 marca 2018 w HTML i CSS przez Tomtom1312 Nowicjusz (240 p.)

92,762 zapytań

141,686 odpowiedzi

320,499 komentarzy

62,106 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

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!

...