Jura Semenenko

filterElements = (elements, filter) => {
        return elements  = elements.filter((el) => {
            return el.charAt(0).toLowerCase() === filter.trim().toLowerCase();
        });
    }

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

filterElements = (elements, filter) => {
        return elements  = elements.filter((el) => {
            return el.toLowerCase().startsWith(filter.trim().toLowerCase());
        });
    }

если нужна поддержка ie<12, то вместо startsWith пишите indexOf(filter.trim().toLowerCase()) === 0

Что значит "не промисы, а async/await"? - async/await это тоже промисы.

Используйте await Promise.all, например:

const result = await Promise.all([ 1, 2, 3 ].map((n, i) => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(`timeout #${i}`);
      resolve(n * 10);
    }, Math.random() * 3000 | 0);
  });
}));

console.log('result:', result);

Надо переписать объект sms

someFunction = () => {
      const {sms} = this.state;
      sms.disabled = true;
      this.setState({sms});
}

Таким образом вы обновите поле disabled в sms
--------
Или еще так

someFunction = () => {
      this.setState({sms: {...this.state.sms, disabled: true}});
}

--------
еще так можно

someFunction = () => {
      this.setState(prevState=>({sms: {...prevState.sms, disabled: true}}));
}

Последний вариант самый устойчивый к коллизиям, связанным с изменением стейта в других места программы

Потому что вы удаляете элементы из перебираемого массива.
Например:
Массив [a, b, c, d]
Цикл 0: (i==0) удалить element[a], удалить a. В итоге массив [b, c, d]. Увеличить i на 1.
Цикл 1: (i==1) i указывает на c. Удалить element[c], удалить c. В итоге массив [b, d]. i++
Цикл 2: не выполняется, т.к. i >= length
Итог: b и d мы просто пропустили.

вот авторизация из живого проекта

const logInWithLoagInAndPassword = (login, password, organization, rememberMe) => {
    return dispatch => {
        return fetch(BASE_URL + '?username=' + login + '&password=' + password + '&customer=' + organization + '&remember=' + remember + '&login=Inloggen&ajax=1', {
            method: 'GET',
            headers: {
                "Access-Control-Allow-Origin": "*"
            }
        }).then(response => {
            return response.json();
        }).then(json => {
                if (rememberMe) {
                    localStorage.setItem('sessionid', json.sessionid)
                    localStorage.setItem('auth', JSON.stringify(json))
                } else {
                    //clear localstorage
                }
                dispatch({type: AUTH_SUCCESS, payload: json})
            }
        )


            .catch(error => {
                console.error('error', error)
                dispatch({type: AUTH_ERROR, payload: error})
            });
    }
}

как видите мы после авторизации получаем ответ от сервера в котором есть id сессии который мы и ложим в  localstorage. Дальше при переходе человека на этот же сайт стоит проверка если есть в localstorage id сессии кидаем его на главную если нет то на авторизацию.

Простой способ, который приходит на ум это хранение в localstorage данных типа:
- isAuth: true/false

Так делать не надо, потому что злоумышленик может поставить этот флаг по своему усмотрению (хоть в данном случае это ему ничего и не даст).

а так же уникальный id, который отдает Firebase:
uid: NcefVvDqfHXqrj0IlvzfmLb2

Можно хранить в localstorage только уникальный id и по нему "дергать" информацию. Если id валидный - отдавать контент. Если идентификатор не валидный, отправлять {'status':'unathorized'} и отправлять логинится.

А лучше конечно использовать JWT.

Хороший кандидат на должность Junior React Developer, по моему мнению, должен соответствовать следующему перечню требований:
1. Хорошее знание JavaScript. В React разработке используется ES6 и большинство экспериментальных фич еще не вошедших в стандарт.
2. Хорошее знание HTML и CSS. Кроссбраузерная верстка. Так же, хорошо иметь представление о том, что такое css-in-js.
3. Web APIs. Умение работать с объектной моделью документа(DOM) и все эти XMLHttpRequest, localstorage, cookie, history и прочее.
4. Хорошее знание API React. Вы должны хорошо знать React, знать его возможности, понимать основные концепции и уметь ответить на большинство типовых вопросов. Для этого достаточно хорошо изучить документацию, разобрать пару типовых проектов на github и попрактиковаться. Много полезной информации, приёмов и идей можно подчерпнуть из тематических статей и докладов. Так же, на просторах интернета можно найти подборки типовых вопросов, часто задаваемых на собеседованиях. В англоязычном сегменте их больше.
5. Redux. Уверенное знание API. API библиотеки до боли пост. Знать, что такое промежуточное ПО и зачем оно. Понимать базовые концепции архитектуры Flux. Все это есть в документации и многочисленных курсах.
6. Умение работать с менеджером пакетов npm на базовом уровне.
7. Node.js. Хотя бы уметь написать простейший express/koa сервер, который будет отдавать ваше приложение и статику.
8. Webpack. Базовые знания.
9. Умение работать с git. Хотя бы знать и уметь примерять команды: init, clone, add, commit, push, pull, merge, checkout.
10. Иммутабельность. Четкое понимание зачем это надо. Знание приемов иммутабельного изменения структур данных. Это есть в официальном туториале React.
11. Статическая типизация TypeScrpt/Flow. Для начала хватит самых основ и способности понимать чужой код.
12. Функциональное программирование. Хватит знаний полученных в процессе изучения JavaScript, а так же не помешает знать, что такое каррирование, чистые функции и рекурсия.
13. Базовые концепции ООП. Хватит знаний полученных в рамках изучения JavaScript.
14. Асинхронный код. Понимать как его правильно организовывать. Promise, async/await.
15. Сетевые протоколы передачи данных. Вполне хватит базовых знаний о http/https, о том, что такое заголовки и какие они бывают. Хорошо знать о том, что такое websocket.
16. За плечами должен быть хотя бы один учебный проект на React. Хватит типового тестового задания.
Примеры таких заданий: 1, 2, 3(сайт может быть не доступен на территории РФ, советую отрыть через VPN и посмотреть), 4, 5. Если подобного проекта у вас нет, то будьте готовы, что потенциальный работодатель предложит вам выполнить тестовое задание и только по его результату вас, может быть, пригласят на техническое интервью. Если напишите хорошо, вас скорей всего пригласят.
17. Желателен опыт создания типовых UI элементов. Например, чтобы не вызывало трудностей написать простой кастомный чекбокс. Куча примеров реализаций типовых элементов есть на codepen.

Это не красный минимум знаний и во многих компаниях требования могут быть значительно ниже. Но соответствие вышеперечисленым пунктам будет хорошим аргументом для работодателя остановить свой выбор именно на вашей кандидатуре.

Похожий вопрос.

Вы в компоненте при вызове самого себя не передаете комментарий. Еще бы хорошо сделать так, чтобы вызов Comment происходил только при наличии комментариев. Да и в комменте вы один раз вызываете Comment, а не список комментов.
Я бы сделал так. Создал компонент CommentList, в нем сделал вызов текущих комментов Comment в цикле. И в компоненте Comment сделал проверку на наличие комментов, если они есть, вызывал бы CommentList (передавая ему список комментов), тот в свое время опять циклом пройдет по комментам и вызовет компонент Comment, и.т.д.

Потому что явно не задана высота.

Хотите задачку? Ловите.

Сделать на JS светофор основной (3 цвета) и связанный пешеходный (2 цвета) с кнопкой по запросу пешеходного перехода:
1) основной включен на зеленый, пешеходный на красный
2) по нажатию на запрос, через не менее чем 5 секунд на 5 секунд показывается желтый на основном, затем основной - красный, пешеходный зеленый на 15 секунд. После пешеходный на красный, основной сразу на зеленый.
3) минимальное время зеленого на основном - 60 секунд. Если кнопка запроса перехода нажата ранее 60 секунд с момента включения зеленого - пункт 2 срабатывает через 60 секунд с момента включения зеленого.
4) после нажатия запроса и до включения зеленого на основном светофоре, кнопка запроса игнорируется.

Часть задачи - сделать отображение светофоров, и кнопку. Кнопка всегда доступна к нажатию (не ставим атрибут disabled). Другая часть - реализовать асинхронную логику. По возможности на чистом JS (не прибегая к библиотекам).

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

По SVG:
commons.oreilly.com/wiki/index.php/SVG_Essentials/...
Книга по основам, я читал в более адекватном epub формате
https://sarasoueidan.com/tags/svg/index.html
Блог Сары (SVG, но можно и про CSS&JS почитать), более практичные и полезные вещи, читал с конца к началу

По JS:
https://classroom.udacity.com/courses/ud860/lesson...
Это база для понимания "че оно лагает?"
https://developers.google.com/web/tools/chrome-dev...
Понимание возможностей DevTools, очень упрощает жизнь в перспективе
https://github.com/getify/You-Dont-Know-JS
И конечно знание самого JS всегда нелишнее

По библиотекам и анимации:
Сам codepen, понятное дело. Смотрите в чужой код, пытайтесь разобраться.
https://www.youtube.com/playlist?list=PLkEZWD8wblt...
Более-менее можно прочувствовать что такое GSAP вообще, неплохой начальный курс
https://greensock.com/docs/#/HTML5/GSAP/TweenMax/from/
Сама документация и туториалы на сайте, можно и на их youtube канале что-то подсмотреть.
https://tympanus.net/codrops/
Много полезного с примерами

Всякого рода математика:
https://www.youtube.com/playlist?list=PLRqwX-V7Uu6...
https://www.youtube.com/user/codingmath/videos?flo...
Можно залипнуть, чтобы понимать как все эти векторные фишки делаются на canvas

Еще есть 3D, но это отдельная тема.

Что ж вас всех так тянет к этому канвасу? (риторический вопрос)

1. Анимации буквы под ней фото. Как это делается? Подозреваю что canvas используется

Если вы про большие "прозрачные" буквы, через которые видны фотографии, то никакой канвас там не нужен. Это делается на svg-масках - просто и производительно. Соответственно при перемещении мышки добавляется transform:translate для маски. Задача тривиальная, но оставлю пример для ознакомления. Переход между слайдами делается аналогично.

2. Листание мышкой (зажимаешь появляются направляющие вверх-вниз, вправо-влево).

На нажатие мышки вешаете обработчик, показывающий эти элементы (думаю не стоит говорить о том, как поменять им opacity). Далее точно так же - на событие "перетаскивания" добавляете transform:translate для всех этих линий и transform:scale для кружков. При переходе между слайдами добавляете еще больше трансформаций по вкусу.

Остальные эффекты тоже интересуют. Понятно что css3, js, canvas

Для рисования линий можно опять взять svg и..... Это вообще мощный прием, много куда его можно приткнуть. Появление надписей можно сделать на CSS-анимациях. Вариантов много, можно начать с вот этого примера (только делать все в обратную сторону) или поиграть с размерами псевдоэлементов, положенных поверх текстов. Еще там есть постраничный скролл, но это легко загуглить.

Событие mousemove или onEnterFrame(),
пересчитать прозрачность каждой точки, как квадрат расстояния от позиции мыши.

Сделал пример на canvas.
upd. добавил инертности/плавности перехода цветов.

Строки в js неизменяемы по индексу. Лучше собирать новую строку.

https://jsfiddle.net/porv82x1/1/

Бери Wordpress + Woocommerce