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

Ocena kodu React - generowanie kolorów

VPS Starter Arubacloud
0 głosów
283 wizyt
pytanie zadane 8 września 2018 w JavaScript przez Alterwar Dyskutant (7,650 p.)
Witam!

Zwracam się z prośbą o ocenę kodu w React. Od paru dni zacząłem naukę tego frameworka i chciałbym zobaczyć jak mi idzie, czy stosuje się do poprawnych rozwiązań.

live: https://alterwar.github.io/color-generator/

kod: https://github.com/alterwar/color-generator

1 odpowiedź

0 głosów
odpowiedź 8 września 2018 przez k.wichura Pasjonat (19,870 p.)
wybrane 9 września 2018 przez Alterwar
 
Najlepsza
Przede wszystkim tego nie da się czytać bo kod ma miliard znaków szerokości. Nie możesz tego poformatować? 80 - 120 znaków na linijkę to max. Po to używamy eslinta, żeby unikać takiego kodu. Po drugie czemu App nie jest w components ?. Gdzie są propTypes ? W Colors js zmienna list to chyba oddzielny komponent. To samo w similarColors. W app.js - getRanodomColor wydziel do service, to samo z uniqueID, generateHex. Raz używasz "", a innym razem ''. Czemu ? Nie można tego ujednolicić? To tak na szybko.
komentarz 8 września 2018 przez Alterwar Dyskutant (7,650 p.)

Dzięki za odpowiedź, mam parę pytań :)

1. Dlaczego zmienna list jest oddzielnym komponentem? Czyli miałbym z tego utworzyć kolejny komponent? Idę za praktyką z tutoriala the net ninjy. Tam właśnie tym sposobem budował listę todo. Mówił o React Stateless Functional. Pokaże na przykładzie z the net ninjy:

const Todos = ({todos, deleteTodo}) => {
    const todoList = todos.length ? (
        todos.map(todo => {
            return(
                <div className="collection-item" key={todo.id}>
                    <span onClick={() => {deleteTodo(todo.id)}}>{todo.content}</span>
                </div>
            )
        })
    ) : (
        <p className="center">You have no todo</p>
    )
    return(
        <div className="todos collection">
            {todoList}
        </div>
    )
}

2. Co do znaków masz rację, nie konfigurowałem Eslinta dlatego też nie wywalał mi błędów.

3. propTypes? Co masz na myśli ? Czy to nie jest przekazywanie propsów?

const SimilarColors = ({colorSimilarList}) => {

4. Do service chyba nie doszedłem jeszcze bo nic o tym nie słyszałem także przysiądę nad tematem.

komentarz 9 września 2018 przez k.wichura Pasjonat (19,870 p.)
edycja 9 września 2018 przez k.wichura

1. Jak dla mnie nic to nie zmienia. Nadal to są osobne komponenty. Jeden Todos i drugi todolist. Todos renderuje liste. Oba sa stateless.

2. Polecam to zrobić :)

3 . https://reactjs.org/docs/typechecking-with-proptypes.html

4. Chodzi o to, żeby te funkcje wydzielić do osobnego pliku js i zaimporotować do komponentu . A może w przyszłości inne komponenty bedą mogły skorzystac z tych funkcji .(service)

ps. Jeżeli możemy to używamy const nie let. Np zmienna(stała) random w funkcji getRandomColor. Dodatkowo nie podoba mi się 

    while (p < takeColor.length) {
        temp = parseInt(takeColor.slice(p, p += 2), 16)
        temp += Math.floor((255 - temp) * random / 3);
        result += temp.toString(16).padStart(2, "0");
    }

Nie mam pojęcia co to robi. Czym jest p. Nie można tego jakoś sensownie rozbić? Nie chce żebyś mi to tłumaczył tylko żeby to wynikało z kodu.

ps2. Po co registerServiceWorker.js w twoim projekcie ?

komentarz 9 września 2018 przez Alterwar Dyskutant (7,650 p.)
edycja 9 września 2018 przez Alterwar

1. Wyrzucilem registerServiceWorker.

( zmiany wrzucone: https://github.com/alterwar/color-generator )

2. Dodałem plik helpers.js w którym trzymam w/w funkcje, importuje je w App.

3. Przeniosłem App do components.

4. Wrzuciłem coś takiego do App jako prop:

static defaultProps = {
    colorList: 'None color lists'
  }

bo w state trzymam colorList. Czy o to chodziło? Szczerze mowiąc nie rozumiem po co mam wrzucać ten default props skoro w state na samym początku trzymam domyślne wartości które są wywoływane przed naciśnięciem przycisku do generowania. Tak samo nie odwołuję się tutaj do this.props.colorList tylko : this.state.colorList

<Colors colorList={this.state.colorList} handleStartGenerate={this.handleStartGenerate}/>

Nie rozumiem czym się różni state od propsów. Propsy to właściwości danego komponentu typu imie, nazwisko itd, a state trzyma stan czyli zmieniając imię aktualizujemy state. Tak to rozumiem. Ale nie widze jakby zastosowania w tym miejscu prop skoro odwołuje się do stanu przez this.state.colorList.

komentarz 9 września 2018 przez k.wichura Pasjonat (19,870 p.)

Przykład użycia propTypes 

import React from 'react';
import PropTypes from 'prop-types';
import './RecordButton.css';

const RecordButton = ({ onClick, text }) => (
  <button className="record_button" onClick={onClick}>{text}</button>
);

RecordButton.defaultProps = {
  onClick: {},
  text: '',
};

RecordButton.propTypes = {
  onClick: PropTypes.func,
  text: PropTypes.string,
};

export default RecordButton;

Propsów używamy do komunikowania komponentów miedzy sobą, a state to stan komponentu . Pomogłem :D? React ma całkiem przyjemną, lekko wybrakowaną dokumentację. Spróbuj się zagłębić .

komentarz 9 września 2018 przez Alterwar Dyskutant (7,650 p.)
edycja 9 września 2018 przez Alterwar

Ahaa, czyli colorList nie bedzie propsem w App tylko w Colors?;)

const Colors = ({colorList, handleStartGenerate}) => {

i dla Colors ustawiam propsy dla colorList i  handleStartGenerate?

i wyglądałoby to tak?

Colors.defaultProps = {
  colorList: {},
  handleStartGenerate: {},
};
 
Colors.propTypes = {
  colorList: PropTypes.array,
  handleStartGenerate: PropTypes.func
};

 

Czy mógłbyś mi na przykładzie App.js i Colors.js dopasować propsy i je wypisać? Sądze, że po tym bym zrozumiał do końca jak to ma działać :) Bo w Colors chyba już wiem, ale widzę w App nie mam za bardzo pomysłu.

komentarz 9 września 2018 przez k.wichura Pasjonat (19,870 p.)
Tak, colorList to stan w App.

Tak, tylko zmien te moje nazwy :D onClick na colorList i text na handleStartgenerate. colorList to funkcja, a nie przypadkiem tablica ?
komentarz 9 września 2018 przez Alterwar Dyskutant (7,650 p.)
edycja 9 września 2018 przez Alterwar

Masz rację, zmieniłem u góry. Uhm chyba zaczynam to łapać. Czyli w moim przypadku w App nie mam propsów a jedynie one będą w Colors i SimilarColors?

Czyli propsy -> ({colorList, handleStartGenerate}),  ({colorSimilarList}) , a state to state i z tego nie robimy propsów.

 

A w takim przypadku?

const SimilarColors = ({colorSimilarList}) => {
    const similarList = colorSimilarList.length ? (
        colorSimilarList.map(color => {
            for(let entry of color.similars){
                return(
                    <div key={entry.id} className="child-wrapper-block-color">
                        <div className="child-block-color" style={{background: entry.similar1 }}>
                            <span className="color-name">{entry.similar1}</span>
                         </div>

entry.id oraz entry.similar1 też powinny być propsami?

Edit:

wg. mnie entry id i similar nie będą propsami bo propsy to argumenty przychodzące od rodzica. Dobrze rozumiem? Czyli w tym przypadku będzie to tylko colorSimilarList

komentarz 9 września 2018 przez k.wichura Pasjonat (19,870 p.)
Tak, to co napisałeś jest ok. Porpsami przekazujemy coś od rodzica do dziecka, a state jest to stan komponentu i tylko jego.

Wiec jeżeli ta komunikacja musi powstać to używamy props. W bardziej zaawansowanych aplikacjach wejdzie tutaj redux, ale on tez komunikuje sie przez propsy.

Nie bardzo rozumiem. Jak można mylić state z props. Zapoznaj się z tym tutkiem, w szczególności punkt 7, 8, 9. https://typeofweb.com/2018/01/08/interakcja-komponentami-react-js/
komentarz 9 września 2018 przez Alterwar Dyskutant (7,650 p.)
Ok dziękuje serdecznie za pomoc. Mam nadzieję, że przy kolejnej apce będzie lepiej :D

Podobne pytania

+1 głos
2 odpowiedzi 452 wizyt
pytanie zadane 14 października 2017 w Nasze projekty przez Maniti Obywatel (1,220 p.)
0 głosów
2 odpowiedzi 166 wizyt
pytanie zadane 4 maja 2019 w JavaScript przez Pawel512 Nowicjusz (240 p.)
0 głosów
0 odpowiedzi 139 wizyt
pytanie zadane 24 października 2020 w C# przez Szyszka Gaduła (3,490 p.)

92,454 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...