Мне очень нравится Реакт. Иногда по ошибке. Кое-что о структуре компонентов и возможности выковать новый файл, экспортировать, импортировать, добавить какой-то условный рендеринг, какие-то ‹Routes/› и рендерить в браузере. Это просто те заклинания, которые мне нравятся. Чтобы узнать больше о том, как я обожаю React, см. мой предыдущий пост React — мой новый парень.

Иногда я забываю, когда работаю в React, что на самом деле технически все еще пишу код на JavaScript, моем старом увлечении. Именно тогда, когда я впервые научился создавать функции, понимать сложность циклов и работать с магическими кодами над массивами и объектами, я влюбился в программирование. Работая в React, я часто настолько увлекся рендерингом своих компонентов, что забываю на самом деле использовать некоторые волшебные решения проблем, которые предоставляет ванильный JavaScript.

Работая над HutchFIT, ориентированным на пользователя приложением, которое я продолжаю разрабатывать для своего личного тренировочного бизнеса, я недавно стал несколько озабочен опытом взаимодействия моих клиентов с программным обеспечением. В первую очередь меня интересовало, как все выглядело и имело ли это визуальный смысл. Очевидно, что React предоставляет мне множество возможностей возиться с компонентами.

Когда я создавал компонент, в котором я, как тренер, мог создать тренировку для моего клиента (мы оба обращались к приложению из внешнего интерфейса как пользователь), мне нужно было создать элемент выбора, в котором величина сопротивления для конкретное упражнение может быть установлено в диапазоне от веса тела до примерно 120 фунтов. (В моем списке в основном родители среднего возраста, пытающиеся оставаться привлекательными для своих партнеров и живыми для своих детей. Никто не пытается устанавливать мировые рекорды.)

Проблема: создать элемент формы в виде тега ‹select›, который предоставляет пользователям ‹option› от 5 до 120 фунтов с шагом 5 фунтов.

Я настроил элемент формы…

<select onChange={(e)=>setResistance(e.target.value)}>
     <option>5-10 lbs</option>
     <option>10-15 lbs</option>
     <option>15-20 lbs</option>
...
     <option>115-120 lbs</option>
</select>

Чтобы быть ясным, прежде чем я действительно зашел слишком далеко со своими «вариантами» / вариантами, я почувствовал смутно знакомое чувство, что должен быть лучший путь, более правильный путь. И это было бы фактически использовать JavaScript вместо того, чтобы полагаться на React, чтобы вернуть мой жестко закодированный JSX.

Самое интересное в Javascript (или, по крайней мере, та его часть, которая действительно увлекла меня программированием) заключалась в том, чтобы решать проблемы с помощью как можно меньшего количества кода. И это включает будущий код. Как я могу решить эту проблему, используя как можно меньше кода сейчас и требуя наименьшего количества кода для изменения этого элемента в будущем? Какое заклинание я могу использовать, чтобы создать этот элемент формы с наименее подробным заклинанием?

Я полагался на старый добрый «цикл for».

const options = []
function createOptions(){
     for(let i = 5; i < 120; i = i + 5){
          options.push(<option key = {i}>{i} - {i + 5}</option>)
     }
}

Проще говоря, начните с переменной, установленной на 5. Создайте параметр с диапазоном от переменной (в настоящее время 5) до переменной плюс 5. Увеличьте переменную на пять и до того же значения, пока наша переменная остается меньше 120.

Очевидно, что даже с вызовом функции несколькими строками позже я сэкономил себе много строк кода. Линии, которые я сейчас сохранял, были очевидны. Будущий код, который мне не нужно было писать/изменять, стал очевиден, когда я решил изменить приращение на 2,5 и увеличить сопротивление до 140 фунтов, что было достигнуто с помощью нескольких нажатий клавиш, изменяющих мою функцию. Кто знает? Возможно, в моем списке появятся еще несколько амбициозных спортсменов.

Вероятно, есть еще более эффективный способ сделать это, о котором я до сих пор не думал, который может сбрить несколько строк и очистить еще больше. Я был так взволнован этой маленькой функцией, что хотел дать ей немного пожить и поработать, прежде чем приступить к ее рефакторингу.

Возможно, в будущем я придумаю кастомный хук React, который примет мои общие намерения как программиста и вернет ванильный код, который мне понадобится, чтобы сделать это как можно проще. До тех пор мне просто нужно помнить об использовании Javascript.