В этом совместном скринкасте Сара Драснер присоединяется ко мне и проводит меня через некоторые из моих самых первых занятий React. Мы занимаемся некоторыми функциями в стиле «реального мира»: формой комментариев.
Это оказалось довольно полезным элементом пользовательского интерфейса для работы, поскольку для этого требовалось много вещей, довольно фундаментальных для React (или, по крайней мере, мне кажется). Например, главное «приложение», которое имеет дело с state(наша большая «вещь» - это сами комментарии) и компонентами, которые имеют дело с визуализацией представления (например, форма комментария - это компонент, а каждый комментарий - это компонент).
Затем мы занялись множеством более мелких вещей, связанных с React, но также и огромными вещами, которые нужно понять в React-land, например:
props- способ передачи данных между компонентами. Когда вы их отправляете, они выглядят как атрибуты HTML и поступают как объект в виде this.props.refs- как вы извлекаете данные из созданного нами элемента формы.keys- способ однозначной идентификации компонента при его повторении. Мы повторяем здесь комментарии (их может быть несколько), поэтому, если бы у нас была функциональность, которая могла бы изменить любой из них, наличие ключа - это то, что делает React эффективным (он может просто заменить этот единственный комментарий вместо всех) .
Плюс еще тонна!
Вот демо, над которым мы работали:
См. Статью Криса Койера (@chriscoyier) на CodePen, как «Ручка для запуска формы комментариев на основе реакции».
Как вы можете повысить уровень своего обучения React, помимо этого? Начни здесь.