Ocena skromnego projektu w React

pytanie zadane 15 kwietnia 2020 w JavaScript przez malvator Użytkownik (720 p.)

Witam, jeśli temat jest w nie tej sekcji co trzeba to z góry przepraszam.

Przechodząc do rzeczy to, napisałem sobie bardzo prostą apkę w React i chciałbym prosić aby wypowiedział się ktoś bardziej doświadczony na kilka tematów z tym związanych. Dodam tylko, że ogarniam tylko absolutne podstawy React,mam zamiar zostać junior fron-end developerem (szukam pierwszej pracy).

1) Czy od strony kodu oraz działania aplikacji, wygląda to dostatecznie dobrze ? (czyli, nie straszy )

2) Czy jeśli trochę przerobię tą apkę (dodam style, wykorzystam jakieś przydatne api), to czy mogę ją umieścić w moim portfolio

3) Czy ogólnie nie ma tragedii ?

4) Czy moglibyście wskazać dalszą drogę, jakieś wskazówki ?

Z góry dziękuję za wszystkie odpowiedzi (szczególnie te konstruktywne)

<!DOCTYPE html>
<html lang="pl">

<head>
  <meta charset="UTF-8">
  <title>Api w React</title>
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone/babel.js"></script>
</head>

<body>
  <div id="app"></div>
  <script type="text/babel">

class App extends React.Component{

  constructor(){

    super()

    this.state = {
      title: "", 
      firstName: "",
      lastName: ""
      
    }

  }


      getApi = () =>{
            fetch('https://randomuser.me/api/?results=10')
            .then(response => response.json())
            .then(data => {
                
              const title = data.results[9].name.title
              const firstName = data.results[9].name.first
              const lastName = data.results[9].name.last
              
                  this.setState({
                    title: title,
                    firstName: firstName,
                    lastName: lastName

                  
                  })

            }) 
                //powyższe api zostało pobrane z: https://pl.reactjs.org/docs/faq-ajax.html
                //tylko do celów nauki  
        }


  render(){
    return(
      <div>
          <button onClick={this.getApi}>Get random users data</button>
            <h4>Random user:</h4>
            <div className="random_value">Random title is: {this.state.title}</div>
            <div className="random_value">Random first name is: {this.state.firstName}</div>
            <div className="random_value">Random last name is: {this.state.lastName}</div>
      </div>
    )
  }


}



ReactDOM.render(<App />, document.getElementById("app"))
  </script>
</body>

</html>

2 odpowiedzi

odpowiedź 15 kwietnia 2020 przez Tomek Sochacki Ekspert (227,490 p.)
wybrane 15 kwietnia 2020 przez malvator

Najlepsza

Polecam poczytać o webpacku i npm, pozwoli to stworzyć nieco lepszą strukturę w projekcie, a to co ostatecznie zostanie wyplute jako build to już w sumie nas mniej interesuje, to ma być odpowiednio przetranspilowane, zminifikowane itp. A co do kodu to wg mnie jest on zły, i nie chodzi mi o samego reacta, to nie ma tu nic do rzeczy, mam kilka uwag:

brak jakiegokolwiek formatowania - wg mnie to oznaka braku myślenia o innych osobach czytających kod, o jego utrzymaniu itd.
nazwa metody getApi jest błędna, co to znaczy, pobierasz całe API, czyli co? raczej widziałbym getUsersDetails czy coś w tym stylu, kod musi sam się opisywać.
dlaczego użyłeś fetch, a nie bezpośrednio XHR czy np. axios itp? nie jest to zarzut, w żadnym razie, ale takie pytanko może się pojawić na rozmowie gdybyś np. w jakimś zadaniu testowym tak zrobił. Jak mówiłem, fetch jest oki, tylko warto umieć uzasadnić wybory danego rozwiązania (oczywiście nie chodzi o żadne komentarze, nigdy w życiu, to tylko po prostu luźne pytanie na rozmowę)
```
then(response => response.json())
```
a skad wiesz, że otrzymane dane są poprawnym JSONem, możliwym do sparsowania?
```
const title = data.results[9].name.title
```
a skąd wiesz, że obiekt data jest w ogóle tablicą i zawiera 10 elementów? Nigdzie nie ma analizy tego, co przychodzi z zewnętrznego źródła, brak jakiejkolwiek obsługi błędów. Dla mnie takie podejście jest skrajnie nieodpowiedzialne i totalnie błędne. Zawsze należy obsługiwać sytuacje błędów, a co jak Twój serwer będzie niedostępny i dostaniesz 500 czy gdy wyślesz request bez autoryzacji gdyby tego wymagał i przyjdzie np. 401?
dlaczego zawsze renderujesz dane o użytkowniku nawet, jeśli ich nie masz? Dlaczego nie użyłeś renderowania warunkowego?
dlaczego jedna klasa jest odpowiedzialna za wiele różnych rzeczy - pobranie danych z jakiegoś api, wyświetlenie ich? Pobranie danych z API to jedno zadanie, ewentualne zmapowanie response na obiekt domenowy to drugie, i trzecie to wyświetlenie tego. Akurat w React jest dość duża swoboda w stworzeniu sobie struktury odpowiedzialności, np. w angular jest to by default nieco lepiej wg mnie ograne serwisami, DI itp. ale to nie ma znaczenia, chodzi o to, aby rozdzielić odpowiedzialności.
brak jakiegokolwiek testu, w mojej ocenie apka bez żadnych testów nigdy ale to przenigdy nie powinna wyjść na produkcję czy do oceny jeśli to byłoby np. zadanie rekrutacyjne. Rozumiem, że pewnie po prostu nie uczyłeś się jeszcze testów - spoko, tylko gdybyś wysłał takie zadanie bez testów w rekrutacji to możesz sporo stracić. A szkoda, bo tak naprawdę podstawowe testy są proste do napisania - jeśli idziesz w reacta to zainteresuj się np. jest/enzyme - wystarczy że napisałbyś nawet 2-3 mega proste testy i masz wielkiego plusa jako przyszły junior.

Generalnie spoko, ucz się spokojnie ale wg mnie jeszcze daleko aby zacząć wysylać CV na juniora, szkoda abyś odpadł na prostych pytaniach czy analizie kodu, co jak przysiądziesz uczciwie to za kilka miesięcy poznasz bardzo dobrze.

I takie luźne pytanko sprawdzające na ile zgłębiłeś dokumentację reacta - dlaczego używasz klas a nie podejścia funkcyjnego? Od razu mówię - to żaden minus czy coś, w żadnym razie, sam pracuję na codzień z projektami w obu rozwiązaniach i w sumie oba mają wg mnie swoje plusy i minusy, chodzi tylko o to, czy umiałbyś podjąć jakąś dyskusję.

Pamiętaj, że w zadaniach rekrutacyjnych i na rozmowach wcale nie chodzi o to, abyś odpowiedział na 100% pytań czy zrobił idealnie zadanie - chodzi o poznanie człowieka, podejścia do kodu, ogólnie do programowania itp.

masz ładnie sformatowany kod - super, widać, że dba o wygląd kodu, wie, że to ułatwi czytanie itp. czy używał do tego narzędzi np. prettier itp. czy nie to już nie ważne, myśli o formatowaniu - to jest ważne,
nazywa sensownie funkcje i zmienne - mega duży plus, dobry kod nie musi mieć tak naprawdę żadnych komentarzy, zawsze zastanów się co inny programista zrozumie widząc funkcję o nazwie X, czy będzie ona czytelna? Staraj się myśleć przy tym trochę "jak biznes", czyli nie jak programista. Możesz zrobić funkcję price(). ale co ona robi? oblicza cenę, ustawia ją czy co? Może lepsza będzie nazwa getPriceWithDelivery czy getTotalPriceForAllOrders?
rozdzieliłeś kod odpowiedzialny za wyświetlanie danych od tego, który pobiera dane z API - super, nie ważne czy wyszło Ci to idealnie czy nie, ważne, że myślisz o tym, aby pisać kod możliwie prosty i czytelny, aby dzielić odpowiedzialności na osobne pliki, klasy itp. Jak ostatecznie to wyszło? To naprawdę drugorzędna sprawa, tego nauczysz się w praktyce.

Także reasumując, moja wskazówka to spróbowanie najpierw poczytać o webpack i nawet jakiś gotowych generatorach dla reacta i próba stworzenia większej apki - powiedzmy z 10-20 komponentów, jakiś formularz, z 1-2 endpointy na jakieś API, jakaś walidacja danych, poczytaj o react context co jest dzisiaj coraz częściej spotykane w apkach, wg mnie w wielu przypadkach pozwala w ogóle zrezygnować z reduxa itp.

Ogólnie jest spoko, na początku napisałem, że kod jest zły ponieważ często w rekrutacji ważna jest pierwsza ocena, pierwsze wrażenie - pamiętaj o tym :) Chociażby takie głupie formatowanie kodu mocno bije po oczach... a szkoda, bo to kilka minut roobty aby to poprawic :)

komentarz 15 kwietnia 2020 przez malvator Użytkownik (720 p.)

Witam, na początku dziękuję za mega wyczerpującą odpowiedz.

Jestem na początku drogi teraz już wiem, że wystawianie teraz kodu do oceny jest bez sensu. Co do pytania o komponent funkcyjny i klasę, to użyłem klasy, ponieważ klasa jest komponentem stanowym, czyli mogłem w nim użyć state, zupełnie odwrotnie jest w komponencie funkcyjnym który pozbawiony jest stanu i służy do prostszych rozwiązań.

Natomiast co do formatowania kodu oraz nazewnictwa, to nie chcę aby to wyglądało jak głupia wymówka, ale kod wrzuciłem tutaj na szybkości , od teraz będę go porządkować na bieżąco.

Mam jeszcze takie pytanko, co powinienem umieć w React aby, starać się o staż lub pracę i skąd pobierać dalszą widzę ? (być możę robię coś zle w tej kwestii) chodzi mi o front-end developera

Co do npm i webpack, to go właśnie ogarniam sobie

komentarz 15 kwietnia 2020 przez Tomek Sochacki Ekspert (227,490 p.)

teraz już wiem, że wystawianie teraz kodu do oceny jest bez sensu.

ale wręcz przeciwnie :) po pierwsze, inne spojrzenie na kod pozwoli często wykryć różne błędy, które tak mógłbyś nawet nieświadomie powielać i w sobie utrwalać a po drugie, nauczysz się przyjmować krytykę na tzw. CR czyli code review, co jest podstawą w pracy, każdy kod zanim wjedzie na produkcję przechodzi przez ocenę innych osób w zespole. To też jest bardzo ważne, także wrzucaj śmiało :)

Co do pytania o komponent funkcyjny i klasę, to użyłem klasy, ponieważ klasa jest komponentem stanowym, czyli mogłem w nim użyć state, zupełnie odwrotnie jest w komponencie funkcyjnym który pozbawiony jest stanu i służy do prostszych rozwiązań.

ale w żadnym razie... stan masz w obu rozwiązaniach, wystarczy, że użyjesz hooków np.:

const [name, setName] = useState("");

zobacz choćby tu https://reactjs.org/docs/hooks-state.html

Natomiast co do formatowania kodu oraz nazewnictwa, to nie chcę aby to wyglądało jak głupia wymówka, ale kod wrzuciłem tutaj na szybkości

ja to rozumiem, ale gdybyś taki kod dał w rekrutacji to móglbyś nie mieć już szansy na takie wytłumaczenie :) Zresztą pamiętaj o mega ważnej zasadzie - lepiej czasami oddać jakiś ficzer np. 1-2 dni później niż zakładałeś niż oddać coś, co jest złe, niesprawdzone itp. Szczególnie gdy mówimy o aplikacjach produkcyjnych.

Mam jeszcze takie pytanko, co powinienem umieć w React aby, starać się o staż lub pracę i skąd pobierać dalszą widzę ? (być możę robię coś zle w tej kwestii) chodzi mi o front-end developera

moim zdaniem takie totalne podstawy dla juniora to:

swobodne tworzenie komponentów, umiejętność pracy z propsami, wymiana danych parent->child->parent itp.
umiejętność pracy z hookami choćby w podstawowym zakresie plus umiejętność pracy z life cycle methods np. componentDidMount itp.
umiejętność pracy z react context
praca z API, obsługa błędów itp.
choćby podstawy testowania - podstawowe unit tests plus może coś z e2e np. testcafe, cypress itp.

No i przede wszystkim znajomość samego JavaScriptu. Często ludzie pchają się we frameworki, a nie potrafią odpowiedzieć na proste pytanka z samego JS jak chociażby różnica let/const, destrukturyzacja, parametry domyślne funkcji, obietnice, XHR itp.

co do źródeł nauki to spróbuj zmienić sposób patrzenia na to - wymyśl sobie jakąs apkę i rozłóż ją na małe kawałki. Na przykład apka do pobierania danych z giełdy, walut itp. i ich rózne pokazywanie, analizy, jakieś porównania itp. Pobawisz się trochę może grafiką, np. jakąs libką do wykresów (chart itp.) - nie chodzi o super grafikę, ale o to, abyś nauczył się po prostu pracować z zewnętrzną libką, z jej dokumentacją itp. Do tego zrób np. logowanie (użyj sobie np. darmowego firebase), możesz też liznąć temat routingu w react. Ucz się pracować z dokumentacją (react ma ją dobrze zrobioną), z forum SO, z dokumentacjami libek zewnętrznych itp. Pamiętaj - szuka to nie znać na blachę milion funkcji, bo te zmienią się za chwilę w nowej wersji libki, frameworka itp., sztuka to umieć wyszukać to, czego potrzebujesz :)

odpowiedź 15 kwietnia 2020 przez Pytajnikowiec Początkujący (290 p.)

1. Pierwsze kroki, nie ma co oceniać za bardzo. "results[9]" na sztywno trochę boli
2. Nie
3. Tak (skoro zaczynasz)
4. Wziąłeś się za Reacta. Znasz webpacka w stopniu minimum podstawowym? Znasz NPM albo Yarna?

Co dalej? Ucz się trudniejszych zagadnień w React :P

komentarz 15 kwietnia 2020 przez malvator Użytkownik (720 p.)

Dziękuję za konstruktywną odpowiedź.

Co do npm, to podstawy znam, webpacka też podstawy.

Co do do tego results[9], to masz może jakiś sposób, aby wybrało losowy element tablicy ?, bo jak pisałeś wcześniej trochę w oczy razi

Jeszcze raz dzięki

komentarz 15 kwietnia 2020 przez Pytajnikowiec Początkujący (290 p.)

const user = data.results[Math.floor(Math.random() * data.results.length)].name;
const { title, first, last } = user;

komentarz 15 kwietnia 2020 przez malvator Użytkownik (720 p.)

Dziękuję bardzo, tak myślałem, żeby iść w kierunku czystego js

Dziękuję

Podobne pytania

+1 głos

0 odpowiedzi 97 wizyt

Ocena Aplikacji w React

pytanie zadane 5 lipca 2020 w JavaScript przez Stoprocent Użytkownik (930 p.)

0 głosów

0 odpowiedzi 649 wizyt

Ocena projektu w Spring Boot i React

pytanie zadane 5 czerwca 2022 w Nasze projekty przez `Krzychuu Stary wyjadacz (13,940 p.)

+2 głosów

1 odpowiedź 338 wizyt

SSR dla istniejącego projektu React w Express.js

pytanie zadane 23 czerwca 2021 w JavaScript przez poldeeek Mądrala (5,980 p.)

Ocena skromnego projektu w React

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

2 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci