Frontend Interview - собеседования по Javascript / Html / Css
Kanalga Telegram’da o‘tish
Канал для подготовки к собеседованиям по фронтенду Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/frontendinterview Канал в реестре РКН: https://rknn.link/su
Ko'proq ko'rsatish
Tarmoq:📈 Telegram kanali Frontend Interview - собеседования по Javascript / Html / Css analitikasi
Frontend Interview - собеседования по Javascript / Html / Css (@frontendinterview) Rus til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 10 736 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 11 409-o'rinni va Rossiya mintaqasida 60 392-o'rinni egallagan.
📊 Auditoriya ko‘rsatkichlari va dinamika
невідомо sanasidan buyon loyiha tez o‘sib, 10 736 obunachiga ega bo‘ldi.
13 Iyul, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -104 ga, so‘nggi 24 soatda esa -8 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.
- Tasdiqlash holati: Tasdiqlanmagan
- Jalb etish (ER): Auditoriya o‘rtacha 8.00% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 4.14% ini tashkil etuvchi reaksiyalarni to‘playdi.
- Post qamrovi: Har bir post o‘rtacha 859 marta ko‘riladi; birinchi sutkada odatda 444 ta ko‘rish yig‘iladi.
- Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 2 ta reaksiya keladi.
- Tematik yo‘nalishlar: Kontent javascript, браузер, html, css, видимость kabi asosiy mavzularga jamlangan.
📝 Tavsif va kontent siyosati
Muallif resursni shaxsiy fikrni ifoda etish maydoni sifatida ta’riflaydi:
“Канал для подготовки к собеседованиям по фронтенду
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront
Купить рекламу: https://telega.in/c/frontendinterview
Канал в реестре РКН:
https://rknn.link/su”
Yuqori yangilanish chastotasi (oxirgi ma’lumot 14 Iyul, 2026 da olingan) sababli kanal doimo dolzarb va katta qamrovli bo‘lib qoladi. Analitika auditoriya kontent bilan faol hamkorlik qilishini, uni Texnologiyalar & Aralashmalar toifasidagi muhim ta’sir nuqtasiga aylantirishini ko‘rsatadi.
10 736
Obunachilar
-824 soatlar
-297 kunlar
-10430 kunlar
Postlar arxiv
Какое значение примет result?
Что такое ReactDOMServer?
ReactDOMServer - это объект, позволяющий рендерить компоненты в виде статической разметки (обычно, используется на node-серверах). Данный объект в основном используется при рендеринге на стороне сервера. Следующие методы могут быть использованы как на сервере, так и в браузерном окружении:
renderToString() renderToStaticMarkup()Например, вы запускаете основанный на Node веб-сервер, такой как Express, Koa или Happi, и вызываете renderToString() для рендеринга корневого элемента в виде строки, которую сервер отправляет в ответ на запрос: // используем Express
import { renderToString } from 'react-dom/server'
import MyPage from './MyPage'
app.get('/', (req, res) => {
res.write('<!DOCTYPE html><html><head><title>My Page</title></head><body>')
res.write('<div id="content">')
res.write(renderToString(<MyPage/>))
res.write('</div></body></html>')
res.end()
})
👉 @frontendInterviewНовости от команды Лектрума 🔥
14 апреля в 19:30 по Киеву/Москве пройдёт онлайн-воркшоп на тему «Продвинутый React-разработчик 2021». 🏋️♂️
Разберёмся с MobX, TypeScript и другими инструментами на практике 💪
⚠️ Записи не будет. Регистрация через сайт. ⬇️
Программа:
🎯 Состояние сегодняшней экосистемы React
🎯 Создание мини-приложения на React и TypeScript
🎯 Извлечение пользы от применения TypeScript
🎯 Правильное применение Redux и MobX
🎯 Развеивание мифов о Redux, MobX
🎯 Точки роста зарплаты в 2021-м году
Для кого:
✔️ Веб-разработчиков, которые работают с устаревшими инструментами
✔️ Новичков, которые хотят разрабатывать React-приложения
✔️ Самоучек, которые запутались на своём пути
TypeScript_Quickly_v9_MEAP.pdf20.10 MB
TypeScript Quickly (2020)
TypeScript - это JavaScript с важным обновлением! Добавив строгую систему типов в JavaScript, TypeScript может помочь вам устранить целые категории ошибок времени выполнения. Читая книгу, вы c помощью практических примеров и проектов научитесь создавать надежные приложения под руководством опытных веб-разработчиков Якова Файна и Антона Моисеева.
Фильтрация массива
Вам дан массив, состоящий из чисел и строк. Задача проста - отфильтровать строки и вернуть массив чисел.
Примеры
filter_list([1,2,'a','b']) == [1,2]
filter_list([1,'a','b',0,15]) == [1,0,15]The_Road_to_React_Your_journey_to_master_plain_yet_pragmatic_React.pdf8.50 KB
The Road to React (2020)
При помощи книги вы можете изучить основы React.js, шаг за шагом создавая полноценное приложение на React. При создании приложения каждая глава книги знакомит вас с новой функцией или особенностью React.
Что такое предохранители (Error Boundaries) в React?
Error boundaries- это компоненты, которые отлавливают ошибки JavaScript, возникающие в любом дочернем компоненте, сообщают об этих ошибках и отображают резервный UI.
Классовый компонент становится предохранителем при определении в нем нового метода жизненного цикла componentDidCatch(error, info) или static getDerivedStateFromError() :
class ErrorBoundary extends React.Component {
constructor(props) {
super(props)
this.state = { hasError: false }
}
componentDidCatch(error, info) {
// Вы также можете отправлять ошибки в специальный сервис по их обработке
logErrorToMyService(error, info)
}
static getDerivedStateFromError(error) {
// Обновляем состояние, чтобы при следующем рендеринге использовался запасной UI
return { hasError: true };
}
render() {
if (this.state.hasError) {
// Вы можете рендерить любой резервный интерфейс
return <h1>{'Что-то пошло не так.'}</h1>
}
return this.props.children
}
}
После этого, предохранитель используется как обычный компонент:
<ErrorBoundary>
<MyWidget />
</ErrorBoundary>ReactJS с нуля до Pro за 4 месяца
🚀Открыт набор на второй поток курса ReactJS Pro в школе технологий 🚜Трактор
Преподаватели курса: Максим Иванов и Никита Кабардин — разработчики из Spotify, Minecraft и Battlefield!
Залетай в телеграм-бот, чтобы узнать больше!
🚜 Всё о курсе, о формате, о дискорде, о Трактор комьюнити
🔔 Оповещения о стримах
🔗 Ссылки на небольшие внутренние курсы
+ Видосы:
🎮 Собираем клон Minecraft на React с нуля за 30 минут.
⚡️ Создаем сложные формы на React и React Hook Form.
⏯ Подборка полезных видео от Максима на английском
👇Кликай на кнопку, жми START и поехали! 🚀
Что такое props.children?
Как выполнить условный рендеринг компонентов в React?
В некоторых случаях вам нужно будет рендерить разные компоненты в зависимости от некоторого состояния. JSX не рендерит false или undefined, поэтому вы можете использовать короткие вычисления для рендеринга определенной части компонента только при удовлетворении условия:
const MyComponent = ({ name, address }) => (
<div>
<h2>{name}</h2>
{address &&
<p>{address}</p>
}
</div>
)
Если вам требуется условие if else, тогда используйте тернарный оператор:
const MyComponent = ({ name, address }) => (
<div>
<h2>{name}</h2>
{address
? <p>{address}</p>
: <p>{'Address is not available'}</p>
}
</div>
)Ищешь годный материал по front end разработке?
FrontEndDev - канал для продвинутых веб-разработчиков.
На канале найдешь свежие статьи, фишки JS и TS, туториалы по современным фреймворкам, лучшие практики разработки и многое другое.
Рекомендуем подписаться - @front_end_dev
Какое из перечисленных ниже слов не является зарезервированным словом в JavaScript?
Расскажите про относительные единицы измерения в CSS
В CSS3 были добавлены относительные единицы измерения, такие как vh, vw, vmin, vmax. Эти единицы вычисляются относительно размеров окна браузера.
Если вы хотите использовать высоту и ширину окна браузера, лучше воспользоваться единицами vh и vw. Например, если высота окна браузера равна 900px, то 1vh будет равен 9px. Аналогично, если ширина окна браузера равна 1600px, то 1vw будет равен 16px.
vmin и vmax определяются минимальным или максимальным значением высоты или ширины. Например, если ширина окна браузера равна 1200px, а высота 700px, то vmin будет равен 7px, а vmax - 12px.
Верно или неверно утверждение?
useLayoutEffect запускается после рендера React-компонента и гарантирует, что обратный вызов эффекта не заблокирует отрисовку.
Заглушить троллей
Тролли набежали в комменты! С ними можно разобраться, удалив все гласные буквы в их сообщениях. Напишите функцию, которая будет принимать строку и возвращать обработанную строку без гласных.
Пример:
"This website is for losers LOL!" станет "Ths wbst s fr lsrs LL!".Как использовать стили в React?
Атрибут style принимает объект JavaScript со свойствами в стиле camelCase, а не в виде CSS-строки. Это обеспечивает согласованность с JavaScript-свойствами, связанными со стилями, является более эффективным и закрывает дыры в безопасности (XSS).
const divStyle = {
color: 'blue',
backgroundImage: 'url(' + imgUrl + ')'
};
function HelloWorldComponent() {
return <div style={divStyle}>Привет, народ!</div>
}
Использование атрибута style для оформления элементов не рекомендуется. В большинстве случаев для ссылки на классы, определённые во внешнем CSS, следует использовать className.