masambrero

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

не включая основы js

Извините, но стандартная задача, про "напишите функуцию 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 вообще это работает?". Например:

let obj1 { name: 'Test', age: 100 }
let obj2 = obj1
obj2.name = 'Test_new'

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

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

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

p.s. возможно дополню...
p.p.s. звездочкой отметил, на мой взгляд не самые необходимые для junior-собеседования вопросы.

Общие косяки:

1) Дублировать props в state - моветон. Используйте defaultValue на инпутах.
2) Строковые рефы - моветон. И вообще, тут рефы не нужны - по изменению инпута нужно отдавать значение родителю через коллбэк, принятый в props

По данному примеру

1) Greeter в методе render не передает нужные props дочерним компонентам
2) Внутри компонента формы храните состояние и передавайте его в props.onSubmit

Небольшой оффтоп

Вместо привязки контекста функции в конструкторе можно писать так:

class Foo {
  onSubmit = (event) => {
    // "this" is correct instance
  };
}

position: relative; для .test1 укажите. Без этого зеленый прямоугольник цепляется к body.

www.w3schools.com/cssref/pr_pos_top.asp

For absolutely positioned elements, the top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor. Note: If an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. Note: A "positioned" element is one whose position is anything except static.

Tip: A positioned element is an element with the position property set to: relative, absolute, or fixed.

У вас 0.1 секунда задана, какая она ещё может быть...

transition: 1s linear

for (var i = 0; i < 10; i++) {
  setTimeout((function (i) {
    console.log(i); // ?
  })(i), 0);

Это делается с помощью multi-gradient:

background-image: -webkit-linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.1) 50%, transparent 52%), -webkit-linear-gradient(135deg, transparent 48%, rgba(255, 255, 255, 0.1) 50%, transparent 52%), url("../images/Wallpapers 1600x900.jpg");
    background-image: linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.1) 50%, transparent 52%), linear-gradient(-45deg, transparent 48%, rgba(255, 255, 255, 0.1) 50%, transparent 52%), url("../images/Wallpapers 1600x900.jpg");
    background-size: 2em 2em,
                     2em 2em,
                     100% 100%;

Вот здесь можно про это прочесть:
https://htmlacademy.ru/demos/8#step1

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

1. Разметка:
   
   • пишу всегда вручную;
     
   • длинные селекты тянутся из базы посредством шаблонизатора (например серверного TWIG);
     
   • прописываю полностью с атрибутами валидации HTML5 (благо все современные браузеры потдерживают);
     
   • выдумывать JS-велосипеды для валидации не стоит уже давно;
     
   • для зависимых полей пока есть простой js-клаcс сверяющий их.
     
   • drag&drop файлов давно уже работает без JS;
     
   • для подгрузки изображений в страницу на стороне клиента js-класс.
     
   
   
2. Стили:
   
   • один раз прописаны стили для разных-форм на уровне тегов и взаимоотношений тегов (в итоге все формы на сайте виглядят в одном стиле);
     
   • класы только для самой формы, определяет как одна выводится: локально, модально или в теле контента;
     
   • кому сложно написать 300 строчек CSS, пользуйтесь фреймворками;
     
   • ни в коем случае не делайте стили форм для каждого раза как онные встречаются (придет дядя даст по рукам :) ).
     
   
   
3. Отправка:
   
   • пользуйтесь action, submit и target;
     
   • нужны данные как модальное окно есть iframe;
     
   • ajax с формами не использую он изначально предназначен для другого:
     
     • для подгрузки полей в селектор, но только если селектор очень большой;
       
     • для поиска налету.
       
     
     
   
   
4. Сервер:
   
   • использую специальный статический класс, который делает валидацию и XSS/injection-очистку;
     
   • как минимум PDO с подготовленными запросами;
     
   • Doctrine;
     
   
   
5. База-данных:
   
   • наименования полей в базе соответствуют наименованиям полей в формах (с префиксом);
     
   
   

Куча свг, анимация которых привязана к текущему "прогрессу" (скроллу страницы). Такое например можно замутить с помощью GSAP Timeline, создаете таймлайн, запихиваете вагон всех возможных анимаций, грамотно расставленных на определенных этапах и потом меняете прогресс таймлайна относительно отношения позиции скролла к общей высоте скролла.

Могу с уверенностью сказать что на создание этого сайта ушло много слез разработчиков и дизайнеров.