TypeScript Quickly (2020)
TypeScript - это JavaScript с важным обновлением! Добавив строгую систему типов в JavaScript, TypeScript может помочь вам устранить целые категории ошибок времени выполнения. Читая книгу, вы c помощью практических примеров и проектов научитесь создавать надежные приложения под руководством опытных веб-разработчиков Якова Файна и Антона Моисеева.
TypeScript - это JavaScript с важным обновлением! Добавив строгую систему типов в JavaScript, TypeScript может помочь вам устранить целые категории ошибок времени выполнения. Читая книгу, вы c помощью практических примеров и проектов научитесь создавать надежные приложения под руководством опытных веб-разработчиков Якова Файна и Антона Моисеева.
Что такое ReactDOMServer?
ReactDOMServer - это объект, позволяющий рендерить компоненты в виде статической разметки (обычно, используется на node-серверах). Данный объект в основном используется при рендеринге на стороне сервера. Следующие методы могут быть использованы как на сервере, так и в браузерном окружении:
// используем Express
👉 @frontendInterview
ReactDOMServer - это объект, позволяющий рендерить компоненты в виде статической разметки (обычно, используется на node-серверах). Данный объект в основном используется при рендеринге на стороне сервера. Следующие методы могут быть использованы как на сервере, так и в браузерном окружении:
renderToString()Например, вы запускаете основанный на Node веб-сервер, такой как Express, Koa или Happi, и вызываете renderToString() для рендеринга корневого элемента в виде строки, которую сервер отправляет в ответ на запрос:
renderToStaticMarkup()
// используем Express
import { renderToString } from 'react-dom/server'
import MyPage from './MyPage'
app.get('/', (req, res) => {
res.write('<!DOCTYPE html><html><head><noscript>My Page</noscript></head><body>')
res.write('<div id="content">')
res.write(renderToString(<MyPage/>))
res.write('</div></body></html>')
res.end()
})👉 @frontendInterview
Что такое Symbol в JavaScript?
Symbol это уникальный и неизменяемый тип данных.
Свойства символов:
При создании символам можно дать имя.
👉 @frontendInterview
Symbol это уникальный и неизменяемый тип данных.
Свойства символов:
При создании символам можно дать имя.
Создаём символ id с описанием (именем) "id"Они гарантированно уникальны.
let id = Symbol("id");
let id1 = Symbol("id");
let id2 = Symbol("id");
alert(id1 == id2); // false
Не преобразуются автоматически в строки. let id = Symbol("id");
alert(id); // TypeError: Cannot convert a Symbol value to a string
Позволяют создавать «скрытые» свойства объектов, к которым нельзя обратиться из других частей программы и перезаписать их. id = Symbol("id");
let user = {
name: "Вася",
age: 30,
[id]: 123 // просто "id: 123" не сработает
};
Игнорируются циклом for…infor (let key in user) alert(key); // name, age (свойства с ключом-символом нет среди перечисленных)
👉 @frontendInterview
Regex валидатор
Вам нужно написать regex, который будет валидировать пароль по заданным критериям:
1. Длина пароля как минимум 6 символов
2. Содержит строчную букву
3. Содержит заглавную букву
3. Содержит число
👉 @frontendInterview
Вам нужно написать regex, который будет валидировать пароль по заданным критериям:
1. Длина пароля как минимум 6 символов
2. Содержит строчную букву
3. Содержит заглавную букву
3. Содержит число
👉 @frontendInterview
Как использовать InnerHtml в React?
Атрибут dangerouslySetInnerHTML в React является альтернативой innerHTML. Как и последний, его использование представляет собой угрозу межсайтового скриптинга (XSS). Необходимо передать объект с ключом html и HTML-разметкой в качестве значения.
В приведенном ниже примере MyComponent использует атрибут dangerouslySetInnerHTML для определения разметки:
👉 @frontendInterview
Атрибут dangerouslySetInnerHTML в React является альтернативой innerHTML. Как и последний, его использование представляет собой угрозу межсайтового скриптинга (XSS). Необходимо передать объект с ключом html и HTML-разметкой в качестве значения.
В приведенном ниже примере MyComponent использует атрибут dangerouslySetInnerHTML для определения разметки:
function createMarkup() {
return { __html: 'Первый · Второй' }
}
function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />
}👉 @frontendInterview
Что такое медиа запросы в CSS?
Медиа запросы (media queries) - это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений параметров устройств. Они предназначены для создания адаптивных сайтов.
Синтаксис:
and - требует обязательного выполнения всех условий.
, - требует обязательного выполнения хотя бы одного условия.
not - предназначен для отрицания условия.
Медиа функции:
width - указывает требования к ширине области просмотра устройства.
min-width - задаёт минимальную ширину области viewport.
max-width - определяет максимальную рабочую область устройства.
height, min-height и max-height - задают требования аналогично, но в отношении высоты viewport.
Пример:
👉 @frontendInterview
Медиа запросы (media queries) - это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений параметров устройств. Они предназначены для создания адаптивных сайтов.
Синтаксис:
@media условие {
/* стили (они будут выполняться, если устройство соответствует указанному условию)
}
Логические операторы:and - требует обязательного выполнения всех условий.
, - требует обязательного выполнения хотя бы одного условия.
not - предназначен для отрицания условия.
Медиа функции:
width - указывает требования к ширине области просмотра устройства.
min-width - задаёт минимальную ширину области viewport.
max-width - определяет максимальную рабочую область устройства.
height, min-height и max-height - задают требования аналогично, но в отношении высоты viewport.
Пример:
@media not screen and (orientation: portrait),
(min-width: 992px){ /* Стили CSS ... */ }👉 @frontendInterview
Почему следует избегать использования индексов в качестве ключей в React?
Ключи должны быть стабильными, предсказуемыми и уникальными, чтобы React имел возможность следить за элементами.
В приведенном ниже примере ключом каждого элемента является порядок его расположения в массиве без привязки к предоставляемым им данным. Это ограничивает возможности React по оптимизации:
👉 @frontendInterview
Ключи должны быть стабильными, предсказуемыми и уникальными, чтобы React имел возможность следить за элементами.
В приведенном ниже примере ключом каждого элемента является порядок его расположения в массиве без привязки к предоставляемым им данным. Это ограничивает возможности React по оптимизации:
{todos.map((todo, index) =>
<Todo
{...todo}
key={index}
/>
)}
При использовании в качестве уникальных ключей данных элемента, например, todo.id, которые являются уникальными в списке и стабильными, у React появится возможность изменять порядок расположения элементов без необходимости выполнения дополнительных вычислений: {todos.map((todo) =>
<Todo {...todo}
key={todo.id} />
)}👉 @frontendInterview