Kalkulator BMI

Probuję stworzyć aplikację kalkulator BMI w React:

Czy dobrze robię?

getBmi(bmi) {
    if(bmi < 18.5) {
        return "Underweight";
    }
    if(bmi >= 18.5 && bmi < 24.9) {
        return "Normal weight";
    }
    if(bmi >= 25 && bmi < 29.9) {
        return "Overweight";
    }
    if(bmi >= 30) {
        return "Obesity";
    }
}

1. uzywaj znacznikow kodu.
2. formatuj kod, to jest nieczytelne
3. to nie ma nic wspolnego z reactem
4. tu jest pare ifow i zwracanie stringa. Jezeli tylko chcialas o to zapytac to tak, wyglada to dobrze

Ale zamiast pytac nas czy jest dobrze, dowiedz sie sama :) Jak?

Napisz Testy jednostkowe.

Tutaj masz linka do googla jak bys chciala wiedziec wiecej daj znac
https://www.google.com/search?client=firefox-b-d&q=unit+test+javascript

tl;dr co daja testy
Uruchamiasz ta funkcje z roznymi wartosciami i sprawdzasz co Ci zwrocila. Wiesz z jakim parametrem ja wykonujesz wiec wiesz co Ci zwroci (a raczej co powinna)

1. to nie ma nic wspolnego z reactem

jak to? to nie jest react?????

Tutaj masz linka do googla jak bys chciala wiedziec wiecej daj znac
https://www.google.com/search?client=firefox-b-d&q=unit+test+javascript

ten link nie działa

dziala bo klikam na niego i mnie przenosi do google.
nie musisz cytowac odpowiedzi ktora jest nad toba

wpisz w google
unit test javascript

i bedziesz miec (prawie) to samo

w przypadku bmi === 24.9 lub 29.9 dostaniesz undefined, ja bym tam zmienił odpowiednio na 25 i 30

fasadin napisał(a):

dziala bo klikam na niego i mnie przenosi do google.
nie musisz cytowac odpowiedzi ktora jest nad toba

wpisz w google
unit test javascript

i bedziesz miec (prawie) to samo

Jak zmienic to w reacta?

React => Framework
Javascript => Jezyk programowania

React jest uzywany (w bardzo duzym uproszczeniu) do wyswietlania danych w html (template)

Ty masz tutaj typowo funkcja w javascripcie.

Jak chcesz zmienic kod javascriptowy na reacta? Co chcesz osiagnac?

Widze, ze nie masz pojecia co robisz. Wiem natomiast, ze wiesz co chcesz osiagnac

Wiec moze zamiast pytac o kod napisz co biznesowo chcesz osignac.

Utwórz aplikację reacta https://reactjs.org/docs/create-a-new-react-app.html

Na tym poziomie zapomnij o reactjs, naucz się podstaw javascript.
Poza tym funkcja którą wrzuciłaś, jedynie zwraca wynik. A co z samym wyliczaniem BMI?

W React programuje się w JS, zatem twierdzenie, że JS nie ma nic wspólnego z Reactem to jakiś mindfuck.

Jeśli mogę coś zasugerować:

getBmi(bmi) {
  var bmi_opis = "Underweight";
  if (bmi >= 18.5) bmi_opis = "Normal weight";
  if (bmi >= 25)   bmi_opis = "Overweight";
  if (bmi >= 30)   bmi_opis = "Obesity";
  return bmi_opis;
}

Albo tak:

const getBmi = bmi =>
        bmi < 18.5? 'Underweight':
        bmi < 25? 'Normal weight':
        bmi < 30? 'Overweight':
        'Obesity';

:)

@Maciej Cąderek: To dobrze, że masz mieszane uczucia bo ta funkcja jest bez sensu :) Powinna sprawdzać czy w ogóle bmi jest liczbą, czy mieści się w zakresie, w przeciwnym wypadku rzucać errorami. Gdy projekt rośnie, a bawimy się takimy funkcyjkami to potem robi się spagetti i jest masakra.

Poglądowo powinno to byc w stylu:

// config.js

const appConfig = {
    bmi: {
        values: [
            {
                name: 'Underweight',
                min: 0,
                max: 18.5,
            },
            {
                name: 'Normal weight',
                min: 18.5,
                max: 25,
            },
            {
                name: 'Overweight',
                min: 25,
                max: 30,
            },
            {
                name: 'Obsesity',
                min: 30,
                max: 10000,
            },
        ]
    }
}

// helpers.js

const isNumber = val => typeof val === 'number' && val === val;

// errors.js

const errors = {
    isNotANumberError: new Error('bmi must be a number type'),
    bmiIsOutOfRangeError: new Error('bmi is out of range'),
}

// getBmi.js

const getBmi = async (bmi) => {
    if (!isNumber(bmi)) {
        throw errors.isNotANumberError;
    }

    const result = appConfig.bmi.values.filter(value => bmi >= value.min && bmi < value.max);

    if (!result.length) {
      throw errors.bmiIsOutOfRangeError;
    }
    return result[0].name;
};

// test.js

(async () => {
    try {
        const result = await getBmi(20);
        console.log(result);
    } catch (e) {
        console.error(e);
    }
})();

To wygląda jak przerost formy nad treścią, ale tylko pozornie ponieważ w dłuższej perspektywie panujemy nad projektem. Oczywiście nie wspominam tu o dalszych rzeczach typu repozytorium, linter, prietter, testy itd. itp.

Chciałem tylko dać do zrozumienia początkującym, żeby w pierwszej kolejności zajęli się nauką podstawowych narzędzi, ściągali sobie skeletony z githuba lub podglądali proste projekty, przede wszystkim nauczyli się korzystać z dokumentacji języka i bibliotek, a potem działali, bo jeśli na początku przyswoją złe nawyki to będzie kiszka w przyszłości.

A piszę tak ponieważ czasem widzę kody niektórych juniorów to włosy się jeżą.
To na tyle :)

kult napisał(a):

@Maciej Cąderek: To dobrze, że masz mieszane uczucia bo ta funkcja jest bez sensu :) Powinna sprawdzać czy w ogóle bmi jest liczbą, czy mieści się w zakresie, w przeciwnym wypadku rzucać errorami. Gdy projekt rośnie, a bawimy się takimy funkcyjkami to potem robi się spagetti i jest masakra.

Zgadzam się, w takich funkcjach w istocie powinno się sprawdzić czy bmi jest liczbą i czy jest "dobrą" liczbą.

Ale.

Szansa że algorytm liczenia BMI się zmieni jest bardzo mała. Wręcz żadna. Prędzej spodziewałbym się przepisania całej aplikacji niż tego że zajdą jakieś zmiany w tej części kodu.

Więc myślę że Twój kod nie jest przerostem formy nad treścią tylko pozornie, ale i dosłownie.

Haskell napisał(a):

W React programuje się w JS, zatem twierdzenie, że JS nie ma nic wspólnego z Reactem to jakiś mindfuck.

To w takim razie w pytaniu widzę kod z Angulara oraz jquery :D jeszcze się nie zdecydowałem :D