React Frontend Developer

Q: Как мы взаимодействуем с Node.js на фронтенде?

Node.js на фронтенде в основном применяется для:Сборки проектов (Webpack, Vite, Rollup).Запуска локального сервера для разработки.Управления зависимостями через npm/yarn/pnpm.Выполнения скриптов (тесты, линтинг, деплой).Фронтенд-разработчики не запускают Node.js в браузере, но используют его в инструментах сборки.

Question 1

Что такое JSX?

Accepted Answer

JSX (JavaScript XML) — это расширение синтаксиса JavaScript, которое позволяет писать HTML-подобный код прямо в JavaScript. Он используется в React для описания того, как должен выглядеть интерфейс. JSX упрощает создание компонентов, объединяя разметку и логику в одном месте.

Пример:

const element = <h1>Привет, мир!</h1>;

Под капотом JSX преобразуется в вызовы функций, например:

React.createElement('h1', null, 'Привет, мир!');

Привет, мир!

;Под капотом JSX преобразуется в вызовы функций, например:React.createElement('h1', null, 'Привет, мир!');

Question 2

Что такое microdata, и как она используется для структурирования данных на странице? В чем преимущества перед JSON-LD и RDFa?

Accepted Answer

Microdata — это формат, встроенный в HTML, который помогает структурировать данные на странице, чтобы поисковые системы и другие сервисы могли легко их распознать и интерпретировать. Используя атрибуты вроде itemprop и itemscope, разработчики могут описывать сущности, например, товары или статьи. В отличие от JSON-LD, который хранится отдельно от основного HTML-кода, microdata добавляется непосредственно в разметку страницы, что может быть проще для интеграции, но менее гибко для изменения. RDFa — это другая альтернатива, которая может интегрироваться с любыми HTML-элементами.

Question 3

Как браузер читает JSX?

Accepted Answer

Браузеры не могут напрямую читать JSX, так как это не валидный JavaScript. Для того чтобы браузер мог его исполнить, JSX необходимо транспилировать (преобразовать) в обычный JavaScript. Это обычно делается с помощью инструментов, таких как Babel, которые преобразуют JSX в вызовы функций, понятные браузеру.

Question 4

Что такое JSON, для чего его используют и какие методы есть?

Accepted Answer

JSON (JavaScript Object Notation) — это текстовый формат для представления данных в виде объектов и массивов. Он используется для обмена данными между клиентом и сервером. Для работы с JSON в JavaScript используются методы JSON.stringify() для преобразования объекта в строку и JSON.parse() для преобразования строки в объект.

Question 5

Как использовать CSS-in-JS библиотеки (например, styled-components) в React-проектах?

Accepted Answer

CSS-in-JS библиотеки позволяют писать стили прямо в JavaScript коде. В styled-components стили создаются как компоненты, что упрощает динамическое изменение стилей на основе состояния и использования тем.

Question 6

Какие преимущества и недостатки у React Router DOM по сравнению с альтернативными библиотеками (например, Next.js маршрутизацией)?

Accepted Answer

React Router DOM предоставляет большую гибкость и интеграцию с любыми фреймворками и библиотеками на базе React, в то время как Next.js использует встроенную маршрутизацию и может предлагать оптимизации для серверной стороны.

Question 7

Как работают генераторы в JS?

Accepted Answer

Генераторы — это функции, которые можно приостанавливать и возобновлять. Они возвращают специальный объект (Generator), управляемый через yield. Полезны для работы с последовательностями или асинхронными операциями.

Question 8

Как защитить данные в LocalStorage от стороннего JS?

Accepted Answer

Полностью защитить LocalStorage от чтения/изменения сторонним JS нельзя, так как он доступен в том же контексте. Можно уменьшить риски: хранить только нечувствительные данные, использовать шифрование или HttpOnly-куки для критичной информации.

Question 9

Как мы взаимодействуем с Node.js на фронтенде?

Accepted Answer

Node.js на фронтенде в основном применяется для:

Сборки проектов (Webpack, Vite, Rollup).
Запуска локального сервера для разработки.
Управления зависимостями через npm/yarn/pnpm.
Выполнения скриптов (тесты, линтинг, деплой).

Фронтенд-разработчики не запускают Node.js в браузере, но используют его в инструментах сборки.

Question 10

Как работает асинхронность в JS?

Accepted Answer

JavaScript выполняет код синхронно (по шагам), но может откладывать задачи с помощью:Callback-функций (например, setTimeout).Промисов (Promise) и async/await.Event Loop, который обрабатывает асинхронные задачи после основного кода.

Вопросы React Frontend Developer