10 вопросов по React начального уровня с интервью

Статья (англ.): https://javascript.plainenglish.io/10-entry-level-react-interview-questions-5a8ea74e2130

Проверим себя.

1. Что такое Virtual DOM и как он работает?

👉 Ответ

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

2. Назовите самые важные методы жизненного цикла (классовых компонентов) и зачем их использовать. А также альтернативные хуки (React Hooks)

👉 Ответ

При монтировании компонента работают:
- constructor,
- static getDerivedStateFromProps (useEffect с массивом зависимостей),
- render,
- componentDidMount (useEffect)

При перерендере:
- static getDerivedStateFromProps (useEffect с массивом зависимостей)
- shouldComponentUpdate (useMemo)
- render
- getSnapshotBeforeUpdate (кастомные хуки для сохранения предыдущего состояния)
- componentDidUpdate (useEffect)

При размонтировании:
- componentWillUnmount (useEffect с возвращением функции для сброса эффекта)

3. Зачем мы используем стрелочные функции в React?

👉 Ответ

Чтобы не создавать новый контекст выполнения (this), а выполнять все действия в контексте компонента. Если не использовать стрелочные функции, придется привязывать все методы к экземпляру компонента (в конструкторе).

4. Что такое ключи (keys) и зачем они нужны?

👉 Ответ

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

5. В чем преимущества React перед настоящими "фреймворками" типа Angular?

Вопрос очень спорный, но пусть будет.

👉 Ответ

React легкий, использует JSX (проще освоиться) и виртуальный DOM (быстрее работает). Поток данных идет в одном направлении сверху вниз (проще отлаживать). Супер развитая экосистема, куча инструментов для любых задач.

Остальные вопросы уже по JavaScript, можно посмотреть в статье, чтобы освежить знания.

#компоненты #жизненныйциклкомпонента #хуки #виртуальныйdom #обработкасобытий #ключи #ссылки

​Как использовать Fetch вместе с async/await

Статья рассказывает, как запрашивать данные, обрабатывать ошибки и даже отменять fetch-запросы с помощью async/await-синтаксиса: https://proglib.io/w/93070ac7

#async

​Миграция 17 000 файлов JS на TypeScript. Как это было

Опыт компании Etsy: https://proglib.io/w/ad791d56

#typescript

App shell UX с помощью сервис-воркеров и потоков

Переход между страницами без перезагрузки в стиле SPA, но без SPA. Реальный кейс портала dev.to: https://proglib.io/w/5e044635

​HTML5 and CSS3 All-in-One For Dummies (2014)
Автор: Andy Harris
Количество страниц: 1104

HTML5 и CSS3 являются важными инструментами для создания динамических веб-сайтов. Это доступное, универсальное руководство охватывает все, что вам нужно знать о каждой из этих технологий и их последних версиях, чтобы вы могли использовать их вместе. Книга также представляет способы использования HTML5 и CSS3 с JavaScript, MySQL и Ajax для создания веб-сайтов.

Книга:
✔️Охватывает использование JavaScript, PHP, MySQL и Ajax в контексте программирования динамических веб-страниц с использованием CSS3 и HTML5;
✔️Включает в себя отдельные мини-книги, в которых рассматриваются HTML, CSS, дизайн и верстка, Ajax;
✔️Описывает изменения в стандартах;
✔️Имеет веб-сайт, который содержит вспомогательные материалы, включая код и несколько ценных программ, которые полезны для веб-разработки.

Достоинства:
➕Детальные объяснения;
➕Позволяет быстро вникнуть в тему;
➕Содержит много ссылок на полезные ресурсы.

Недостатки:
➖Не замечено.

Скачать книгу

​7 способов использовать внедрение зависимостей в функциональном JS без фреймворка

https://proglib.io/w/2688b15f

#javascript #bestpractices #patterns

☕️ Объясняем алгоритм быстрой сортировки с помощью JavaScript

Раскладываем по полочкам, как работает алгоритм быстрой сортировки с помощью JavaScript с пошаговой иллюстрацией каждого шага.

https://proglib.io/w/5101d8ef

🧩 5 интересных головоломок и задач, чтобы отвлечься от рутины и немного пошевелить извилинами (выпуск 14)

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

https://proglib.io/w/a8cbe993

Пишем фронтенд-компоненты на ванильном JS

В качестве эксперимента создадим простой компонент исключительно с помощью браузерного JavaScript.

https://proglib.io/w/a842fca8

🕵️ Я тебя не «иаонмпю»: о принципах работы симметричного и ассиметричного шифрования

Волк Боб и волк Джейн рассказывают, как работает шифрование: https://proglib.io/sh/R46GxpL3Se

​JS классы - это не "просто синтаксический сахар"

Автор статьи объясняет, почему классы в JavaScript - это не просто более удобный способ обычного прототипного наследования, а нечто большее: https://proglib.io/w/4f25fc14

Друзья! Мечтаете «влететь» в IT? Или уже работаете в сфере, хочется стать круче?

ТехноДром — центр запуска и развития карьеры от IBS — подготовил программу «Ускорение», которая помогает молодым талантам и специалистам из других сфер начать карьеру в IT, а тем, у кого уже есть опыт, сделать рывок в карьере.

Почему «Ускорение» - не очередные «курсы для айтишников»?
▫️IBS предоставляет обучение на базе компании и заинтересованы в вашем росте , чтобы усилить команду.
▫️Официально устраивают на работу с первого дня на «Ускорении». После завершения программы вас ждёт участие в текущих проектах IBS.
▫️За обучение на «Ускорении» не нужно платить, а также его не нужно совмещать с другой работой.
▫️Вашими наставниками станут ключевые сотрудники компании IBS – ваши будущие коллеги, которые сопровождают вас от старта до финиша программы.

Узнайте больше об «Ускорении» и запишитесь на участие в программе

​Лабиринт доступности

Приятная игра, которая расскажет о проблемах доступности в современном вебе и способах их решения (англ.): https://proglib.io/w/1052275e

#accessibility

Почему получаются плохие абстракции и как этого избежать?

🚀3 февраля в 19.00 МСК Евгений Тюменцев, профессионально занимающийся разработкой многопоточных кросс-платформенных приложений на С++, научит вас строить абстракции – один из ключевых навыков для программиста.

За один час вы узнаете:

– Что такое абстракция?
– Причины правок кода
– Как выделять абстракции
– Свойства абстракций, полезные при разработке

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

Регистрация и подробности по ссылке.

​Пройдите полную программу обучения по специальности «Фронтенд-разработчик» на Хекслете и получите гарантированную оплачиваемую стажировку в «Ростелеком»: https://bit.ly/3rJdtzc

📍Глубокий практический курс на 8 месяцев: JavaScript, HTML и CSS, фреймворки React+Redux Toolkit, инфраструктура — командная строка, NPM, Git, Webpack.
📍Асинхронный формат — комфортный темп, мягкие дедлайны.
📍Более 350 заданий в онлайн-тренажере с мгновенной автопроверкой.
📍Помощь практикующих наставников.
📍4 рабочих проекта в портфолио на GitHub и практика в Open Source.

Выпускникам — гарантированная оплачиваемая стажировка в проектах ИТ-кластера «Ростелеком» от 1 до 3 месяцев с окладом 40 000 рублей в месяц. Лучшие получат оффер!

Псевдокласс :has() — не только «родительский селектор»

О :has() часто говорят как о «родительском селекторе». Но он может быть не только селектором любого предка, но и селектором предыдущего соседа. Подробнее: https://proglib.io/w/c4ad3ad3

#css

Как читать W3C-спецификации

Мы редко обращаемся к спецификации в том числе и потому, что ее сложно понять. Статья рассказывает, как читать спецификации правильно: https://proglib.io/w/61e84fe1

#docs

​Тренды JavaScript в 2022 году

Первый месяц 2022 года почти завершился, но впереди еще 11. Есть время угнаться за трендами.

https://proglib.io/w/d6b73b58

#tools