Решение задач на собеседование по React 2


Вопросы и ответы на собеседовании по React.js

Самый простой способ перерендерить компонента — изменить его props. Также вы можете сделать это, используя метод this.setState. Наконец, метод this.forceUpdate может инициировать рендеринг. Стоит отметить, что два первых способа сначала вызовут метод shouldComponentUpdate(), поэтому, если вам нужен принудительный рендеринг, используйте метод forceUpdate.

2) Назовите методы жизненного цикла компонента?

  • constructor(props): инициализация компонента
  • componentWillMount(): вызывается непосредственно перед рендерингом компонента
  • render(): метод, отвечающий за рендеринг
  • componentDidMount(): метод вызывается после рендеринга компонента
  • componentWillUnmount(): вызывается перед удалением компонента из DOM
  • shouldComponentUpdate(nextProps, nextState): вызывается всякий раз, когда изменяется состояние или props . Поскольку параметры получают новый объект props и состояние. Если эти функции возвращают true компонент, будет повторно перерисован
  • componentWillUpdate(nextProps, nextState): вызывается, если shouldComponentUpdate возвращает true
  • componentDidUpdate(prevProps, prevState): вызывается сразу после обновления компонента

Компонент более высокого порядка — это функция, которая принимает компонент и возвращает новый компонент, он похож на функции высшего порядка. HOC — это отличный способ повторного использования логики компонента. Также стоит отметить, что HOC не является частью React API, это просто шаблон проектирования.

Какой необходимый уровень знаний для junior React.js Разработчика?

UPDATE: реальные тестовые задания и разборы здесь, ответы на все вопросы из поста в моем блоге об обучении react.

Извините, но стандартная задача, про «напишите функуцию add, которая при вызове add(1)(2) вернет 3» — многих положила на лопатки =) Поэтому будьте готовы..

React
0) Какую проблему решает react ?
1) Мгновенно ли срабатывает setState? Если нет, то как выполнить код, который 100% выполнится после того, как новый state будет установлен?
2) Зачем многие постоянно пишут в constructor: this.FUNCTION_NAME = this.FUNCTION_NAME.bind(this) и отсюда вопрос вытекает чему равно this в разных местах вашего компонента.
3) в каких методах жизненого цикла стоит выполнять xhr запросы? В каких стоит «обновлять state на основе props»?
4) Что будет если вызвать this.setState в render методе компонента?
5) зачем нужен componenWIllUnmount, приведите пример..
6) Контролируемые, не контролируемые компоненты
7) Как организовать роутинг в реакт приложении? (ответ: взять react-router — подходит, но было бы круто, если бы вы рассказали, как он примерно работает)*
8) Зачем нужны propTypes? Что происходит с ними в production сборке?
9) Как можно удобно «отлаживать» чужой код приложения, написанного на react (намек в сторону React devtools)
.

Redux
0) Какую проблему решает redux?
1) Зачем многие создают типы действий NAME_REQUEST / NAME_SUCCESS ? А заодно, что такое «действие», а что такое «создатель действия».
2) Что такое редьюсер? Можете написать простой редьюсер без react/redux?*
3) Для чего нужен redux-thunk? Как он работает? Напишите (можно псевдокод) асинхронный создатель действия (либо, если надоело говорить «терминами» — асинхронный aciton)
4) Как компоненты приложения получают «пропсы» из «стора»?*
5) Можно ли (и считается ли это нормальным) использовать state, если используется Redux?
6) Почему в reducer’ax мы возвращаем новые объекты? Приведите пример, когда вы возвращаете новый объект, а когда тот же самый.
6.5) А так же, «как в js вообще это работает?». Например:

Что будет в obj1, почему? В каких случаях объекты могут быть равны?
7) Что возвращает функция connect (из react-redux)?
.

Общее:
0) package.json
1) Webpack, gulp, etc.
2) node.js
3) promise

Что-нибудь практическое:
1) Как бы вы валидировали форму, если ошибки валидации приходят после submit’a ее на сервер..
2) Почему не работает следующий код, сделайте чтобы работало
.
На истину не претендую, но такие вопросы имели место быть на собеседованиях. В беседе можно многое разузнать дополнительными вопросами и так далее. Так же, если часть вопросов вам неизвестна — не беда, многие и на половину ответить не могут.

Вопросы про React на собеседовании

Отмечу, что вопросы, указанные здесь, не самый лучший способ для определения уровня владения React претендентом. Просто, Вопросы о React для собеседования кажется более интересным названием, нежели Вещи, которые вам не обязательно знать о React, но которые, тем не менее, могут быть вам полезны.

Что происходит, когда вы вызываете setState?

Во-первых, если был вызван setState, то React захочет объединить объект, который вы отправили в setState с текущим состоянием компонента. Это позволит начать процесс согласования. Конечной целью согласования является обновление пользовательского интерфейса на основе его нового состояния наиболее эффективным из возможных способов. Для этого React сформирует новое дерево элементов (которое можно рассматривать как объектное представление вашего пользовательского интерфейса). Как только React получает это дерево, чтобы выяснить как интерфейс должен измениться в ответ на новое состояние, React сравнит новое дерево с предыдущим деревом элементов. В этом процессе, React узнает точные изменения, которые произошли. Зная эти изменения, React получит возможность провести изменения в интерфейсе только там, где это необходимо и этим минимизировать количество изменений.

Какая разница между Элементом и Компонентом в React?

Проще говоря, элемент в React описывает то, что вы хотите видеть на экране. Если точнее, то элемент в React является объектным представлением некого пользовательского интерфейса.

Компонент в React является функцией или классом, который при необходимости принимает данные и возвращает элемент (обычно в виде JSX, который преобразуется в вызов createElement)

Для дополнительной информации изучите раздел React Elements vs React Components

Когда вам использовать >Functional Component?

Если ваш компонент имеет состояние или содержит используемые методы значимые для компонента, то используйте Class component. В других случаях используйте Functional component.

Что за refs в React и в чем их важность?

Refs являются запасным выходом, который позволяет вам получить прямой доступ к элементу DOM или состоянию компонента. Чтобы их использовать вы добавляете атрибут ref в ваш компонент, значение которого является функцией обратного вызова, которая получит базовый элемент DOM или установленный экземпляр компонента в качестве первого аргумента.

Отметим, что наше поле ввода имеет атрибут ref, значение которого является функцией. Эта функция получает реальный элемент DOM на вход, который мы затем вставим в экземпляр для того, чтобы получить доступ к нему внутри функции handleSubmit.

Часто неверно полагают, что необходимо использовать класс компонента для того, чтобы использовать refs, но refs могут быть использованы с функциональными компонентами за счет использования замыкания:

Что за keys в React и чем их важность?

Keys (ключи) помогают React отследить какие элементы были изменены, добавлены или удалены из списка.

Важно, чтобы каждый ключ был уникальным между “собратьями”. Мы уже говорили о процессе согласования и в частности о процессе сравнения нового дерева элементов с предыдущим. Keys делают этот процесс более эффективным при работе со списками, потому что React может использовать ключ на дочерний элемент, чтобы быстро узнать если элемент является новым или если он был просто перемещен при сравнении деревьев элементов. Не только keys делают этот процесс более эффективным, но без них, React не сможет узнать какое локальное состояние соответствует какому пункту при его перемещении. Поэтому не пренебрегайте использованием keys при применении map.

Если вы создали в React элемент Twitter как в примере ниже, то как бы он выглядел?

Если вы не очень хорошо знакомы с шаблоном render callback, это может показаться немного странным. В этом шаблоне компонент получает функцию в качестве своего потомка. Обратите внимание, что находится внутри тега выше. Потомок компонента Twitter является функцией. Это означает то, что в данной реализации компонента Twitter нам необходимо обратиться к props.children как к функции.

Вот как я вижу это решение:

Обратите внимание, что, как упоминал выше, я обращаюсь к props.children как к функции, вызывая ее и передавая пользователя.

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

Чтобы продемонстрировать это, давайте примем, что в другом файле мы хотим отрисовать Profile вместо Badge, и так как мы используем шаблон render callback, мы можем менять окружение интерфейса без изменения нашей реализации родительского компонента Twitter.

В чем разница между controlled и uncontrolled компонентами?

Одна из основных идей React, это наличие контроля над компонентами и управление их собственным состоянием. Что случится если мы отправим чистый HTML элементов формы (input, select, textarea и т.д.) в общей куче? Должны ли мы иметь React, как “единственный источник правды” или мы должны позволить, чтобы данные формы существовали в DOM в HTML-форме? Эти два вопроса лежат в основе контролируемых (controlled) и неконтролируемых ( uncontrolled) компонентов.

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

Некотролируемый компонент — это такой компонент, где ваши данные формы обрабатываются в DOM, а не внутри вашего компонента.

Хотя неконтролируемые компоненты обычно проще в реализации, так как вы просто берете значение из DOM используя refs, рекомендуется использовать контролируемые компоненты. Основная причина этого в том, что контролируемые компоненты поддерживают мгновенную проверку полей, позволяют вам условно отключать/включать кнопки, устанавливать формат входных данных и, вообще, более отражают суть React.

В какой момент жизненного цикла вы применяется AJAX запросы и почему?

AJAX запросы должны идти в момент события componentDidMount.

Топ-пост этого месяца:  Google отсутствие ссылки на первоисточник – это глупо

Для этого есть несколько причин:

  • Следующая реализация алгоритма сверки в React будет иметь возможность запускать и останавливать рендеринг для повышения производительности. Одним из результатов нововведений является то, что componentWillMount (часть цикла событий, где возможно стоит реализовать AJAX-запрос) будет “не детерминированным”. Это означает то, то React может вызывать componentWillMount в разное время, когда он чувствует в этом необходимость. Это, очевидно, плохая формула для создания AJAX-запроса.
  • Вы не можете гарантировать, что AJAX-запрос не будет разрешен (resolve) перед моментом монтирования компонента. Если да, то это будет означать, что вы пытаетесь выполнить setState над демонтированным компонентом и вы обязательно получите сообщение об этом от React. Делайте AJAX-запросы в componentD >

Что делает и почему важен shouldComponentUpdate ?

Выше мы уже говорили о сверке и что делает React, когда вызван setState. В жизненном цикле компонента имеется метод shouldComponentUpdate, который позволяет нам отказаться от участия в процессе сравнения для некоторых компонентов (и их дочерних компонентов). Зачем нам это вообще нужно делать? Как отмечалось выше, “цель сравнения в том, чтобы самым эффективным путем обновить интерфейс на основе нового состояния”. Если вы знаете, что часть интерфейса не изменится, то нет причин, заставлять React пройти через трудности, чтобы понять это. При возвращения false из shouldComponentUpdate, React будет понимать, что текущий компонент и все его дочерние компоненты останутся такими же, какими являются в данный момент.

Как вы укажите React работать в режиме Production и как это сделать?

Обычно вы можете использовать метод DefinePlugin в Webpack для установки NODE_ENV в production. Это вырежет такие вещи, как propType валидацию и другие предупреждения. Кроме того, это хорошая идея, чтобы минимизировать ваш код, потому что React использует Uglify для удаления “мертвого кода” и комментариев, что позволит сильно уменьшить размер сборки.

Почему необходимо использовать React.Children.map(props.children, () => ) вместо props.children.map(() => ) ?

Нет гарантии, что props.children будет массивом.

Взгляните на код:

Если внутри Parent вы попытаетесь вызвать props.children.map, то это вызовет ошибку, потому что props.children является объектом, а не массивом.

React отработает с props.children только в том случае, если родитель имеет более одного дочернего элемента, как здесь:

Вы должны использовать React.Children.map, потому что эта реализация учитывает, что props.children может быть как объектом, так и массивом.

Опишите, как в React обрабатываются события?

Чтобы решить проблемы кроссбраузерной совместимости, вашим обработчикам в React будут переданы экземпляры SyntheticEvent, которые являются в React обертками над нативными событиями браузеров. Эти искусственные события имеют такой же интерфейс как и у нативных методов, которые вы используете, за исключение того, что они одинаково хорошо работают во всех браузерах.

Интересно то, что React не назначает события на дочерние элементы сам. React будет слушать все события на верхнем уровне, используя простой слушатель событий. Это хорошо для производительности и также означает, что React не нужно беспокоиться об отслеживании при обновлении DOM.

В чем разница между createElement и cloneElement?

createElement мы получаем из JSX и его React использует для создания элементов (объектное представление некоторого интерфейса). cloneElement используется для клонирования элемента и отправки ему новых параметров.

Какой второй аргумент можно передать опционально в setState и какова его цель?

Функция обратного вызова, которая будет вызываться после выполнения функции setState и отрисовки компонента.

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

С кодом все отлично 🙂 Такой вариант редко используется и не достаточно хорошо известен, но вы можете отправить функцию в setState, которая получает предыдущее состояние и параметры props и возвращает новое состояние, также как мы делали выше. И это не только не плохой код, но он также активно рекомендуется если вы обновляете состояние на основании предыдущего состояния.

Техническое собеседование react разработчика

Анонс

В арсенале у меня есть скользкая тема — собеседование frontend разработчика.

Прохождение собеседования — тема не очевидная, поэтому есть сомнения в необходимости выдавать вам «еще одно мнение» с моей стороны.

Как обычно, для того, чтобы узнать нужно ли это вам, я сделал опрос — �� https://goo.gl/forms/qD0kfCOt2z2tL7SO2

❌Важно, на данном вебинаре мы НЕ будем обсуждать:
— тему IT в целом
— зарплаты
— сложность «вхождения»
— как попасть в яндекс/мейл/авито и прочих «китов» рынка работы

✔️Что мы будем обсуждать:
— вопросы и ответы на них (не все, кратко)
— «цель» собеседования
— портфолио, вклад в open source (сразу скажу, вклад в open source имеет значение только для очень крутых компаний и только если ваш вклад хорош, а по факту — можете просто игнорировать этот пункт. Нет портфолио — плохо. Нет вклада в open source — не проблема, вообще)

Почему такие ограничения:

Без воды — это не просто слоган. Это правило.

Также, чтобы не тратить ваше время, спойлер, «почему я не прошел собеседование»:

  • 2013й год, позиция Верстальщик/JavaScript разработчик: не знал vanila (нативный) javascript
  • 2014й год, позиция JavaScript разработчик — плохо отвечал на вопросы по vanila javascript
  • 2020й год, позиция Senior JavaScript разработчик — хотел денег больше, чем смог продемонстрировать знаний (не ответил на все вопросы так, как от меня ожидали, не оправдал ожиданий)
  • 2020й год, позиция Team Lead (уже кстати, React) — не смог продемонстрировать достаточно знаний в backend технологиях

Решение задач на собеседование по React

Kích thước video:

Hiển thị các điều khiển trình phát

  • Xuất bản 09 Th02, 2020
  • Подробнее о курсе «JavaScript. Полное руководство для современной веб-разработки»: webformyself.com/javascript/
    Исходники: drive.google.com/open? >В этом видео вы увидите, как решать задачи на собеседование, используя технологию React js.
    В результате данного ролика вы увидите реализацию приложения, которое будет загружать асинхронно данные с сервера, выводить их в таблицу, показывать индикатор загрузки данных с сервера и т.д.
    После этого, вы увидите, как реализовать динамическую сортировку данных в таблице и обрабатывать выделение отдельной строки в таблице с выводом ее детального отображения.

NHẬN XÉT • 43

круто! спасибо. после просмотра, отрефакторил своё тестовое задание, стало реально ЛУЧШЕ. )))) теперь вот жду ответа)

Исходники на drive.google.com отсутствуют к сожалению

sublime text 3 подходит для таких задач или лучше VS использовать?

sublime text 3 лучше всего использовать для обычной HTML верстки. А для написания React приложений лучше, конечно, использовать VSCode или WebStorm главным образом из-за наличия в них встроенного терминала и массы других плюшек. Есть еще конечно такие редакторы как Brackets, Atom, но это уже кому что нравится

только установил Visual Studio, откуда extend появлися ,как его получить

@Стас Стариков Зайди в раздел «Расширения (Extensions )» и там через поиск найди подходящее тебе расширения для подсветки кода

код вообще не подсвечивается

@Vladilen Minin
Владилен, у вас закрался небольшой баг. В компоненте DetailRowView в поле textarea вы используете defaultValue, но после отрисовки компонента DetailRowView в поле textarea будет всегда отображать описание первого row по которому вы кликнули. При кликах по другим row все остальные данные корректно изменяются, но описание в поле textarea содержит данные самого первого row. В принципе такое поведение видно даже на видео 42:19 . Надеюсь не запутал своим объяснением.

Спасибо! Отличное видео!

CRM CollectorJS 2.3 / Страж инфобизнеса
Сайт: www.collectorjs.redacktor.ru
ВКонтакте: vk.com/club172853068

Пойду порешаю, спасибо за задание!)

Спасибо за видео! Очень круто получилось.

На работе, частенько приходится решать подобные задачи, в качестве фреймворка использую vue. Интересно посмотреть решение до конца с использованием реакта. Чтоб вторая часть не оказалась совсем грустной можно добавить подключение библиотек для графиков и организовать их вывод)

@Vladilen Minin сразу не вспомнил, вот большой шаг в сторону паттернов реакта “Vue 2.6 released!” by Evan You link.medium.com/gr1eDd9n2T . Возможно паттерн релиза 3шки будет отличить от reacta ещё сложнее. Абрамов === Еван)


@Rustem Ibragimov Благодарю, приятно!
Безусловно. Вообще процесс записи по сложности сильно отличается от обычного разговора, так что тут только опытом и временем буду улучшать свой скилл
По пагинации, точно стоит использовать компонент, если будет своя реализация, это будет минусом на собеседовании

@Vladilen Minin именно по этому, мне и интересны Ваши видео. У Вас лучший подход среди всех русскоговорящих которых я видел или читал. Хотя есть свои приколы), честно говоря ждал пагинацию на lodash)

@Rustem Ibragimov Есть большая вероятность, что я этому не подвержен, так как мне часто приходится объяснять студентам особенности фреймворков, и я сохраняю их специфику при разработке)

@Vladilen Minin это отличная идея.Хотя на практике сталкивался с тимлидами привыкшими к ангуляру в их исполнении VUE был естественно на TS и все компоненты были разнесены на 3 файла как и в ангуляре))), так же на github видел решения на vue, от перекатившихся с react, народ как привык все template из JS выдавать так и компоненты VUE делают. В общем все размывается.

Интересно на какую позицию рассчитано это задание, явно не для джуна.

@Vladilen Minin Целиком и полностью присоединяюсь к вышесказанному
.

@Junior front-end developer По опыту скажу, что в компаниях, где подобные условия начальство неэффективное, к сотрудникам относится некорректно и тд. Обычно, где меньше ресурсов и меньше компетенции требуют больше — парадокс, но правда.
Единственно, что из-за плохих условий и серьезных требований можно очень быстро вырасти как специалист, при полном погружении и потом уже идти на нормальную работу с полученными знаниями
У медали всегда 2 стороны

@Vladilen Minin Это называется рабские условия. Работать за еду. Порой работодатель не знает меры. Страшно подумать, что должен знать/уметь сеньор в этой компании?

Рахимбек Алтынбеков вообще это ужасные условия, как по мне
И задание сложное для таких денег, и денег очень мало для москвы

Решение задач на собеседование по React. Часть 2

Show player controls

  • Published on Feb 10, 2020
  • Подробнее о курсе «JavaScript. Полное руководство для современной веб-разработки»: webformyself.com/javascript/
    Исходники: drive.google.com/open? >Это видео является продолжением, где вы увидите, как закончить приложение на React.
    В этой части вы увидите, как реализовать пагинацию, как сделать возможность выбора пользователем количество загружаемых данных (32 или 1000 строк), как реализовать фильтрацию в таблице, используя отдельный компонент.
    Также вы узнаете, как на практике использовать нововведение в React, которое называется React Hooks. Вы увидите использование useState хука, для добавления функционала формы к «глупому» компоненту.

Comments • 29

проблемка есть в приложении, если нет результата поиска, то выдает ошибку построения таблицы

Добрый день) у них в кейсе написано что-то типо»мы ценим умение обоснованно использовать готовые решения, это будет плюсом» Дык почему бы допустим просто не использовать react-bootstrap-table, к примеру и не изобретать велосипед?) или это будет слишком читорно?)

Обработку ошибок забыли сделать 🙂
А так все отлично, спасибо!

Спасибо, респект за такие видео

Мда, еще грызть, грызть и грызть, что бы так же шарить��

Спасибо за видео! А почему ты не используешь такую запись 50 && > и не нужна тернарка.

Роман Копыстырынський, да, все фреймворки так работают

@Vladilen Minin Спасибо за ответ, интересно было твое мнение на этот счет. По поводу одного слушателя ты имеешь ввиду то что у нас один обработчик в parent?

@Роман Копыстырынський Так можно делать, вот только зачем? Есть такое понятие, как переоптимизация, раз. Два — читаемость кода сразу же падает существенно. Три — реакт и так уже быстрый, ему подобные кейзы не страшны. Четыре — закулисами там один слушатель у реакта, а как раз таки это и есть существенная разница, важно количество слушателей, а не созданных функций
Мог бы еще продолжить, но думаю идея ясна, почему так не стоит делать

@Vladilen Minin Ну да тут кто как больше любит, и тернарный оператор чуть более понятен.
И еще один момент хотел спросить, когда мы пишем dumb component, и внутри него делаем привязку данных с помощью bind или arrow function.
Например onClick= <() =>props.handleClick(‘id ‘)>
Может лучше задавать елементам data атрибуты и просто вызывать onClick и вытаскивать данные в паренте по аттрибуту т.к у нас на каждый render будет создаватся новая функция для этих обработчиков.

Роман Копыстырынський, да, можно и так, но я больше люблю тернарный оператор

Вечер добрый. В чем принципиальное отличие нового курса по JavaScript от предыдущего курса. Понял, что код будет набираться в новом курсе в Visual Studio? Случайно нет в планах выпуск курса программирования на будущее по какому-либо классическому языку программирования, например на С++?

@Серж Пятигорцев Алутьев Не будет курс сильно дороже остальных наших курсов. Где-то в том же ценовом диапазоне. Главное в релиз со скидкой успейте купить.

Постараюсь новый курс JavaScript приобрести, но последние ценовые тенденции мною замеченные говорят, что стали дороже и сейчас в поиске требуемой суммы, спасибо за ответ.

Здравствуйте! Планируем Python рассмотреть.

В случае с подкюченным Lodash возможно проще сделать пагинацию на Lodash)))->
import lodash from ‘lodash’

export default <
data() <
return <
data: [ <
«id»: 1,
«first_name»: «george»,
«last_name»: «bluth»,
«avatar»: «s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg»
>,
<
«id»: 2,
«first_name»: «lucille»,
«last_name»: «bluth»,
«avatar»: «s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg»
>,
<
«id»: 3,
«first_name»: «oscar»,
«last_name»: «bluth»,
«avatar»: «s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg»
>,
<
«id»: 4,
«first_name»: «eve»,
«last_name»: «holt»,
«avatar»: «s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg»
>,
<
«id»: 5,
«first_name»: «gob»,
«last_name»: «bluth»,
«avatar»: «s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg»
>,
<
«id»: 6,
«first_name»: «tracey»,
«last_name»: «bluth»,
«avatar»: «s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg»
>,
<
«id»: 7,
«first_name»: «michael»,
«last_name»: «bluth»,
«avatar»: «s3.amazonaws.com/uifaces/faces/twitter/follettkyle/128.jpg»
>,
<
«id»: 8,
«first_name»: «lindsay»,
«last_name»: «bluth»,
«avatar»: «s3.amazonaws.com/uifaces/faces/twitter/araa3185/128.jpg»
>,
<
«id»: 9,
«first_name»: «tobias»,
«last_name»: «funke»,
«avatar»: «s3.amazonaws.com/uifaces/faces/twitter/vivekprvr/128.jpg»
>,
<
«id»: 10,
«first_name»: «byron»,
«last_name»: «bluth»,
«avatar»: «s3.amazonaws.com/uifaces/faces/twitter/russoedu/128.jpg»
>,
<
«id»: 11,
«first_name»: «george michael»,
«last_name»: «bluth»,
«avatar»: «s3.amazonaws.com/uifaces/faces/twitter/mrmoiree/128.jpg»
>,
<
«id»: 12,
«first_name»: «maeby»,
«last_name»: «funke»,
«avatar»: «s3.amazonaws.com/uifaces/faces/twitter/hebertialmeida/128.jpg»
>
],
perPage: 3,
pagination: <>,

>
>,
components: <
‘lodash’: lodash
>,
computed: <
collections() <
return this.paginate(this.data);
>
>,
methods: <
setPage(p) <
this.pagination = this.paginator(this.data.length, p)
>,
paginate(data) <
return lodash.slice(data, this.pagination.startIndex, this.pagination.endIndex + 1)

>,
paginator(totalItems, currentPage) <
var startIndex = (currentPage — 1) * this.perPage,
endIndex = Math.min(startIndex + this.perPage — 1, totalItems — 1);

return <
curentPage: this.curentPage,
startIndex: startIndex,
endIndex: endIndex,
pages: lodash.range(1, Math.ceil(totalItems / this.perPage) + 1)
>
>,
getPaginatedItems(items, page) <
var page = page || 1,
per_page = 3,
offset = (page — 1) * per_page,
paginatedItems = _.rest(items, offset).slice(0, per_page);
return <
page: page,
per_page: per_page,
total: items.length,
total_pages: Math.ceil(items.length / per_page),
data: paginatedItems
>
>

Спасибо, было интересно. Я так понимаю это для Джуна задание.

Решение задач на собеседование по React

Смотреть видео Решение задач на собеседование по React на ВМире бесплатно

192 | 2
WebForMySelf | 9 мес.

Подробнее о курсе «JavaScript. Полное руководство для современной веб-разработки»: https://webformyself.com/javascript/

Исходники: https://drive.google.com/open? >
В этом видео вы увидите, как решать задачи на собеседование, используя технологию React js.

В результате данного ролика вы увидите реализацию приложения, которое будет загружать асинхронно данные с сервера, выводить их в таблицу, показывать индикатор загрузки данных с сервера и т.д.

После этого, вы увидите, как реализовать динамическую сортировку данных в таблице и обрабатывать выделение отдельной строки в таблице с выводом ее детального отображения.

Решение задач на собеседование по React. Часть 2

إظهار عناصر التحكم بالمشغّل

  • تم نشره في 2020/02/10
  • Подробнее о курсе «JavaScript. Полное руководство для современной веб-разработки»: webformyself.com/javascript/
    Исходники: drive.google.com/open? >Это видео является продолжением, где вы увидите, как закончить приложение на React.
    В этой части вы увидите, как реализовать пагинацию, как сделать возможность выбора пользователем количество загружаемых данных (32 или 1000 строк), как реализовать фильтрацию в таблице, используя отдельный компонент.
    Также вы узнаете, как на практике использовать нововведение в React, которое называется React Hooks. Вы увидите использование useState хука, для добавления функционала формы к «глупому» компоненту.

تعليقات • 29

проблемка есть в приложении, если нет результата поиска, то выдает ошибку построения таблицы

Добрый день) у них в кейсе написано что-то типо»мы ценим умение обоснованно использовать готовые решения, это будет плюсом» Дык почему бы допустим просто не использовать react-bootstrap-table, к примеру и не изобретать велосипед?) или это будет слишком читорно?)

Обработку ошибок забыли сделать 🙂
А так все отлично, спасибо!

Спасибо, респект за такие видео

Мда, еще грызть, грызть и грызть, что бы так же шарить��

Спасибо за видео! А почему ты не используешь такую запись 50 && > и не нужна тернарка.

Роман Копыстырынський, да, все фреймворки так работают

@Vladilen Minin Спасибо за ответ, интересно было твое мнение на этот счет. По поводу одного слушателя ты имеешь ввиду то что у нас один обработчик в parent?

@Роман Копыстырынський Так можно делать, вот только зачем? Есть такое понятие, как переоптимизация, раз. Два — читаемость кода сразу же падает существенно. Три — реакт и так уже быстрый, ему подобные кейзы не страшны. Четыре — закулисами там один слушатель у реакта, а как раз таки это и есть существенная разница, важно количество слушателей, а не созданных функций
Мог бы еще продолжить, но думаю идея ясна, почему так не стоит делать

@Vladilen Minin Ну да тут кто как больше любит, и тернарный оператор чуть более понятен.
И еще один момент хотел спросить, когда мы пишем dumb component, и внутри него делаем привязку данных с помощью bind или arrow function.
Например onClick= <() =>props.handleClick(‘id ‘)>
Может лучше задавать елементам data атрибуты и просто вызывать onClick и вытаскивать данные в паренте по аттрибуту т.к у нас на каждый render будет создаватся новая функция для этих обработчиков.

Роман Копыстырынський, да, можно и так, но я больше люблю тернарный оператор

Вечер добрый. В чем принципиальное отличие нового курса по JavaScript от предыдущего курса. Понял, что код будет набираться в новом курсе в Visual Studio? Случайно нет в планах выпуск курса программирования на будущее по какому-либо классическому языку программирования, например на С++?

@Серж Пятигорцев Алутьев Не будет курс сильно дороже остальных наших курсов. Где-то в том же ценовом диапазоне. Главное в релиз со скидкой успейте купить.

Постараюсь новый курс JavaScript приобрести, но последние ценовые тенденции мною замеченные говорят, что стали дороже и сейчас в поиске требуемой суммы, спасибо за ответ.

Здравствуйте! Планируем Python рассмотреть.

В случае с подкюченным Lodash возможно проще сделать пагинацию на Lodash)))->
import lodash from ‘lodash’

export default <
data() <
return <
data: [ <
«id»: 1,
«first_name»: «george»,
«last_name»: «bluth»,
«avatar»: «s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg»
>,
<
«id»: 2,
«first_name»: «lucille»,
«last_name»: «bluth»,
«avatar»: «s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg»
>,
<
«id»: 3,
«first_name»: «oscar»,
«last_name»: «bluth»,
«avatar»: «s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg»
>,
<
«id»: 4,
«first_name»: «eve»,
«last_name»: «holt»,
«avatar»: «s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg»
>,
<
«id»: 5,
«first_name»: «gob»,
«last_name»: «bluth»,
«avatar»: «s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg»
>,
<
«id»: 6,
«first_name»: «tracey»,
«last_name»: «bluth»,
«avatar»: «s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg»
>,
<
«id»: 7,
«first_name»: «michael»,
«last_name»: «bluth»,
«avatar»: «s3.amazonaws.com/uifaces/faces/twitter/follettkyle/128.jpg»
>,
<
«id»: 8,
«first_name»: «lindsay»,
«last_name»: «bluth»,
«avatar»: «s3.amazonaws.com/uifaces/faces/twitter/araa3185/128.jpg»
>,
<
«id»: 9,
«first_name»: «tobias»,
«last_name»: «funke»,
«avatar»: «s3.amazonaws.com/uifaces/faces/twitter/vivekprvr/128.jpg»
>,
<
«id»: 10,
«first_name»: «byron»,
«last_name»: «bluth»,
«avatar»: «s3.amazonaws.com/uifaces/faces/twitter/russoedu/128.jpg»
>,
<
«id»: 11,
«first_name»: «george michael»,
«last_name»: «bluth»,
«avatar»: «s3.amazonaws.com/uifaces/faces/twitter/mrmoiree/128.jpg»
>,
<
«id»: 12,
«first_name»: «maeby»,
«last_name»: «funke»,
«avatar»: «s3.amazonaws.com/uifaces/faces/twitter/hebertialmeida/128.jpg»
>
],
perPage: 3,
pagination: <>,

>
>,
components: <
‘lodash’: lodash
>,
computed: <
collections() <
return this.paginate(this.data);
>
>,
methods: <
setPage(p) <
this.pagination = this.paginator(this.data.length, p)
>,
paginate(data) <
return lodash.slice(data, this.pagination.startIndex, this.pagination.endIndex + 1)

>,
paginator(totalItems, currentPage) <
var startIndex = (currentPage — 1) * this.perPage,
endIndex = Math.min(startIndex + this.perPage — 1, totalItems — 1);

return <
curentPage: this.curentPage,
startIndex: startIndex,
endIndex: endIndex,
pages: lodash.range(1, Math.ceil(totalItems / this.perPage) + 1)
>
>,
getPaginatedItems(items, page) <
var page = page || 1,
per_page = 3,
offset = (page — 1) * per_page,
paginatedItems = _.rest(items, offset).slice(0, per_page);
return <
page: page,
per_page: per_page,
total: items.length,
total_pages: Math.ceil(items.length / per_page),
data: paginatedItems
>
>

Спасибо, было интересно. Я так понимаю это для Джуна задание.

Решение задач на собеседование по React

Kích thước video:

Hiển thị các điều khiển trình phát

  • Xuất bản 09 Th02, 2020
  • Подробнее о курсе «JavaScript. Полное руководство для современной веб-разработки»: webformyself.com/javascript/
    Исходники: drive.google.com/open? >В этом видео вы увидите, как решать задачи на собеседование, используя технологию React js.
    В результате данного ролика вы увидите реализацию приложения, которое будет загружать асинхронно данные с сервера, выводить их в таблицу, показывать индикатор загрузки данных с сервера и т.д.
    После этого, вы увидите, как реализовать динамическую сортировку данных в таблице и обрабатывать выделение отдельной строки в таблице с выводом ее детального отображения.

NHẬN XÉT • 43

круто! спасибо. после просмотра, отрефакторил своё тестовое задание, стало реально ЛУЧШЕ. )))) теперь вот жду ответа)

Исходники на drive.google.com отсутствуют к сожалению

sublime text 3 подходит для таких задач или лучше VS использовать?

sublime text 3 лучше всего использовать для обычной HTML верстки. А для написания React приложений лучше, конечно, использовать VSCode или WebStorm главным образом из-за наличия в них встроенного терминала и массы других плюшек. Есть еще конечно такие редакторы как Brackets, Atom, но это уже кому что нравится

только установил Visual Studio, откуда extend появлися ,как его получить

@Стас Стариков Зайди в раздел «Расширения (Extensions )» и там через поиск найди подходящее тебе расширения для подсветки кода

код вообще не подсвечивается

@Vladilen Minin
Владилен, у вас закрался небольшой баг. В компоненте DetailRowView в поле textarea вы используете defaultValue, но после отрисовки компонента DetailRowView в поле textarea будет всегда отображать описание первого row по которому вы кликнули. При кликах по другим row все остальные данные корректно изменяются, но описание в поле textarea содержит данные самого первого row. В принципе такое поведение видно даже на видео 42:19 . Надеюсь не запутал своим объяснением.

Спасибо! Отличное видео!

CRM CollectorJS 2.3 / Страж инфобизнеса
Сайт: www.collectorjs.redacktor.ru
ВКонтакте: vk.com/club172853068

Пойду порешаю, спасибо за задание!)

Спасибо за видео! Очень круто получилось.

На работе, частенько приходится решать подобные задачи, в качестве фреймворка использую vue. Интересно посмотреть решение до конца с использованием реакта. Чтоб вторая часть не оказалась совсем грустной можно добавить подключение библиотек для графиков и организовать их вывод)

@Vladilen Minin сразу не вспомнил, вот большой шаг в сторону паттернов реакта “Vue 2.6 released!” by Evan You link.medium.com/gr1eDd9n2T . Возможно паттерн релиза 3шки будет отличить от reacta ещё сложнее. Абрамов === Еван)

@Rustem Ibragimov Благодарю, приятно!
Безусловно. Вообще процесс записи по сложности сильно отличается от обычного разговора, так что тут только опытом и временем буду улучшать свой скилл
По пагинации, точно стоит использовать компонент, если будет своя реализация, это будет минусом на собеседовании

@Vladilen Minin именно по этому, мне и интересны Ваши видео. У Вас лучший подход среди всех русскоговорящих которых я видел или читал. Хотя есть свои приколы), честно говоря ждал пагинацию на lodash)

@Rustem Ibragimov Есть большая вероятность, что я этому не подвержен, так как мне часто приходится объяснять студентам особенности фреймворков, и я сохраняю их специфику при разработке)

@Vladilen Minin это отличная идея.Хотя на практике сталкивался с тимлидами привыкшими к ангуляру в их исполнении VUE был естественно на TS и все компоненты были разнесены на 3 файла как и в ангуляре))), так же на github видел решения на vue, от перекатившихся с react, народ как привык все template из JS выдавать так и компоненты VUE делают. В общем все размывается.

Интересно на какую позицию рассчитано это задание, явно не для джуна.

@Vladilen Minin Целиком и полностью присоединяюсь к вышесказанному
.

@Junior front-end developer По опыту скажу, что в компаниях, где подобные условия начальство неэффективное, к сотрудникам относится некорректно и тд. Обычно, где меньше ресурсов и меньше компетенции требуют больше — парадокс, но правда.
Единственно, что из-за плохих условий и серьезных требований можно очень быстро вырасти как специалист, при полном погружении и потом уже идти на нормальную работу с полученными знаниями
У медали всегда 2 стороны

@Vladilen Minin Это называется рабские условия. Работать за еду. Порой работодатель не знает меры. Страшно подумать, что должен знать/уметь сеньор в этой компании?

Рахимбек Алтынбеков вообще это ужасные условия, как по мне
И задание сложное для таких денег, и денег очень мало для москвы

Решение задач на собеседование по React

प्लेयर नियंत्रण दिखाएं

  • 9/02/2020 को प्रकाशित
  • Подробнее о курсе «JavaScript. Полное руководство для современной веб-разработки»: webformyself.com/javascript/
    Исходники: drive.google.com/open? >В этом видео вы увидите, как решать задачи на собеседование, используя технологию React js.
    В результате данного ролика вы увидите реализацию приложения, которое будет загружать асинхронно данные с сервера, выводить их в таблицу, показывать индикатор загрузки данных с сервера и т.д.
    После этого, вы увидите, как реализовать динамическую сортировку данных в таблице и обрабатывать выделение отдельной строки в таблице с выводом ее детального отображения.

टिप्पणियाँ • 43

круто! спасибо. после просмотра, отрефакторил своё тестовое задание, стало реально ЛУЧШЕ. )))) теперь вот жду ответа)

Исходники на drive.google.com отсутствуют к сожалению

sublime text 3 подходит для таких задач или лучше VS использовать?

sublime text 3 лучше всего использовать для обычной HTML верстки. А для написания React приложений лучше, конечно, использовать VSCode или WebStorm главным образом из-за наличия в них встроенного терминала и массы других плюшек. Есть еще конечно такие редакторы как Brackets, Atom, но это уже кому что нравится

только установил Visual Studio, откуда extend появлися ,как его получить

@Стас Стариков Зайди в раздел «Расширения (Extensions )» и там через поиск найди подходящее тебе расширения для подсветки кода

код вообще не подсвечивается

@Vladilen Minin
Владилен, у вас закрался небольшой баг. В компоненте DetailRowView в поле textarea вы используете defaultValue, но после отрисовки компонента DetailRowView в поле textarea будет всегда отображать описание первого row по которому вы кликнули. При кликах по другим row все остальные данные корректно изменяются, но описание в поле textarea содержит данные самого первого row. В принципе такое поведение видно даже на видео 42:19 . Надеюсь не запутал своим объяснением.

Спасибо! Отличное видео!

CRM CollectorJS 2.3 / Страж инфобизнеса
Сайт: www.collectorjs.redacktor.ru
ВКонтакте: vk.com/club172853068

Пойду порешаю, спасибо за задание!)

Спасибо за видео! Очень круто получилось.

На работе, частенько приходится решать подобные задачи, в качестве фреймворка использую vue. Интересно посмотреть решение до конца с использованием реакта. Чтоб вторая часть не оказалась совсем грустной можно добавить подключение библиотек для графиков и организовать их вывод)

@Vladilen Minin сразу не вспомнил, вот большой шаг в сторону паттернов реакта “Vue 2.6 released!” by Evan You link.medium.com/gr1eDd9n2T . Возможно паттерн релиза 3шки будет отличить от reacta ещё сложнее. Абрамов === Еван)

@Rustem Ibragimov Благодарю, приятно!
Безусловно. Вообще процесс записи по сложности сильно отличается от обычного разговора, так что тут только опытом и временем буду улучшать свой скилл
По пагинации, точно стоит использовать компонент, если будет своя реализация, это будет минусом на собеседовании

@Vladilen Minin именно по этому, мне и интересны Ваши видео. У Вас лучший подход среди всех русскоговорящих которых я видел или читал. Хотя есть свои приколы), честно говоря ждал пагинацию на lodash)

@Rustem Ibragimov Есть большая вероятность, что я этому не подвержен, так как мне часто приходится объяснять студентам особенности фреймворков, и я сохраняю их специфику при разработке)

@Vladilen Minin это отличная идея.Хотя на практике сталкивался с тимлидами привыкшими к ангуляру в их исполнении VUE был естественно на TS и все компоненты были разнесены на 3 файла как и в ангуляре))), так же на github видел решения на vue, от перекатившихся с react, народ как привык все template из JS выдавать так и компоненты VUE делают. В общем все размывается.

Интересно на какую позицию рассчитано это задание, явно не для джуна.

@Vladilen Minin Целиком и полностью присоединяюсь к вышесказанному
.

@Junior front-end developer По опыту скажу, что в компаниях, где подобные условия начальство неэффективное, к сотрудникам относится некорректно и тд. Обычно, где меньше ресурсов и меньше компетенции требуют больше — парадокс, но правда.
Единственно, что из-за плохих условий и серьезных требований можно очень быстро вырасти как специалист, при полном погружении и потом уже идти на нормальную работу с полученными знаниями
У медали всегда 2 стороны

@Vladilen Minin Это называется рабские условия. Работать за еду. Порой работодатель не знает меры. Страшно подумать, что должен знать/уметь сеньор в этой компании?

Рахимбек Алтынбеков вообще это ужасные условия, как по мне
И задание сложное для таких денег, и денег очень мало для москвы

Топ-пост этого месяца:  Как связать посты из двух произвольных типов записи
Добавить комментарий