Ocena małej strony z Reactem

Question

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/

Answer 1

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 :)

Comments

Dziękuję za rady.

Answer 2

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

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

Comments

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ąć.

---

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...

---

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ć :)

---

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 :)

Answer 3

Nie znam React'a więc kodu nie oceniłem, ale wizualnie mi się podoba.