Frontend | Готовимся к собесам

Что такое JSX? Ответ: JSX (JavaScript XML) — это синтаксический сахар для JavaScript, который позволяет писать HTML-подобный код внутри JavaScript. JSX превращается в обычный JavaScript с помощью компилятора, такого как Babel. Пример: const element = <h1>Hello, world!</h1>; JSX упрощает создание и чтение UI компонентов. Ставь 🔥если знаешь ответ Если нет — ставь 🤯 ➡️ Подготовка Frontend

Что такое Virtual DOM и как он работает? Ответ: Virtual DOM — это абстракция реального DOM, которая используется React для оптимизации производительности. Когда компонент обновляется, React сначала изменяет виртуальный DOM, затем сравнивает его с предыдущей версией и вносит минимальные изменения в реальный DOM. Ставь 🔥если знаешь ответ Если нет — ставь 🤯 ➡️ Подготовка Frontend

Что такое компонент в React? Ответ: Компонент в React — это функциональная или классовая сущность, которая принимает входные данные (props) и возвращает UI, описанный с использованием JSX. Компоненты могут быть повторно используемыми и могут содержать логику состояния. Ставь 🔥если знаешь ответ Если нет — ставь 🤯 ➡️ Подготовка Frontend

Как работает метод setState? Ответ: Метод setState используется для обновления состояния компонента в React. Когда состояние изменяется, React перерисовывает компонент и его дочерние элементы. Важно, что setState работает асинхронно, и обновления могут быть объединены. this.setState({ counter: this.state.counter + 1 }); Ставь 🔥если знаешь ответ Если нет — ставь 🤯 ➡️ Подготовка Frontend

Что отличает умного айтишника от глупого? Нет, не знание десятка языков и фреймворков. И даже не многолетний опыт работы.  Умного от тупого отличает понимание одной фундаментальной вещи — важно не СКОЛЬКО ты умеешь, а ЧТО. И те, кто понял это раньше — уже обходят 90% матёрых спецов. Потому что точечно учат ровно то, что требуется рынку прямо сейчас. Если хотите показать, кто тут батя и быстро войти в списки лучших — почитайте канал @devsp. Там LLM разработчик делится ценнейшим опытом и рассказывает, как в пару месяцев упаковать 5–6 лет хаотичного обучения. Это однозначно один из лучших айтишных каналов, посмотрите сами: @devsp

Что такое жизненный цикл компонента? Ответ: Жизненный цикл компонента — это набор методов, которые вызываются на разных стадиях существования компонента. Важно знать методы: componentDidMount — вызывается после первого рендера компонента. componentDidUpdate — вызывается после обновления компонента. componentWillUnmount — вызывается перед удалением компонента. С появлением React Hooks жизненный цикл можно управлять и с помощью хуков (например, useEffect). Ставь 🔥если знаешь ответ Если нет — ставь 🤯 ➡️ Подготовка Frontend

Что такое React Hooks? Ответ: React Hooks — это возможности, введенные в React 16.8, которые позволяют использовать состояние и другие возможности React в функциональных компонентах, без необходимости писать классовые компоненты. Примеры хуков: useState — для управления состоянием. useEffect — для работы с побочными эффектами. useContext — для работы с контекстом. Ставь 🔥если знаешь ответ Если нет — ставь 🤯 ➡️ Подготовка Frontend

Как работает хук useState? Ответ: useState — это хук, который позволяет добавлять состояние в функциональные компоненты. Он возвращает массив из двух элементов: текущего состояния и функции для его обновления. const [count, setCount] = useState(0); Ставь 🔥если знаешь ответ Если нет — ставь 🤯 ➡️ Подготовка Frontend

Что такое хук useEffect? Ответ: useEffect — это хук, который позволяет выполнять побочные эффекты в функциональных компонентах (например, запросы к API, подписки, манипуляции с DOM). Он выполняется после рендера компонента. useEffect(() => { // код для побочного эффекта }, [dependencies]); // зависимости, по изменению которых будет выполняться эффект Ставь 🔥если знаешь ответ Если нет — ставь 🤯 ➡️ Подготовка Frontend

❓ Что такое Event Loop и как он работает? Ответ: Event Loop — это механизм, который управляет потоком выполнения кода в JavaScript, обеспечивая асинхронность. Он проверяет Call Stack и очереди задач (например, микрозадачи и макрозадачи) и выполняет их в нужном порядке. Ставь 🔥если знаешь ответ Если нет — ставь 🤯 ➡️ Подготовка Frontend

Как работает хук useContext? Ответ: useContext позволяет функциональным компонентам использовать значения из контекста. Это полезно для передачи данных между компонентами, не прокидывая props через всю иерархию. const value = useContext(MyContext); Ставь 🔥если знаешь ответ Если нет — ставь 🤯 ➡️ Подготовка Frontend

Что такое React Context? Ответ: React Context — это механизм, позволяющий передавать данные через дерево компонентов без необходимости вручную передавать props на каждом уровне. Context полезен для глобальных данных, таких как тема, авторизация и настройки. Ставь 🔥если знаешь ответ Если нет — ставь 🤯 ➡️ Подготовка Frontend

Что такое Higher-Order Component (HOC)? Ответ: HOC — это функция, которая принимает компонент и возвращает новый компонент с добавленной функциональностью. HOC часто используется для повторного использования логики между компонентами. const withAuth = (Component) => { return function AuthHOC(props) { if (!props.isAuthenticated) { return <Redirect to="/login" />; } return <Component {...props} />; }; }; Ставь 🔥если знаешь ответ Если нет — ставь 🤯 ➡️ Подготовка Frontend

Как обрабатываются события в React? Ответ: События в React обрабатываются через синтетические события, которые абстрагируют реальные события браузера. Например, для обработки клика на кнопку: function handleClick() { console.log('Clicked'); } <button onClick={handleClick}>Click me</button> Ставь 🔥если знаешь ответ Если нет — ставь 🤯 ➡️ Подготовка Frontend

Что такое key в списках React? Ответ: key — это уникальный идентификатор для каждого элемента в списке, который помогает React эффективно отслеживать изменения в DOM. key должен быть уникальным для каждого элемента в пределах списка. const items = [1, 2, 3]; return items.map(item => <li key={item}>{item}</li>); Ставь 🔥если знаешь ответ Если нет — ставь 🤯 ➡️ Подготовка Frontend

Что такое мемоизация в React? Ответ: Мемоизация — это процесс кэширования результатов вычислений для того, чтобы не выполнять их повторно с теми же входными данными. В React мемоизация часто используется с помощью React.memo для компонентов и useMemo для вычислений. const MemoizedComponent = React.memo(MyComponent); Ставь 🔥если знаешь ответ Если нет — ставь 🤯 ➡️ Подготовка Frontend

Что такое динамический импорт в React? Ответ: Динамический импорт позволяет загружать модули асинхронно. В React это используется для ленивой загрузки компонентов, что улучшает производительность приложения. Пример: const LazyComponent = React.lazy(() => import('./LazyComponent')); Ставь 🔥если знаешь ответ Если нет — ставь 🤯 ➡️ Подготовка Frontend

➡️ Подготовка Frontend

Что такое “middleware” в Redux? Ответ: Middleware в Redux — это промежуточные слои, которые могут перехватывать и обрабатывать действия перед тем, как они будут отправлены в редьюсер. Примером является redux-thunk, который позволяет использовать асинхронные операции. Ставь 🔥если знаешь ответ Если нет — ставь 🤯 ➡️ Подготовка Frontend

Что такое “pure” компоненты? Ответ: Pure компоненты в React — это компоненты, которые не изменяют свои props и state, и всегда возвращают одинаковый результат при одинаковых входных данных. Они могут быть реализованы с помощью React.PureComponent или функциональных компонентов с использованием React.memo. Ставь 🔥если знаешь ответ Если нет — ставь 🤯 ➡️ Подготовка Frontend