Домашняя работа №7 - React

[redexp]

Видео: https://youtu.be/9qZNqjWZIdg

Хорошие статьи по теме:

• https://uk.reactjs.org/docs/state-and-lifecycle.html
• https://uk.reactjs.org/docs/forms.html

Основная задача:

Переделать задачу про регулярки #12 со следующими изменениями:

• Копируете папку react-form, в ней выполняете домашку. Если я успею написать бота, то он будет проверять домашку по файлу react-form/dist/index.html
• Дописать компонент UserForm который будет принимает атрибут user, пример https://github.com/redexp/GeekHub-2020.js/blob/e48276c17f64aafd61c14630110f3fa7640aa461/react-form/src/index.js#L5-L14
• Поля name, email и password вам знакомы, как их валидировать вы уже знаете. На форму вам нужно добавить обработку поля phones. На каждый элемент массива должен создаваться следующий html

<div class="input-group mb-3">
  <input type="text" class="form-control">
  <select class="custom-select">
    <option value="home">Домашній</option>
    <option value="mobile">Мобільний</option>
  </select>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Видалити</button>
  </div>
</div>

• В инпуте соответственно выводиться значение поля number и в селект - type. По клику на кнопке, весь input-group должен удаляться. По сабмиту формы каждое инпут поле из массива phones должен валидироваться относительно того какой тип телефонного номера. Если home то номер должен состоять только из шести чисел и не начинаться с нуля, а если mobile то номер может быть либо 10 чисел и первое обязательно 0, либо 12 чисел и первое обязательно 3.
• Под выводом массива phones должна быть кнопка, которая добавляет в массив ещё один объект {number: '', type: 'home'} и соответственно должен добавится html выше.
• поле Опис из #12 может удалить, его повторять не нужно

Если хотите, можете вместо чистого bootstrap попробовать bootstrap-styled. Важно пробовать разные библиотеки и подходы на этапе обучения. Если вам не понравиться и будет жутко неудобно - это неплохо, самое главное, чтобы вы могли аргументировано объяснить что именно плохого в той или иной библиотеке, а не просто "та мне чот не очень".

[Daniel-developer5]

Крута бібліотека для реакту Material UI

[kononyukii]

Подскажите пожалуйста, домашку выполнять в папке regexp? Или создавать новую папку?

[redexp]

@kononyukii точно, сейчас допишу задачу

[redexp]

нас кстати уже 28, отвалилось ещё 14 студентов. С такими темпами после нового года и бота писать не нужно будет, можно будет самому проверять

[Alexandr-Kravchenko]

нас кстати уже 28, отвалилось ещё 14 студентов.

а як дізнатися, чи я залишився, чи вилетів?

[Daniel-developer5]

Так, теж цікаво, а то я з тих людей, які думають: "а малолі я папку не react назва..."

[redexp]

остались те у кого был файл react/dist/index.html

[andrewvoinarovskyi]

остались те у кого был файл react/dist/index.html

Пів години тому?

[redexp]

если вы случайно не создали этот файл, то создайте в своём репозитории issue на меня с просьбой перепроверить

[andrewvitrenko]

@redexp как только пользователь открывает страницу должны появится 3 инпута из домашки regexp(имя, имейл и пароль)? какие-то ещё поля ввода должны быть? когда должлно появится поле ввода номера?

[Daniel-developer5]

Поле ввода номера з'являється відразу

[andrewvitrenko]

тогда объект user мы собираем по событию submit и передаем его UserForm? что UserForm с ним делает? после валидации как-то выводит?

[Daniel-developer5]

1. Ми отримуємо на початку виконання програми об'єкт user та рендеремо форму на його основі
2. При події сабміт перемальовуємо форму з бекграундами для інпутів відповідно до їньої валідності

Я це так розумію, @redexp поправте, якщо помилився

[redexp]

@Daniel-developer5 всё правильно, спасибо @AndriiVitrenko я сейчас сделаю основу, будет понятнее что нужно делать я надеюсь

[AndreyKondakov]

@redexp ооууу фейл, я делал прошлое задание, но самое главное npx webpack что бы было все в dist забыл

[andrewvitrenko]

@redexp в инпутах для телефонов при проверке должны окрашиватся только сами инпуты, или и весь родительский див тоже?

[redexp]

@AndriiVitrenko только инпут

[RomanTaran]

Добрый вечер, я так понимаю для индикации, что введенные данные в input валидированы, желательно использовать функционал bootstrap?

[YuliiaKavytska]

Добрый вечер, я так понимаю для индикации, что введенные данные в input валидированы, желательно использовать функционал bootstrap?

Лучше использовать styled-components как в видео-уроке.

[RomanTaran]

Подскажите, пожалуйста, у нас в массиве два поля с одинаковым значением type: 'mobile'. Никак не могу сообразить как в input вставить при стартовой отрисовке второй номер мобильного телефона '380123456789'

[YuliiaKavytska]

Подскажите, пожалуйста, у нас в массиве два поля с одинаковым значением type: 'mobile'. Никак не могу сообразить как в input вставить при стартовой отрисовке второй номер мобильного телефона '380123456789'

Попробуй использовать map

[andrewvitrenko]

@redexp для обновление страницы лучше использовать state и вручную корректировать shouldComponentUpdate(), или менять props и рендерить компонент с уже новыми props (по примеру прошлой домашки с Table)?

[Daniel-developer5]

@redexp Не для оновлення, а для перемальовки. Використовуємо стейт та змінюємо його при діях юзера. При зміні стейту контент перемальовується

[andrewvitrenko]

@Daniel-developer5 вот тут облом. С обычным Component это работает на ура. А по условию домашки нужно использовать PureComponent. И вот обновляется только если кроме state изменить еще и props

[Daniel-developer5]

@AndriiVitrenko https://codesandbox.io/s/hardcore-sun-v4grq?file=/src/App.js, не правильно стейт змінюєш може

[redexp]

@AndriiVitrenko А по условию домашки нужно использовать PureComponent - не было такого условия. Твоя проблема в том, что ты передаёшь один и тот же объект, естественно, что PureComponent сравнивает предыдущий user и новый user, видит что они одинаковые и ничего не делает. Компонент UserForm должен один раз взять user, а дальше работать со state. Скопируй все поля которые должны отрисовываться из user в state

[kononyukii]

Та же проблема, стейт меняется по клику на кнопку (вывожу в консоль) а страница не перерендеривается. Пробовал использовать setState через стрелочную функцию, как в документации, результат тот же. P.s. через Component работает, только что проверил

[andrewvitrenko]

@kononyukii я заметил что проявляется только при UserForm extends PureComponent. Если сделать UserForm extends Component, то проблема исчезает. Насколько я понял из Интернета это потому что PureComponent в методе shouldComponentUpdate() сравнивает и state и props. (возможно неправильно понял)

[andrewvitrenko]

@redexp я имел ввиду что в коде, где вы указали дописать UserFom, сказано что UserForm extends PureComponent

[andrewvitrenko]

Та же проблема, стейт меняется по клику на кнопку (вывожу в консоль) а страница не перерендеривается. Пробовал использовать setState через стрелочную функцию, как в документации, результат тот же. P.s. через Component работает, только что проверил

я так понял что мы оба делали что-то по типу this.setState({user: //тут объект с новыми данными по юзеру}) и оба забыли что при копировании объектов копируются и их ссылки. и получаем что что newProps === props

[Ant198]

Присвоював стейтам пропси напряму в конструкторі. Це вірний підхід? Чи маніпуляції такого типу краще робити через методи життєвого циклу?

[redexp]

@Ant198 так и надо

[MaksymSu]

@redexp А домашка новая будет?

[redexp]

да, постараюсь сегодня придумать

[redexp]

домашку №8 не придумал, но добавил react-form в examples

[Alexandr-Kravchenko]

а трансляція завтра буде?

[redexp]

Извините, проспал и устал, стрим будет завтра в 10 утра

[Daniel-developer5]

return <input onChange={e => setValue(e.target.value)} />

Якщо обробник події компактний, так писати норм чи для оптимізації краще і це виносити окремо і передавати назву функції?

[redexp]

#22