Aleksandr

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-собеседования вопросы.

Для тестового задания надо что-нибудь посложней. Простенький real world app.

Например простенький Weather App:
1. Строка поиска городов(можно использовать например API Google):
2. Результат поиска с погодой.
3. Список сохраненных городов.
4. Погода в текущей позиции.
Для погоды можно использовать API любого сервиса(например OWM API).
Такое приложение спроектировать сложней, тут помимо тупой работы с API библиотек придется проектировать.
Можно использовать роутинг, а можно обойтись и без него. Да и целый ряд задач, над решением которых новичку придется хорошо подумать:
1. Структура приложения
2. Работа с API
3. Реализация строки поиска
4. Обработка исключений( нет связи, отклонили использование геолокации)
5. Верстка
Когда такой проект начнет оживать и работать как задумано это, конечно, принесет человеку радость и уверенность в себе.

Так же можно реализовать Dashboard, но это посложней и требует серверной части или использование публичного тестового API вроде Star Wars API
Еще можно реализовать простенький клиент для любого сервиса. Например поиски и проигрывание видео c Youtube.

ИМХО совсем простые задачи, конечно могут показать знание API той или иной библиотеки, но обладает ли кандидат навыками необходимыми для Junior Developer они не отразят. А Junior Developer должен уметь самостоятельно решить точно поставленную задачу с пояснениями и рекомендациями по пути ее решения.

npm install rimraf -g
rimraf node_modules

Мне нравится подход Relay для пагинации. Собственно толком ничем не отличается и от других условий выборки, примерно так:

query {
	users(first: 10, order: "id") {
		totalCount,
		edges {
			cursor,
			node {
				id,
				name,
				lastAt,
				avatar {
					original,
					preview
				}
			}
		},
		pageInfo {
			startCursor,
			endCursor,

			hasNextPage,
			hasPreviousPage
		}
	}
}

В этом примере получаем первые 10 записей с сортировкой по id. PageInfo хранит в себе информацию есть ли следующая/предыдущая страница и курсоры которые которые передаются в параметры before или after.

У вас в коде прописана привязка к тому, какой период выбран. Когда вы меняете через календарь дату в одном из полей, вторая дата автоматически пересчитывается согласно выбранному периоду.
Когда вы ставите в первое поле дату допустим 27 апр 2018 то конечная дата пересчитается вашим кодом

this.dateEnd = moment(value).add(1, this.selectedPeriod).toDate()

за сегодня прибавится 1 день к начальной дате, это и будет значение конечной 28 апр 2018
за неделю прибавится 1 неделя - конечная дата 4 мая 2018
за месяц - 1 месяц - конечная дата 27 мая 2018

В таком случае не очень понятно в чем проблема

У computed свойств можно делать (а вам в данной ситуации и нужно) и сеттеры:

dateStart: {
  get() {
    return moment().subtract(1, this.selectedPeriod).toDate();
  },
  set(value) {
    // ну, тут вам виднее, какой должен код быть
  },
},

var today = new Date() --- вот тебе сегодняшняя дата

today.getTime() --- вернёт значение даты в милисекундах

Дату новости аналогично приводишь к милисекундам

Сравниваешь как обычные числа

Вы можете воспользоваться библиотекой Moment.js. Тогда расчет искомых дат будет происходить примерно следующим образом:

moment().subtract(1, 'month').toDate() // -1 месяц
moment().subtract(1, 'week').toDate()
moment().subtract(1, 'day').toDate()

Нативными средствами можно рассчитать следующим образом:

const sub1month = new Date();
sub1month.setMonth(sub1month.getMonth() - 1);
sub1month // -1 месяц

const sub1week = new Date();
sub1week.setDate(sub1week.getDate() - 7);
sub1week // -1 неделя

const sub1day = new Date();
sub1day.setDate(sub1day.getDate() - 1);
sub1day // -1 день

Обратите внимание что методы setDate и setMonth являются мутабельными, и возвращают таймштамп.

https://ru.vuejs.org/v2/guide/transitions.html

Может не стоит переносить его никуда, а просто выбросить целиком, а анимацию вынести в css?
https://jsfiddle.net/vy2ad2om/

Да лучше перепиши на Vue. Я этот jq пытался подключить со vue и сотни костылей поймал

А с чего вы взяли, что emit не работает, чем докажете свои слова?

Я так думаю - всё работает, просто вы забыли о всплытии событий. Вы кликаете на .news-popup__content__close, генерируется событие click, оно обрабатывается - выполняется emit, генерируется событие close, оно обрабатывается в соответствующем обработчике, popup убирается. При этом событие click никуда не делось, оно всплывает, и в .news-block обрабатывается ещё раз - только что удалённый popup снова рендерится. Ну а внешне это всё выглядит так, будто ничего и не произошло.

Что делать? Понятно что - останавливать всплытие, т.е.,

<div class="news-popup__content__close" @click="$emit('close')"></div>

замените на

<div class="news-popup__content__close" @click.stop="$emit('close')"></div>

P.S. А почему на каждый элемент .news-block у вас отдельный popup, что за дичь-то такая?

{
    xtype: 'triggerfield',
    listeners: {
        change: function(newVal, oldVal, field) {
            console.log('new value', newVal);
            console.log('old value', oldVal);
            console.log('field', field);
        } 
    }
}

Тип такого?

No 'Access-Control-Allow-Origin' header is present on the requested resource.

Запрещены кроссдоменные запросы на ресурсе. На ресурсе должен быть установлен заголовок Access-Control-Allow-Origin: *

No 'Access-Control-Allow-Origin' header is present on the requested resource.

Ошибка кросс-доменного запроса. Браузер увидел в ответе заголовок Access-Control-Allow-Origin и выдал ошибку.
Делайте запрос через свой бэкенд.