Высоко цените свое время и стремитесь успешно пройти собеседование по Frontend разработке? Тогда канал @easy_javascript_ru идеально подойдет для вас! Здесь собраны самые актуальные и интересные вопросы, которые могут встретиться на собеседованиях по Frontend. Уникальный контент поможет вам подготовиться к собеседованию и повысить свои шансы на успешное трудоустройство в сфере Frontend разработки. Не теряйте времени зря, присоединяйтесь к каналу, чтобы стать настоящим профессионалом в своей области! Для получения более подробной информации по вопросам рекламы обращайтесь к администратору по контактному номеру +7 921 632 6117. Также вы можете использовать специальные тесты и задачи для тренировки в каналах t.me/+T0COHtFzCJkwMDUy и t.me/+_tcX2w2EmvdmMTgy соответственно. Не упустите свой шанс найти лучшую работу в сфере Frontend разработки - переходите по ссылке t.me/+CgCAzIyGHHg0Nzky и начинайте свой успешный карьерный путь прямо сейчас!
07 Feb, 16:10
07 Feb, 09:10
<head> и не отображаются на самой странице, но помогают браузерам, поисковым системам и социальным сетям правильно обрабатывать и отображать страницу. <meta charset="UTF-8">
<meta name="description" content="Лучший сайт с рецептами вкусных блюд!">
<meta name="keywords" content="рецепты, еда, кулинария, блюда">
<meta name="author" content="Иван Иванов">
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="Вкусные рецепты">
<meta property="og:description" content="Попробуйте лучшие блюда со всего мира!">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Рецепты для гурманов">
<meta name="twitter:image" content="https://example.com/image.jpg">
07 Feb, 07:00
06 Feb, 16:10
06 Feb, 09:10
props useReducer работает как Redux, но проще const AuthContext = createContext();
function authReducer(state, action) {
switch (action.type) {
case "LOGIN":
return { ...state, isAuthenticated: true, user: action.payload };
case "LOGOUT":
return { ...state, isAuthenticated: false, user: null };
default:
return state;
}
}
function AuthProvider({ children }) {
const [state, dispatch] = useReducer(authReducer, {
isAuthenticated: false,
user: null,
});
return (
<AuthContext.Provider value={{ state, dispatch }}>
{children}
</AuthContext.Provider>
);
}
function LoginButton() {
const { dispatch } = useContext(AuthContext);
return (
<button onClick={() => dispatch({ type: "LOGIN", payload: "Иван" })}>
Войти
</button>
);
}
actions и reducers, только функции import { create } from "zustand";
const useStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}));
function Counter() {
const { count, increment } = useStore();
return <button onClick={increment}>Счетчик: {count}</button>;
}import { atom, useRecoilState } from "recoil";
const countState = atom({
key: "count",
default: 0,
});
function Counter() {
const [count, setCount] = useRecoilState(countState);
return <button onClick={() => setCount(count + 1)}>Счетчик: {count}</button>;
}import { atom, useAtom } from "jotai";
const countAtom = atom(0);
function Counter() {
const [count, setCount] = useAtom(countAtom);
return <button onClick={() => setCount(count + 1)}>Счетчик: {count}</button>;
}import { makeAutoObservable } from "mobx";
import { observer } from "mobx-react-lite";
class CounterStore {
count = 0;
constructor() {
makeAutoObservable(this);
}
increment() {
this.count++;
}
}
const store = new CounterStore();
const Counter = observer(() => (
<button onClick={() => store.increment()}>Счетчик: {store.count}</button>
));import { createMachine, interpret } from "xstate";
const toggleMachine = createMachine({
id: "toggle",
initial: "inactive",
states: {
inactive: { on: { TOGGLE: "active" } },
active: { on: { TOGGLE: "inactive" } },
},
});
const service = interpret(toggleMachine).start();
service.send("TOGGLE"); // Меняет состояние05 Feb, 16:10
05 Feb, 14:05
05 Feb, 09:10
user), лучше хранить её в глобальном состоянии (например, в Context или Redux). // Глобальное состояние (например, Context API)
const UserContext = createContext();
function App() {
const [user, setUser] = useState({ name: "Иван", isLoggedIn: true });
return (
<UserContext.Provider value={user}>
<Navbar />
<Profile />
</UserContext.Provider>
);
}
function Navbar() {
const user = useContext(UserContext);
return <div>Привет, {user.name}!</div>;
}
function Profile() {
const user = useContext(UserContext);
return <div>Профиль пользователя: {user.name}</div>;
}
ChatInput), а отображается в другом (ChatList), логично хранить все сообщения в глобальном состоянии. const ChatContext = createContext();
function ChatProvider({ children }) {
const [messages, setMessages] = useState([]);
const sendMessage = (text) => {
setMessages([...messages, { text, id: Date.now() }]);
};
return (
<ChatContext.Provider value={{ messages, sendMessage }}>
{children}
</ChatContext.Provider>
);
}
function ChatList() {
const { messages } = useContext(ChatContext);
return messages.map((msg) => <p key={msg.id}>{msg.text}</p>);
}
function ChatInput() {
const { sendMessage } = useContext(ChatContext);
const [text, setText] = useState("");
return (
<input
value={text}
onChange={(e) => setText(e.target.value)}
onKeyPress={(e) => {
if (e.key === "Enter") {
sendMessage(text);
setText("");
}
}}
/>
);
}
query-параметрах или path). /products/123 /shop?category=shoes&sort=price /chat?user=ivan 04 Feb, 16:10
04 Feb, 09:10
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} издает звук`);
}
}
class Dog extends Animal {
speak() {
console.log(`${this.name} лает`);
}
}
const dog = new Dog("Бобик");
dog.speak(); // "Бобик лает"const double = num => num * 2;
const numbers = [1, 2, 3, 4];
const doubledNumbers = numbers.map(double);
console.log(doubledNumbers); // [2, 4, 6, 8]
03 Feb, 16:10
03 Feb, 09:10
let fruits = ["яблоко", "банан", "апельсин"];
Array let numbers = new Array(1, 2, 3, 4, 5);
let fruits = ["яблоко", "банан", "апельсин"];
console.log(fruits[0]); // "яблоко"
console.log(fruits[1]); // "банан"
push() let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]
pop() arr.pop();
console.log(arr); // [1, 2, 3]
unshift() arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]
shift() arr.shift();
console.log(arr); // [1, 2, 3]
forEach() arr.forEach(item => console.log(item));
filter() let evenNumbers = arr.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2]
02 Feb, 16:10
02 Feb, 09:10
box-sizing в CSS управляет тем, как рассчитываются размеры элемента, включая ширину и высоту. Оно определяет, включаются ли в эти размеры внутренние отступы (padding) и границы (border), или же они добавляются отдельно. padding и border. Если добавить padding или border, фактические размеры элемента увеличатся. .box {
width: 200px;
height: 100px;
padding: 20px;
border: 10px solid black;
box-sizing: content-box;
}width и height включают padding и border. Внутреннее содержимое (content) будет автоматически уменьшаться, чтобы уложиться в заданные размеры. .box {
width: 200px;
height: 100px;
padding: 20px;
border: 10px solid black;
box-sizing: border-box;
}box-sizing от родительского элемента. .parent {
box-sizing: border-box;
}
.child {
box-sizing: inherit; /* Унаследует border-box */
}01 Feb, 16:10
01 Feb, 09:10
transform с функцией rotate. Это свойство позволяет применять различные трансформации к элементам, включая вращение, масштабирование, смещение и наклон..rotated-box {
width: 100px;
height: 100px;
background-color: lightblue;
transform: rotate(45deg);
}transform: rotate(угол);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.rotated-box {
width: 100px;
height: 100px;
background-color: lightblue;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="rotated-box"></div>
</body>
</html>
rotate
Используется для вращения элемента на заданный угол. Положительные значения поворачивают элемент по часовой стрелке, отрицательные — против часовой стрелки.@keyframes и transition), вращение может создавать динамичные и интерактивные пользовательские интерфейсы.31 Jan, 16:10
31 Jan, 09:10
flex-direction. Это свойство определяет основную ось контейнера и направление размещения flex-элементов. .container {
display: flex;
flex-direction: row; /* или просто не указывать, так как это значение по умолчанию */
}.container {
display: flex;
flex-direction: row-reverse;
}.container {
display: flex;
flex-direction: column;
}.container {
display: flex;
flex-direction: column-reverse;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Direction</title>
<style>
.container {
display: flex;
flex-direction: row; /* Измените значение на row-reverse, column, или column-reverse для проверки разных направлений */
border: 1px solid #000;
height: 200px;
}
.item {
flex: 1;
border: 1px solid #ccc;
padding: 10px;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
30 Jan, 16:10
30 Jan, 09:10
pipe работает с чистыми функциями, которые не изменяют исходные данные и возвращают новый результат. Это повышает предсказуемость кода.pipe упрощает цепочку, делая её линейной.pipe принимает несколько функций в качестве аргументов и применяет их слева направо к переданным данным. То есть результат одной функции передается как вход в следующую.const pipe = (...functions) => (input) =>
functions.reduce((acc, fn) => fn(acc), input);
// Пример функций
const multiplyByTwo = (num) => num * 2;
const addThree = (num) => num + 3;
const square = (num) => num ** 2;
// Использование pipe
const processNumber = pipe(multiplyByTwo, addThree, square);
console.log(processNumber(5)); // ((5 * 2) + 3) ** 2 = 121
pipe используется для работы с потоками данных, где через него можно передавать операторы, такие как map, filter, mergeMap и другие.import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';
// Создаем поток данных
const numbers$ = of(1, 2, 3, 4, 5);
// Используем pipe для применения операторов
numbers$
.pipe(
filter((num) => num % 2 === 0), // Оставляем только четные
map((num) => num * 10) // Умножаем их на 10
)
.subscribe((result) => console.log(result));
// Вывод: 20, 4029 Jan, 16:10
29 Jan, 09:10
state) или свойства (props) изменяются. Однако часто это приводит к ненужным рендерам, которые можно избежать.React.memo, чтобы предотвращать ререндеринг компонента, если его props не изменились.import React from 'react';
const MyComponent = React.memo(({ count }) => {
console.log('Рендер компонента');
return <div>Счётчик: {count}</div>;
});
// Использование
export default function App() {
const [count, setCount] = React.useState(0);
return (
<div>
<MyComponent count={count} />
<button onClick={() => setCount(count + 1)}>Увеличить</button>
</div>
);
}
import React, { useMemo } from 'react';
function ExpensiveCalculationComponent({ number }) {
const calculatedValue = useMemo(() => {
console.log('Выполняются сложные вычисления...');
return number ** 2;
}, [number]); // Пересчитывается только если `number` изменился
return <div>Результат: {calculatedValue}</div>;
}useCallbackimport React, { useCallback, useState } from 'react';
const Child = React.memo(({ onClick }) => {
console.log('Рендер дочернего компонента');
return <button onClick={onClick}>Кликни меня</button>;
});
function Parent() {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
console.log('Кнопка нажата');
}, []); // Создаётся одна и та же функция между рендерами
return (
<div>
<Child onClick={handleClick} />
<button onClick={() => setCount(count + 1)}>Увеличить {count}</button>
</div>
);
}React.lazy и Suspense позволяет загружать компоненты только тогда, когда они необходимы.import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<div>Загрузка...</div>}>
<LazyComponent />
</Suspense>
);
}React.useEffect(() => {
console.log('Эффект сработал!');
}, [/* следите только за нужными зависимостями */]);props вызывает лишние рендеры.<ChildComponent data={{ key: 'value' }} />const data = { key: 'value' };
<ChildComponent data={data} />;{items.map(item => (
<div key={item.id}>{item.name}</div>
))}28 Jan, 16:10
28 Jan, 09:10
ArrayList или HashMap) или при вызове методов, ожидающих объект в качестве аргумента.Object, а после боксинга это становится возможным.int, double или boolean, автоматически упаковываются в их соответствующие классы-обертки, такие как Integer, Double и Boolean. Это действие называется автобоксингом.// Боксинг вручную
int primitiveInt = 42;
Integer boxedInt = Integer.valueOf(primitiveInt); // Боксинг
// Автобоксинг
Integer autoBoxedInt = 42; // Примитив int автоматически упакован в Integer
// Распаковка (unboxing)
int unboxedInt = autoBoxedInt; // Integer автоматически преобразован обратно в int
ArrayList) работают только с объектами. Поэтому, если вы хотите сохранить int в коллекции, он автоматически упаковывается в Integer.import java.util.ArrayList;
public class Example {
public static void main(String[] args) {
ArrayList<Integer> numbers = new ArrayList<>();
numbers.add(10); // Автобоксинг: int превращается в Integer
numbers.add(20);
int num = numbers.get(0); // Авто-распаковка: Integer превращается в int
System.out.println(num); // 10
}
}
27 Jan, 16:10
27 Jan, 09:10
menu).menu__item).menu__item--active).<div class="menu">
<div class="menu__item menu__item--active">Главная</div>
<div class="menu__item">О нас</div>
<div class="menu__item">Контакты</div>
</div>
<!-- Атом -->
<button class="button">Клик</button>
<!-- Молекула -->
<div class="form">
<label class="form__label">Имя</label>
<input class="form__input" type="text">
</div>
26 Jan, 16:10
26 Jan, 09:10
createContext. Она возвращает объект контекста, который содержит два компонента: Provider и Consumer. import React, { createContext, useState } from 'react';
const MyContext = createContext();
Provider используется для предоставления значения контекста всем дочерним компонентам. Все компоненты внутри Provider могут получить доступ к значениям, переданным в value. const MyProvider = ({ children }) => {
const [state, setState] = useState('Hello World');
return (
<MyContext.Provider value={{ state, setState }}>
{children}
</MyContext.Provider>
);
};
createContext, и возвращает текущее значение контекста. import React, { useContext } from 'react';
const MyComponent = () => {
const { state, setState } = useContext(MyContext);
return (
<div>
<p>{state}</p>
<button onClick={() => setState('New Value')}>Change Value</button>
</div>
);
};
import React, { createContext, useState, useContext } from 'react';
// Создание контекста
const MyContext = createContext();
const MyProvider = ({ children }) => {
const [state, setState] = useState('Hello World');
return (
<MyContext.Provider value={{ state, setState }}>
{children}
</MyContext.Provider>
);
};
const MyComponent = () => {
const { state, setState } = useContext(MyContext);
return (
<div>
<p>{state}</p>
<button onClick={() => setState('New Value')}>Change Value</button>
</div>
);
};
const App = () => (
<MyProvider>
<MyComponent />
</MyProvider>
);
export default App;25 Jan, 16:10
25 Jan, 09:10
const app = Vue.createApp({
data() {
return {
message: "Привет, мир!"
};
}
}).mount('#app');<div id="app">
<p>{{ message }}</p>
<button @click="message = 'Изменено!'">Изменить сообщение</button>
</div>
Vue.component('my-button', {
template: `<button @click="clickHandler">Нажми меня</button>`,
methods: {
clickHandler() {
alert('Нажали кнопку!');
}
}
});<my-button></my-button>
vue-router.$('#element').hide(); // Работает во всех браузерах$('#button').click(function() {
$('#text').text('Кнопка нажата');
});$.ajax({
url: '/api/data',
method: 'GET',
success: function(data) {
console.log(data);
}
});$('#button').on('click', function() {
alert('Кнопка нажата!');
});$('#element').fadeIn();24 Jan, 16:10
24 Jan, 09:10
var. Однако у него были проблемы, такие как отсутствие блочной области видимости и возможность повторного объявления. С введением let и const эти проблемы решены.let — для переменных, которые могут изменяться.const — для переменных, которые нельзя переназначить (но можно изменять содержимое, если это объект или массив).let a = 10;
a = 20; // Работает
const b = 30;
// b = 40; // Ошибка: Нельзя переназначить
this, а используют this из окружающего контекста.// Обычная функция
function add(a, b) {
return a + b;
}
// Стрелочная функция
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5
+). Шаблонные строки (обозначаются обратными кавычками ``) позволяют вставлять переменные и выражения прямо в текст.const name = "Alice";
const message = `Привет, ${name}! Добро пожаловать.`;
console.log(message); // Привет, Alice! Добро пожаловать.
// Деструктуризация массива
const arr = [1, 2, 3];
const [first, second] = arr;
console.log(first, second); // 1, 2
// Деструктуризация объекта
const user = { name: "Alice", age: 25 };
const { name, age } = user;
console.log(name, age); // Alice 25
import и export. Теперь код можно организовывать и повторно использовать более эффективно.// В модуле user.js
export const greet = (name) => `Привет, ${name}`;
// В другом файле
import { greet } from './user.js';
console.log(greet("Alice")); // Привет, Alice
... используется для работы с массивами, объектами и функциями.// Spread
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
console.log(arr2); // [1, 2, 3, 4]
// Rest
const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest); // [2, 3, 4]
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} говорит.`);
}
}
const dog = new Animal("Собака");
dog.speak(); // Собака говорит.Promises) упрощают работу с асинхронным кодом, заменяя вложенные колбэки (callback hell).const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => resolve("Данные получены"), 1000);
});
};
fetchData().then((data) => console.log(data)); // Данные полученыfunction* numbers() {
yield 1;
yield 2;
yield 3;
}
const gen = numbers();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 323 Jan, 16:10
23 Jan, 09:10
let arr = [1, 2, 3, 4, 5];
arr.length = 0;
console.log(arr); // []
let arr = [1, 2, 3, 4, 5];
arr = [];
console.log(arr); // []
let arr = [1, 2, 3, 4, 5];
let reference = arr;
arr = [];
console.log(arr); // []
console.log(reference); // [1, 2, 3, 4, 5]
splice позволяет удалять элементы из массива. Если указать удаление всех элементов, массив станет пустым.let arr = [1, 2, 3, 4, 5];
arr.splice(0, arr.length);
console.log(arr); // []
let arr = [1, 2, 3, 4, 5];
while (arr.length > 0) {
arr.pop(); // Удаляем последний элемент
}
console.log(arr); // []
22 Jan, 17:10
22 Jan, 16:10
22 Jan, 11:29
22 Jan, 09:10
add(2, 3) результат будет 5.function add(a, b) {
return a + b;
}console.log(add(2, 3)); // Должно вывести 5
console.log(add(0, 0)); // Должно вывести 0
console.log(add(-1, -1)); // Должно вывести -2
test('add function works correctly', () => {
expect(add(2, 3)).toBe(5);
expect(add(0, 0)).toBe(0);
expect(add(-1, -1)).toBe(-2);
});add() вместо двух чисел).console.log(add()); // undefined или ошибка
console.log(add('2', 3)); // Может вернуть '23' или ошибку, если функция не проверяет типы
performance.now() в JavaScript, позволяют измерять время выполнения функций.21 Jan, 16:10
21 Jan, 09:10
Web Worker, необходимо использовать метод terminate(). Этот метод останавливает выполнение worker'а, освобождает связанные с ним ресурсы и завершает его работу. После вызова terminate() объект worker больше не может быть использован.terminate() на экземпляре объекта worker. Это мгновенно останавливает выполнение фонового скрипта.// Создаем worker
const myWorker = new Worker('worker.js');
// Выполняем какие-то операции через worker
myWorker.postMessage('Hello, worker!');
// Завершаем работу worker, когда он больше не нужен
myWorker.terminate();
terminate() worker полностью уничтожается и больше не может отправлять или получать сообщения.onmessage), они автоматически удаляются.terminate() не приведет к ошибке, но никакие операции через него больше работать не будут.const worker = new Worker('worker.js');
// Отправляем сообщение
worker.postMessage('Start working');
// Завершаем работу worker
worker.terminate();
// Попытка отправить сообщение после уничтожения worker
worker.postMessage('Will this work?'); // Ничего не произойдет, worker уже завершен20 Jan, 16:10
20 Jan, 09:10
var globalVar = 'Я глобальная переменная';
function testFunction() {
console.log(globalVar); // Доступно
}
testFunction();
console.log(globalVar); // Доступно
var внутри функции, имеют область видимости, ограниченную этой функцией. Они недоступны за её пределами.function testFunction() {
var functionVar = 'Я внутри функции';
console.log(functionVar); // Доступно
}
testFunction();
console.log(functionVar); // Ошибка: переменная functionVar недоступнаlet и const, имеют область видимости, ограниченную ближайшим блоком {}.if (true) {
let blockVar = 'Я внутри блока';
console.log(blockVar); // Доступно
}
console.log(blockVar); // Ошибка: переменная blockVar недоступнаimport и export в ES6), все переменные и функции в модуле имеют собственную область видимости. Они не попадают в глобальную область видимости.export const myVar = 'Я переменная из модуля';
import { myVar } from './module1.js';
console.log(myVar); // "Я переменная из модуля"19 Jan, 16:10
19 Jan, 09:10
resolve) или отклонения (reject), он остаётся в этом состоянии навсегда.const myPromise = new Promise((resolve, reject) => {
resolve('Done!');
});
myPromise.then((result) => console.log(result)); // "Done!"
// Даже если вы попытаетесь вызвать resolve или reject снова, ничего не произойдет
myPromise.then((result) => console.log(result)); // "Done!" (результат уже закеширован)function createPromise() {
return new Promise((resolve, reject) => {
setTimeout(() => resolve('Я новый промис!'), 1000);
});
}
// Первый вызов
createPromise().then((result) => console.log(result)); // "Я новый промис!"
// "Перезапуск"
createPromise().then((result) => console.log(result)); // "Я новый промис!" (новый промис создан)async function fetchData() {
return new Promise((resolve) => {
setTimeout(() => resolve('Данные загружены!'), 1000);
});
}
async function main() {
const data1 = await fetchData();
console.log(data1); // "Данные загружены!"
const data2 = await fetchData(); // "Перезапуск" fetchData
console.log(data2); // "Данные загружены!"
}
main();function fetchDataWithRetry(retries) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() > 0.7) { // 70% шансов на ошибку
resolve('Данные успешно загружены!');
} else {
reject('Ошибка загрузки данных');
}
}, 1000);
}).catch((error) => {
if (retries > 0) {
console.log(`Повторная попытка... Осталось: ${retries}`);
return fetchDataWithRetry(retries - 1); // Рекурсивный вызов
} else {
throw error; // Если попытки исчерпаны, выбрасываем ошибку
}
});
}
fetchDataWithRetry(3)
.then((data) => console.log(data))
.catch((error) => console.error(error));18 Jan, 16:10
18 Jan, 09:10
100% в CSS основывается на родительском элементе. Рассмотрим различные случаи и подходы.<div style="width: 300px; background: lightblue;">
<div style="width: 100%; background: coral;">Я растянут по ширине!</div>
</div>
<div style="height: 300px; background: lightblue;">
<div style="height: 100%; background: coral;">Я растянут по высоте!</div>
</div>
width: 100%; и height: 100%;.<div style="width: 300px; height: 300px; background: lightblue;">
<div style="width: 100%; height: 100%; background: coral;">Растянут по ширине и высоте!</div>
</div>
100vw (ширина окна) и 100vh (высота окна).<div style="width: 100vw; height: 100vh; background: coral;">
Я растянут на весь экран!
</div>
width: calc(100vw - 16px); /* Учитывается ширина скролла */
position: absolute.<div style="position: relative; width: 300px; height: 300px; background: lightblue;">
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: coral;">
Я растянут абсолютно!
</div>
</div>
flex: 1 или align-items: stretch.<div style="display: flex; width: 300px; height: 300px; background: lightblue;">
<div style="flex: 1; background: coral;">Я растянут по Flexbox!</div>
</div>
<div style="display: grid; width: 300px; height: 300px; background: lightblue;">
<div style="width: 100%; height: 100%; background: coral;">Я растянут внутри Grid!</div>
</div>
box-sizing: border-box. Это гарантирует, что элемент с width: 100% и height: 100% не будет "выходить за пределы" из-за отступов.<div style="width: 300px; height: 300px; background: lightblue;">
<div style="width: 100%; height: 100%; padding: 20px; box-sizing: border-box; background: coral;">
Я растянут с учетом отступов!
</div>
</div>
17 Jan, 16:10
17 Jan, 09:10
<a href="../contact.html">Контакты</a>
<a href="https://example.com/contact.html">Контакты</a>
<a href="page.html">Страница</a> <!-- Ресурс в текущем каталоге -->
..) для перехода на уровень выше.<a href="../folder/page.html">Страница</a> <!-- Подъем на один уровень вверх -->
/.<a href="/images/photo.jpg">Фото</a> <!-- Начало пути от корня сайта -->
localhost), вам не нужно указывать абсолютный путь с доменом.<a href="file.html">Файл в текущей папке</a>
<a href="subfolder/file.html">Файл в подкаталоге</a>
<a href="../file.html">Файл в родительской папке</a>
<a href="/folder/file.html">Файл в папке от корня</a>
16 Jan, 16:10
16 Jan, 09:10
<div> с ID), а приложение загружается, рендерится и управляется на стороне клиента. Сервер отправляет статический HTML (например, через index.html), а JavaScript (чаще всего — библиотека/фреймворк, например React, Vue или Angular) загружает необходимые данные и динамически создает интерфейс.<div id="app"></div>
<script src="bundle.js"></script>
npm run build
revalidate). После этого сервер пересоберет страницу и кэширует ее.export async function getStaticProps() {
return {
props: {
data: fetchData(),
},
revalidate: 60, // Обновлять страницу каждые 60 секунд
};
}15 Jan, 16:10
15 Jan, 09:10
::), за которым следует название псевдоэлемента. Например, ::before или ::after.::before и ::after: Позволяют вставлять содержимое до или после содержимого выбранного элемента соответственно. Очень часто используются для добавления декоративных элементов. p::before {
content: "«";
color: blue;
}
p::after {
content: "»";
color: blue;
}
::first-line: Применяет стили к первой строке текста в блочном элементе. p::first-line {
font-weight: bold;
}
::first-letter: Применяет стили к первой букве текста в блочном элементе. p::first-letter {
font-size: 200%;
}
::selection: Применяет стили к части текста, которую пользователь выделил. p::selection {
background: yellow;
}
::before и ::after отображались, необходимо задать свойство content, даже если оно пустое (content: "";).15 Jan, 07:00
14 Jan, 16:10
14 Jan, 09:10
main и feature.feature вы сделали несколько коммитов.feature в main.git checkout main
git merge feature
main и feature.feature вы сделали несколько коммитов.feature на текущий конец main.git checkout feature
git rebase main
14 Jan, 07:00
13 Jan, 16:10
13 Jan, 09:10
<h1>.<h2>, и так далее.<h1>Главный заголовок страницы</h1>
<h2>Раздел 1</h2>
<h3>Подраздел 1.1</h3>
<h3>Подраздел 1.2</h3>
<h2>Раздел 2</h2>
<h3>Подраздел 2.1</h3>
<h4>Подраздел 2.1.1</h4>
<h1> → <h2> → <h3> и так далее, без "перескакивания". Избегайте "пропуска уровней" (например, от <h2> сразу к <h4>).F12 или Ctrl+Shift+I). Перейдите на вкладку "Elements" (Элементы). Найдите заголовки (<h1>, <h2> и так далее) и проверьте их последовательность.const headings = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')];
headings.forEach((heading, index) => {
console.log(`${index + 1}: ${heading.tagName} - ${heading.textContent.trim()}`);
});<h1>Главный заголовок</h1>
<h3>Подраздел</h3> <!-- Пропущен <h2> -->
<h1>Главный заголовок</h1>
<h2>Подраздел</h2>
<h1> на одной странице<h1>Главный заголовок</h1>
<h1>Еще один заголовок</h1>
<h1>Главный заголовок</h1>
<h2>Еще один заголовок</h2>
12 Jan, 16:10
12 Jan, 09:10
let, она имеет блочную область видимости (block scope), ограничивая доступность переменной блоком (например, циклом или условным оператором), в котором была объявлена.const предотвращает переназначение самой переменной, но не защищает содержимое объекта от изменений.undefined.let, ее объявления тоже поднимаются, но доступ к переменной до её объявления в коде приведёт к ошибке ReferenceError. Это явление известно как "временная мертвая зона".undefined.var varVariable = 1;
varVariable = 2; // Переназначение возможно
const constVariable = { a: 1 };
constVariable.a = 2; // Изменение содержимого объекта возможно
// constVariable = { b: 3 }; // Переназначение вызовет ошибкуif (true) {
var varScope = "доступна везде в функции";
const constScope = "доступна только в этом блоке";
}
console.log(varScope); // Выведет строку
console.log(constScope); // Ошибка: constScope не определена11 Jan, 16:10
11 Jan, 09:10
10 Jan, 16:10
10 Jan, 09:10
Web Worker, необходимо использовать метод terminate(). Этот метод останавливает выполнение worker'а, освобождает связанные с ним ресурсы и завершает его работу. После вызова terminate() объект worker больше не может быть использован.terminate() на экземпляре объекта worker. Это мгновенно останавливает выполнение фонового скрипта.// Создаем worker
const myWorker = new Worker('worker.js');
// Выполняем какие-то операции через worker
myWorker.postMessage('Hello, worker!');
// Завершаем работу worker, когда он больше не нужен
myWorker.terminate();
terminate() worker полностью уничтожается и больше не может отправлять или получать сообщения.onmessage), они автоматически удаляются.terminate() не приведет к ошибке, но никакие операции через него больше работать не будут.const worker = new Worker('worker.js');
// Отправляем сообщение
worker.postMessage('Start working');
// Завершаем работу worker
worker.terminate();
// Попытка отправить сообщение после уничтожения worker
worker.postMessage('Will this work?'); // Ничего не произойдет, worker уже завершен10 Jan, 07:14
09 Jan, 16:10
09 Jan, 12:56
09 Jan, 09:10
stopPropagation.<div id="parent" style="padding: 20px; background: lightblue;">
Родительский элемент
<button id="child">Дочерний элемент</button>
</div>
<script>
document.getElementById("parent").addEventListener("click", () => {
alert("Событие всплыло до родителя");
});
document.getElementById("child").addEventListener("click", (event) => {
alert("Событие на кнопке");
event.stopPropagation(); // Остановим всплытие
});
</script>
stopPropagation), предотвращает выполнение других обработчиков на том же элементе. Если у одного и того же элемента есть несколько обработчиков для одного события, stopImmediatePropagation гарантирует, что после его вызова остальные обработчики не будут выполнены.<button id="myButton">Нажми меня</button>
<script>
const button = document.getElementById("myButton");
button.addEventListener("click", () => {
alert("Обработчик 1");
});
button.addEventListener("click", (event) => {
alert("Обработчик 2");
event.stopImmediatePropagation(); // Остановим все остальные обработчики
});
button.addEventListener("click", () => {
alert("Обработчик 3"); // Этот обработчик не выполнится
});
</script>
preventDefault можно предотвратить это поведение.<a href="https://example.com" id="link">Перейти на сайт</a>
<script>
const link = document.getElementById("link");
link.addEventListener("click", (event) => {
event.preventDefault(); // Останавливаем переход по ссылке
alert("Поведение ссылки отменено");
});
</script>
preventDefault. Этот модификатор помогает оптимизировать обработку событий, таких как прокрутка (scroll), делая их более производительными. Некоторые браузеры при обработке событий (например, touchstart или wheel) предполагают, что вы можете использовать preventDefault. Это замедляет прокрутку, так как браузеру нужно ждать завершения вашего обработчика. Указав passive: true, вы говорите браузеру, что не собираетесь отменять поведение.window.addEventListener("scroll", () => {
console.log("Скролл работает");
}, { passive: true });08 Jan, 16:10
08 Jan, 09:10
blur.blur используется для выполнения действий, когда пользователь перестает взаимодействовать с элементом ввода. Например: Проверка корректности данных (валидация) после того, как пользователь заполнил поле.blur помогает реализовать логику, связанную с завершением работы с конкретным элементом формы.blur срабатывает, когда элемент теряет фокус, то есть пользователь:focus, которое возникает при получении фокуса, blur позволяет отследить момент завершения работы с элементом.onblur).addEventListener.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример blur</title>
<script>
function validateInput(event) {
const input = event.target;
if (input.value.trim() === "") {
alert("Поле не должно быть пустым!");
}
}
document.addEventListener("DOMContentLoaded", () => {
const inputElement = document.getElementById("name");
inputElement.addEventListener("blur", validateInput);
});
</script>
</head>
<body>
<form>
<label for="name">Введите имя:</label>
<input type="text" id="name" name="name" />
<button type="submit">Отправить</button>
</form>
</body>
</html>
blur не поддерживает всплытие (то есть не распространяется вверх по дереву DOM). Если нужно отслеживать потерю фокуса на уровне родительских элементов, используется делегирование с помощью события focusout.// Работает только для конкретного элемента
element.addEventListener("blur", handler);
// Для делегирования используют focusout
parentElement.addEventListener("focusout", handler);
change срабатывает только после изменения значения элемента и потери фокуса, тогда как blur срабатывает в любом случае при потере фокуса, независимо от того, менялось ли значение.07 Jan, 16:10
07 Jan, 09:10
<div class="parent">
<p>Текст в параграфе.</p>
<div class="child">
<p>Другой текст в параграфе.</p>
</div>
</div>
.parent p {
color: blue;
font-size: 16px;
}
.child p {
font-size: 14px;
}07 Jan, 07:00
06 Jan, 16:10
06 Jan, 09:10
npm init -y
npm install eslint --save-dev
.eslintrc: npx eslint --init
npx eslint имя_файла.js
app.js, выполнитеnpx eslint app.js
--fix, чтобы исправить ошибки, которые можно исправить автоматически:npx eslint имя_файла.js --fix
package.json. Откройте package.json и добавьте следующий скрипт в раздел "scripts":"scripts": {
"lint": "eslint ."
} npm run lint
{
"env": {
"browser": true,
"es2021": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
"indent": ["error", 4],
"linebreak-style": ["error", "unix"],
"quotes": ["error", "single"],
"semi": ["error", "always"]
}
}05 Jan, 16:10
05 Jan, 09:10
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
componentDidMount() {
// Получаем доступ к DOM-элементу через реф
this.myRef.current.focus();
}
render() {
return <input type="text" ref={this.myRef} />;
}
}
export default MyComponent;import React, { useRef, useEffect } from 'react';
const MyComponent = () => {
const myRef = useRef(null);
useEffect(() => {
// Получаем доступ к DOM-элементу через реф
myRef.current.focus();
}, []);
return <input type="text" ref={myRef} />;
};
export default MyComponent;document.getElementById или document.querySelector. Это не рекомендуется, так как это противоречит философии React по работе с виртуальным DOM, но может быть полезно в некоторых случаях.import React, { useEffect } from 'react';
const MyComponent = () => {
useEffect(() => {
const element = document.getElementById('my-element');
element.style.color = 'red';
}, []);
return <div id="my-element">Hello, world!</div>;
};
export default MyComponent;import React, { useRef, useLayoutEffect } from 'react';
const MyComponent = () => {
const myRef = useRef(null);
useLayoutEffect(() => {
// Получаем доступ к DOM-элементу через реф
myRef.current.style.color = 'blue';
}, []);
return <div ref={myRef}>Hello, world!</div>;
};
export default MyComponent;04 Jan, 16:10
04 Jan, 09:10
console.log('Start');
setTimeout(() => {
console.log('Macrotask: setTimeout');
}, 0);
Promise.resolve()
.then(() => {
console.log('Microtask 1');
Promise.resolve().then(() => {
console.log('Microtask 2');
});
})
.then(() => {
console.log('Microtask 3');
});
console.log('End');console.log('Start') console.log('End')setTimeout.Promise.resolve().then(...).Start
End
Microtask 1
Microtask 2
Microtask 3
Macrotask: setTimeout
03 Jan, 16:10
03 Jan, 09:10
02 Jan, 16:10
02 Jan, 09:10
function fetchData(callback) {
setTimeout(() => {
const data = "some data";
callback(data);
}, 1000);
}
fetchData((result) => {
console.log(result);
});function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = "some data";
resolve(data);
}, 1000);
});
}
fetchData().then((result) => {
console.log(result);
}).catch((error) => {
console.error(error);
});async function fetchData() {
return new Promise((resolve) => {
setTimeout(() => {
const data = "some data";
resolve(data);
}, 1000);
});
}
async function main() {
try {
const result = await fetchData();
console.log(result);
} catch (error) {
console.error(error);
}
}
main();01 Jan, 16:10
01 Jan, 09:10
box-sizing в CSS определяют, как учитываются отступы (padding) и рамки (border) при расчете размера элемента (width и height). Это влияет на окончательные размеры и внешний вид элемента на странице.box-sizing: content-box, ширина и высота элемента включают только содержимое (content), но не включают отступы и рамки..element {
box-sizing: content-box; /* значение по умолчанию */
width: 200px;
padding: 20px;
border: 10px solid black;
}border-box, размеры элемента (width и height) включают содержимое, отступы и рамки. Это делает расчет размеров более простым и предсказуемым..element {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 10px solid black;
}<div class="content-box">Content-box</div>
<div class="border-box">Border-box</div>
div {
margin: 10px;
padding: 20px;
border: 10px solid black;
}
.content-box {
box-sizing: content-box;
width: 200px;
height: 100px;
}
.border-box {
box-sizing: border-box;
width: 200px;
height: 100px;
}31 Dec, 16:10
31 Dec, 09:10
loading="lazy" в HTML).async и defer для асинхронной загрузки JavaScript, чтобы не блокировать рендеринг страницы. Встраивайте критические стили прямо в HTML, чтобы ускорить начальную отрисовку страницы.<img src="example.jpg" loading="lazy" alt="Пример изображения">
30 Dec, 16:10
30 Dec, 09:10
Proxy является мощным и гибким способом перехвата и настройки операций с объектами, включая чтение и запись свойств.const handler = {
get(target, property) {
console.log(`Getting value of ${property}`);
return target[property];
},
set(target, property, value) {
console.log(`Setting value of ${property} to ${value}`);
target[property] = value;
return true;
}
};
const person = {
name: 'Alice',
age: 25
};
const proxyPerson = new Proxy(person, handler);
proxyPerson.name = 'Bob'; // Setting value of name to Bob
console.log(proxyPerson.name); // Getting value of name // BobObject.defineProperty позволяет определить новое или изменить существующее свойство непосредственно на объекте, позволяя добавить геттеры и сеттеры для отслеживания изменений.const person = {
_name: 'Alice',
_age: 25
};
Object.defineProperty(person, 'name', {
get() {
console.log('Getting name');
return this._name;
},
set(value) {
console.log(`Setting name to ${value}`);
this._name = value;
}
});
Object.defineProperty(person, 'age', {
get() {
console.log('Getting age');
return this._age;
},
set(value) {
console.log(`Setting age to ${value}`);
this._age = value;
}
});
person.name = 'Bob'; // Setting name to Bob
console.log(person.name); // Getting name // Bob
person.age = 30; // Setting age to 30
console.log(person.age); // Getting age // 30import { observable, autorun } from 'mobx';
const person = observable({
name: 'Alice',
age: 25,
setName(name) {
this.name = name;
},
setAge(age) {
this.age = age;
}
});
// Автоматически вызываемая функция при изменении наблюдаемого состояния
autorun(() => {
console.log(`Name: ${person.name}, Age: ${person.age}`);
});
person.setName('Bob'); // Name: Bob, Age: 25
person.setAge(30); // Name: Bob, Age: 30MutationObserver. Это не напрямую связано с объектами, но полезно для отслеживания изменений в элементах DOM.const targetNode = document.getElementById('target');
const config = { attributes: true, childList: true, subtree: true };
const callback = function(mutationsList, observer) {
for(let mutation of mutationsList) {
if (mutation.type === 'childList') {
console.log('A child node has been added or removed.');
}
else if (mutation.type === 'attributes') {
console.log('The ' + mutation.attributeName + ' attribute was modified.');
}
}
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
targetNode.setAttribute('data-test', 'value');29 Dec, 16:10
29 Dec, 09:10
Proxy в JavaScript позволяет перехватывать и настраивать операции, выполняемые с объектом, такие как чтение и запись свойств.const handler = {
get(target, property) {
console.log(`Getting value of ${property}`);
return target[property];
},
set(target, property, value) {
console.log(`Setting value of ${property} to ${value}`);
target[property] = value;
return true;
}
};
const person = {
name: 'Alice',
age: 25
};
const proxyPerson = new Proxy(person, handler);
proxyPerson.name = 'Bob'; // Setting value of name to Bob
console.log(proxyPerson.name); // Getting value of name // Bobnpm install mobx mobx-react
import { observable, autorun } from 'mobx';
import { observer } from 'mobx-react';
import React from 'react';
import ReactDOM from 'react-dom';
const appState = observable({
count: 0,
increment() {
this.count++;
}
});
autorun(() => {
console.log(`Count: ${appState.count}`);
});
appState.increment(); // Count: 1
appState.increment(); // Count: 2
const Counter = observer(() => (
<div>
<p>Count: {appState.count}</p>
<button onClick={() => appState.increment()}>Increment</button>
</div>
));
ReactDOM.render(<Counter />, document.getElementById('root'));const handler = {
set(target, property, value) {
console.log(`Setting value of ${property} to ${value}`);
target[property] = value;
document.getElementById(property).innerText = value;
return true;
}
};
const state = {
count: 0
};
const proxyState = new Proxy(state, handler);
document.getElementById('increment').addEventListener('click', () => {
proxyState.count++;
});
<div>
<p id="count">0</p>
<button id="increment">Increment</button>
</div>
<script src="path/to/your/script.js"></script>
28 Dec, 16:10
28 Dec, 09:10
[].let propName = 'name';
let person = {
[propName]: 'Alice'
};
console.log(person.name); // 'Alice'
let key = 'age';
let person = {
name: 'Alice',
[key]: 25
};
console.log(person.name); // 'Alice'
console.log(person.age); // 25
let i = 0;
let obj = {
['prop_' + ++i]: i,
['prop_' + ++i]: i,
['prop_' + ++i]: i
};
console.log(obj); // { prop_1: 1, prop_2: 2, prop_3: 3 }
let prefix = 'user';
let index = 1;
let users = {
[prefix + index]: { name: 'Alice' },
[prefix + (index + 1)]: { name: 'Bob' }
};
console.log(users.user1.name); // 'Alice'
console.log(users.user2.name); // 'Bob'
function createKey(base, index) {
return base + index;
}
let obj = {
[createKey('key', 1)]: 'value1',
[createKey('key', 2)]: 'value2'
};
console.log(obj.key1); // 'value1'
console.log(obj.key2); // 'value2'let studentName1 = 'Alice';
let studentName2 = 'Bob';
let grades = {
[studentName1]: 85,
[studentName2]: 92
};
console.log(grades.Alice); // 85
console.log(grades.Bob); // 92
function getFilterKey(filterName) {
return `filter_${filterName}`;
}
let filters = {};
filters[getFilterKey('age')] = 25;
filters[getFilterKey('location')] = 'New York';
console.log(filters); // { filter_age: 25, filter_location: 'New York' }27 Dec, 16:10
27 Dec, 09:10
type, указывающее тип экшна. Дополнительно могут быть добавлены другие свойства для передачи данных.const incrementAction = {
type: 'INCREMENT'
};
const addTodoAction = {
type: 'ADD_TODO',
payload: {
id: 1,
text: 'Learn Redux'
}
};const increment = () => {
return {
type: 'INCREMENT'
};
};
const addTodo = (id, text) => {
return {
type: 'ADD_TODO',
payload: {
id,
text
}
};
};const initialState = {
count: 0,
todos: []
};
const rootReducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return {
...state,
count: state.count + 1
};
case 'ADD_TODO':
return {
...state,
todos: [...state.todos, action.payload]
};
default:
return state;
}
};npm install redux react-redux
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
const incrementAction = { type: 'INCREMENT' };
const addTodoAction = {
type: 'ADD_TODO',
payload: { id: 1, text: 'Learn Redux' }
}; const increment = () => ({ type: 'INCREMENT' });
const addTodo = (id, text) => ({
type: 'ADD_TODO',
payload: { id, text }
}); const rootReducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return { ...state, count: state.count + 1 };
case 'ADD_TODO':
return { ...state, todos: [...state.todos, action.payload] };
default:
return state;
}
};26 Dec, 16:10
26 Dec, 09:10
state) action)const reducer = (state, action) => {
switch (action.type) {
case 'ACTION_TYPE':
// Возвращаем новое состояние
return {
...state,
// Обновляем определенные свойства
};
default:
return state;
}
};const initialState = {
count: 0
};const counterReducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return {
...state,
count: state.count + 1
};
case 'DECREMENT':
return {
...state,
count: state.count - 1
};
default:
return state;
}
};useReducer для управления состоянием с помощью редьюсера в функциональных компонентах.import React, { useReducer } from 'react';
const initialState = { count: 0 };
const counterReducer = (state, action) => {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
};
const Counter = () => {
const [state, dispatch] = useReducer(counterReducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
<button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
</div>
);
};
export default Counter;25 Dec, 09:10
useEffect. Когда компонент демонтируется, React вызывает функцию очистки, которую можно определить внутри useEffect.useEffect позволяет выполнять побочные эффекты в функциональных компонентах. Функция очистки, возвращаемая из useEffect, выполняется при демонтировании компонента.import React, { useEffect } from 'react';
const MyComponent = () => {
useEffect(() => {
console.log('Component mounted');
// Функция очистки вызывается при демонтировании компонента
return () => {
console.log('Component will unmount');
};
}, []); // Пустой массив зависимостей означает, что эффект выполнится только при монтировании и демонтировании
return (
<div>
<p>My Component</p>
</div>
);
};
export default MyComponent;useEffect useEffect(() => {
console.log('Component mounted');
return () => {
console.log('Component will unmount');
};
}, []);
import React, { useEffect, useState } from 'react';
const WebSocketComponent = () => {
const [messages, setMessages] = useState([]);
useEffect(() => {
const socket = new WebSocket('ws://example.com/socket');
socket.onmessage = (event) => {
setMessages((prevMessages) => [...prevMessages, event.data]);
};
console.log('WebSocket connection opened');
return () => {
socket.close();
console.log('WebSocket connection closed');
};
}, []);
return (
<div>
<h1>WebSocket Messages</h1>
<ul>
{messages.map((message, index) => (
<li key={index}>{message}</li>
))}
</ul>
</div>
);
};
export default WebSocketComponent;const socket = new WebSocket('ws://example.com/socket'); socket.onmessage = (event) => {
setMessages((prevMessages) => [...prevMessages, event.data]);
};
return () => {
socket.close();
console.log('WebSocket connection closed');
};
24 Dec, 16:10
24 Dec, 09:10
useState позволяет добавить состояние в функциональный компонент.import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
export default Counter;useContext позволяет использовать контекст для передачи данных через дерево компонентов без необходимости передавать пропсы на промежуточных уровнях.import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');
const ThemedComponent = () => {
const theme = useContext(ThemeContext);
return <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
The current theme is {theme}
</div>;
};
const App = () => {
return (
<ThemeContext.Provider value="dark">
<ThemedComponent />
</ThemeContext.Provider>
);
};
export default App;useReducer — это альтернатива useState для управления более сложным состоянием в компоненте.import React, { useReducer } from 'react';
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}
const Counter = () => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
};
export default Counter;useRef возвращает изменяемый объект-реф, который сохраняется при повторных рендерах компонента. Это часто используется для доступа к DOM-элементам или для сохранения переменных, которые не вызывают повторный рендер при изменении.import React, { useRef } from 'react';
const TextInputWithFocusButton = () => {
const inputEl = useRef(null);
const onButtonClick = () => {
// "current" указывает на смонтированный элемент input
inputEl.current.focus();
};
return (
<div>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</div>
);
};
export default TextInputWithFocusButton;23 Dec, 16:10
23 Dec, 09:10
import React, { useState } from 'react';
const ControlledComponent = () => {
const [inputValue, setInputValue] = useState('');
const handleChange = (event) => {
setInputValue(event.target.value);
};
return (
<div>
<label>
Name:
<input type="text" value={inputValue} onChange={handleChange} />
</label>
<p>Current value: {inputValue}</p>
</div>
);
};
export default ControlledComponent;onChange) и обновляют состояние компонента.import React, { useRef } from 'react';
const UncontrolledComponent = () => {
const inputRef = useRef(null);
const handleSubmit = (event) => {
event.preventDefault();
alert('Submitted value: ' + inputRef.current.value);
};
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" ref={inputRef} />
</label>
<button type="submit">Submit</button>
</form>
);
};
export default UncontrolledComponent;useRef).22 Dec, 16:10
22 Dec, 09:10
map(), который позволяет перебрать массив и вернуть JSX для каждого элемента. Это удобный и декларативный способ создания списков элементов.import React from 'react';
const users = [
{ id: 1, name: 'Alice', age: 25 },
{ id: 2, name: 'Bob', age: 30 },
{ id: 3, name: 'Charlie', age: 35 }
];
const UserList = () => {
return (
<div>
<h1>User List</h1>
<ul>
{users.map(user => (
<li key={user.id}>
{user.name} - {user.age} years old
</li>
))}
</ul>
</div>
);
};
export default UserList;
map() {users.map(user => (
<li key={user.id}>
{user.name} - {user.age} years old
</li>
))} key<li key={user.id}> map().import React from 'react';
const users = [
{ id: 1, name: 'Alice', age: 25, email: '[email protected]' },
{ id: 2, name: 'Bob', age: 30, email: '[email protected]' },
{ id: 3, name: 'Charlie', age: 35, email: '[email protected]' }
];
const UserItem = ({ user }) => {
return (
<div className="user-item">
<h2>{user.name}</h2>
<p>Age: {user.age}</p>
<p>Email: {user.email}</p>
</div>
);
};
const UserList = () => {
return (
<div>
<h1>User List</h1>
{users.map(user => (
<UserItem key={user.id} user={user} />
))}
</div>
);
};
export default UserList;
const UserItem = ({ user }) => {
return (
<div className="user-item">
<h2>{user.name}</h2>
<p>Age: {user.age}</p>
<p>Email: {user.email}</p>
</div>
);
}; map() {users.map(user => (
<UserItem key={user.id} user={user} />
))} 21 Dec, 16:10
