Frontend | Вопросы собесов

📌 Что такое редакс? 💬 Спрашивают в 3% собеседований Redux — это библиотека для управления состоянием приложений, часто используемая с библиотекой React, но она может быть использована и с другими библиотеками или фреймворками JavaScript. Redux предоставляет централизованное хранилище (store) для всех состояний приложения, что упрощает управление и отладку состояний. 🤔 Основные концепции 1️⃣ Хранилище (store): ➕ Является объектом, который содержит все состояние приложения. В приложении может быть только одно хранилище. 2️⃣ Действия (actions): ➕ Действия — это объекты, которые отправляются в хранилище для изменения состояния. Они должны иметь тип (type), который описывает тип действия, и могут содержать дополнительные данные (payload). 3️⃣ Редюсеры (reducers): ➕ Это чистые функции, которые принимают текущее состояние и действие в качестве аргументов и возвращают новое состояние. Они описывают, как состояние приложения изменяется в ответ на действия. 4️⃣ Диспетчеры (dispatch): ➕ Отправляют действия в хранилище. Это единственный способ изменить состояние в Redux. 5️⃣ Подписки (subscriptions): ➕ Позволяют компонентам подписываться на изменения состояния в хранилище и реагировать на эти изменения. 🤔 Пример Для начала установим необходимые пакеты:

npm install redux react-redux

Создание действий (actions)

// actions.js
export const increment = () => ({
  type: 'INCREMENT',
});

export const decrement = () => ({
  type: 'DECREMENT',
});

Создание редюсера (reducer)

// reducer.js
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;
  }
};

export default counterReducer;

Создание хранилища (store)

// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

Подключение Redux к React

// index.js
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')
);

Использование состояния и действий

// App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

const App = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
};

export default App;

🤔 Преимущества 1️⃣ Централизованное управление состоянием: ➕ Все состояние приложения находится в одном месте, что упрощает управление и отладку. 2️⃣ Предсказуемость: ➕ Поскольку редюсеры являются чистыми функциями, их поведение предсказуемо, что облегчает тестирование и отладку. 3️⃣ Легкость тестирования: ➕ Действия и редюсеры легко тестировать из-за их чистоты и изолированности. 4️⃣ Возможность временной петли (time travel): ➕ Инструменты разработки Redux позволяют перемещаться по истории состояний, что облегчает отладку. Redux — это библиотека для управления состоянием приложений, предоставляющая централизованное хранилище для всех состояний. Основные концепции Redux включают хранилище (store), действия (actions), редюсеры (reducers), диспетчеры (dispatch) и подписки (subscriptions). Redux часто используется с React, но может быть применен и с другими библиотеками. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

📌 Что такое симантика ? 💬 Спрашивают в 3% собеседований Семантика в контексте веб-разработки и HTML означает использование элементов и тегов, которые четко и понятно описывают содержимое веб-страницы. Это помогает как разработчикам, так и машинам (браузерам, поисковым системам, вспомогательным технологиям) лучше понимать и интерпретировать структуру и значение содержимого. 🤔 Основные аспекты 1️⃣ Читаемость и поддержка кода: ➕ Семантический HTML делает код более читаемым и понятным для разработчиков. Когда элементы HTML четко отражают их содержимое и назначение, поддерживать и изменять код становится легче. 2️⃣ SEO (поисковая оптимизация): ➕ Поисковые системы лучше индексируют страницы, написанные с использованием семантического HTML. Это помогает улучшить видимость и рейтинг страницы в поисковых результатах. 3️⃣Доступность: ➕Семантический HTML улучшает доступность веб-страниц для пользователей с ограниченными возможностями, поскольку вспомогательные технологии, такие как экранные читалки, могут лучше интерпретировать и озвучивать содержимое. Примеры семантических HTML-элементов 1️⃣ Структурные элементы: ➕ <header>: Представляет верхний колонтитул документа или секции. ➕ <nav>: Определяет набор навигационных ссылок. ➕ <main>: Содержит основное содержимое страницы. ➕ <section>: Определяет секцию в документе. ➕ <article>: Представляет самостоятельный элемент контента, который можно независимо распространять. ➕ <aside>: Определяет содержимое, связанное с основным содержимым, но не являющееся его частью. ➕ <footer>: Представляет нижний колонтитул документа или секции. 2️⃣ Текстовые элементы: ➕ <strong>: Указывает на важность текста (часто отображается жирным шрифтом). ➕ <em>: Выделяет текст, который имеет акцент или интонацию (часто отображается курсивом). ➕ <blockquote>: Оформляет цитату. ➕ <cite>: Указывает на источник или заглавие работы. ➕ <code>: Определяет блок кода. ➕ <abbr>: Определяет аббревиатуру. 🤔 Пример:

<p>Это <strong>важное</strong> сообщение.</p>
<p>Он сказал: <blockquote>Это пример цитаты.</blockquote></p>
<p>Код: <code>console.log('Hello, World!');</code></p>
<p>Слово <abbr title="Hypertext Markup Language">HTML</abbr> означает язык гипертекстовой разметки.</p>

🤔 Важность использования 1️⃣Ясность структуры и содержания: ➕ Использование правильных семантических элементов делает структуру и содержание веб-страницы более ясными и понятными. 2️⃣ Повышение эффективности разработки: ➕ Семантический HTML упрощает сотрудничество между разработчиками и дизайнерами, а также облегчает процесс отладки и поддержания кода. ➕Долгосрочная поддержка: ➕Веб-стандарты и технологии продолжают развиваться, и использование семантического HTML помогает обеспечить долгосрочную поддержку и совместимость вашего сайта с новыми инструментами и технологиями. Семантика в HTML означает использование элементов и тегов, которые четко и понятно описывают содержимое веб-страницы. Это улучшает читаемость и поддержку кода, SEO и доступность. Семантический HTML включает такие элементы, как <header>, <nav>, <main>, <section>, <article>, <footer>, <strong>, <em>, <blockquote>, <cite>, <code> и <abbr>, которые помогают структурировать и описывать содержимое страниц. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

📌 Каким образом html превращается в страницу ? 💬 Спрашивают в 3% собеседований Процесс преобразования HTML-документа в веб-страницу, отображаемую в браузере, включает несколько ключевых этапов. Рассмотрим этот процесс шаг за шагом. 1️⃣ Загрузка HTML-документа Когда пользователь вводит URL в адресную строку браузера или переходит по ссылке, происходит запрос HTTP (или HTTPS) к серверу, на котором находится веб-страница. Сервер отвечает на этот запрос, отправляя HTML-документ. 2️⃣ Парсинг HTML-документа Браузер получает HTML-документ и начинает его парсинг. Это включает в себя разбор HTML-кода и создание структуры данных, известной как DOM (Document Object Model). 3️⃣ Построение DOM-дерева Браузер читает HTML-документ построчно, создавая узлы для каждого элемента и текста. Эти узлы образуют DOM-дерево, которое представляет структуру веб-страницы. Каждый элемент HTML превращается в объект, который браузер может использовать для дальнейших операций. 4️⃣ Загрузка внешних ресурсов В процессе парсинга HTML браузер также обнаруживает ссылки на внешние ресурсы, такие как CSS-файлы, JavaScript-файлы, изображения, шрифты и другие ресурсы. Браузер отправляет дополнительные HTTP-запросы для загрузки этих ресурсов. 5️⃣ Применение CSS и построение CSSOM После загрузки CSS-файлов браузер парсит их и строит CSSOM (CSS Object Model) — объектную модель, представляющую стили, применяемые к элементам на странице. Затем браузер объединяет DOM и CSSOM для создания рендер-дерева (render tree), которое содержит видимые элементы страницы и их стили. 6️⃣ Расчет макета (layout) Браузер рассчитывает размеры и положение каждого элемента на странице, основываясь на рендер-дереве и правилах CSS. Этот процесс известен как layout или reflow. 7️⃣ Отрисовка (painting) На этапе отрисовки браузер берет рендер-дерево и начинает преобразовывать его в пиксели на экране. Этот процесс включает рисование каждого элемента, включая текст, цвета, изображения, границы и другие стили. 8️⃣ Выполнение JavaScript Если HTML-документ содержит теги <script> или ссылки на внешние JavaScript-файлы, браузер загружает и выполняет эти скрипты. JavaScript может изменять DOM, CSSOM и влиять на отрисовку страницы в реальном времени. 9️⃣ Обработка событий После первоначальной загрузки и отрисовки страницы браузер начинает обрабатывать события, такие как клики, ввод данных, перемещение мыши и другие взаимодействия пользователя. JavaScript-код может быть привязан к этим событиям, чтобы обеспечить динамическое поведение страницы. Итоговый процесс 1️⃣Запрос страницы: Браузер отправляет HTTP-запрос и получает HTML-документ. 2️⃣Парсинг HTML: Создание DOM-дерева. 3️⃣Загрузка ресурсов: Загрузка CSS, JavaScript и других ресурсов. 4️⃣Парсинг CSS: Создание CSSOM и объединение с DOM для создания рендер-дерева. 5️⃣Макет: Расчет размеров и положения элементов. 6️⃣Отрисовка: Преобразование рендер-дерева в пиксели на экране. 7️⃣Выполнение JavaScript: Изменение DOM и CSSOM, повторная отрисовка при необходимости. 8️⃣Обработка событий: Реакция на взаимодействие пользователя с веб-страницей. HTML-документ преобразуется в веб-страницу в браузере через процесс, включающий парсинг HTML, создание DOM-дерева, загрузку и применение CSS, расчет макета, отрисовку элементов на экране и выполнение JavaScript. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

Ментор поможет сэкономить время и быстрее зайти в IT https://easyoffer.ru/mentor

🤔 Чем var отличается от const? var предоставляет функциональную область видимости и большую гибкость за счёт возможности переназначения, но это может привести к ошибкам из-за непреднамеренных изменений или переназначений. const используется для объявления переменных, значение которых не должно изменяться, что помогает предотвратить случайное переназначение и делает код более предсказуемым. Ставь 👍 если знал ответ и 🔥 если нет

Как происходит взаимодействие с git ? Спросят с вероятностью 3% Git — это система контроля версий, которая позволяет отслеживать изменения в коде, работать совместно над проектами и управлять различными версиями кода. Взаимодействие с Git происходит через командную строку с использованием различных команд. Рассмотрим основные этапы и команды, используемые для работы с Git. Основные команды и этапы работы 1️⃣Инициализация репозитория Создание нового локального репозитория или клонирование существующего удаленного репозитория. ✅Инициализация нового локального репозитория:

    git init
  

✅Клонирование удаленного репозитория:

    git clone <url>
  

2️⃣Добавление файлов в репозиторий Добавление новых или измененных файлов в индекс (стейджинг). ✅Просмотр состояния репозитория:

    git status
  

✅Добавление файла в индекс:

    git add <file>
  

✅

Добавление всех измененных файлов

:
    git add .
  

3️⃣Фиксация изменений

Сохранение изменений в истории репозитория с комментарием.

✅

Создание коммита

:
    git commit -m "Сообщение коммита"
  

4️⃣Работа с ветками

Создание, переключение и слияние веток.

✅

Создание новой ветки

:
    git branch <branch-name>
  
✅

Переключение на другую ветку

:
    git checkout <branch-name>
  

✅

Создание и переключение на новую ветку

:
    git checkout -b <branch-name>

✅

Слияние веток

:
    git merge <branch-name>
  

5️⃣Работа с удаленными репозиториями

Добавление удаленного репозитория, отправка и получение изменений.

✅

Добавление удаленного репозитория

:
    git remote add origin <url>
 
✅

Отправка изменений в удаленный репозиторий

:
    git push origin <branch-name>
  
  

Пример:

    git push origin main
  

✅

Получение изменений из удаленного репозитория

:
    git pull origin <branch-name>

✅

Клонирование удаленного репозитория

:
    git clone <url>
  

6️⃣

Просмотр истории коммитов

✅

Просмотр истории коммитов

:
    git log

7️⃣

Разрешение конфликтов

Когда изменения из разных веток конфликтуют, необходимо разрешить конфликты вручную.

✅

Начало слияния, вызвавшего конфликт

:
    git merge <branch-name>
  

✅

Редактирование конфликтующих файлов

:
Откройте файлы с конфликтами в текстовом редакторе и вручную разрешите конфликты.

✅

Добавление разрешенных конфликтов в индекс

:
    git add <file>
  

✅

Завершение

после разрешения конфликтов

:
    git commit
  

Рассмотрим пример полного рабочего процесса с Git:

1️⃣

Инициализация репозитория

:
      git init
   

2️⃣

Добавление удаленного репозитория

:
      git remote add origin https://github.com/username/repository.git
   

3️⃣Создание новой ветки для новой фичи:

      git checkout -b feature/new-feature
   

4️⃣Добавление и изменение файлов:

      echo "Some changes" > file.txt
   git add file.txt
   git commit -m "Add changes to file.txt"
   

5️⃣Отправка изменений в удаленный репозиторий:

      git push origin feature/new-feature
   

6️⃣Слияние ветки с новой фичей в основную ветку:

      git checkout main
   git pull origin main
   git merge feature/new-feature
   git push origin main
   

Взаимодействие с Git включает инициализацию репозитория, добавление файлов в индекс, фиксацию изменений, работу с ветками и взаимодействие с удаленными репозиториями через набор команд, таких как git init, git add, git commit, git branch, git checkout, git merge, git push, и git pull. Этот процесс позволяет отслеживать изменения в коде, работать над проектом в команде и управлять различными версиями кода. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

Как взаимодействуют front-end и back-end ? Спросят с вероятностью 3% Веб-разработка состоит из двух основных частей: фронтенда (frontend) и бэкенда (backend). Эти две части взаимодействуют между собой для создания полнофункциональных веб-приложений, предоставляя пользователям интерфейсы и обеспечивая работу бизнес-логики и управления данными на сервере. Рассмотрим, как они взаимодействуют. 1️⃣Архитектура взаимодействия Фронтенд: Это часть веб-приложения, с которой взаимодействует пользователь. Она включает HTML, CSS и JavaScript, а также фреймворки и библиотеки, такие как React, Vue.js и Angular. Фронтенд отвечает за отображение данных, обработку событий и обеспечение интерактивности. Бэкенд: Это серверная часть веб-приложения, которая управляет бизнес-логикой, обработкой данных и взаимодействием с базой данных. Бэкенд может быть написан на разных языках программирования, таких как Node.js, Python, Ruby, Java, PHP и других. Он включает веб-серверы, базы данных и API. 2️⃣HTTP-запросы и ответы Фронтенд и бэкенд взаимодействуют через HTTP-запросы и ответы. Фронтенд отправляет запросы на сервер (бэкенд), который обрабатывает их и отправляет ответы обратно на фронтенд. 1️⃣Запрос данных: ✅Фронтенд отправляет HTTP GET-запрос на сервер, чтобы получить данные. ✅Бэкенд получает запрос, извлекает данные из базы данных и отправляет их обратно в виде JSON-ответа.

// Фронтенд (JavaScript с использованием Fetch API)
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data); // Обработка данных на фронтенде
  })
  .catch(error => {
    console.error('Error:', error);
  });

2️⃣Отправка данных: ✅Фронтенд отправляет HTTP POST-запрос на сервер с данными для создания нового ресурса. ✅Бэкенд получает запрос, обрабатывает данные и сохраняет их в базе данных, затем отправляет ответ о статусе операции.

// Фронтенд (JavaScript с использованием Fetch API)
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => response.json())
  .then(data => {
    console.log(data); // Обработка ответа на фронтенде
  })
  .catch(error => {
    console.error('Error:', error);
  });

3️⃣WebSocket Для взаимодействия в реальном времени между фронтендом и бэкендом используется WebSocket. Он позволяет устанавливать постоянное двустороннее соединение между клиентом и сервером, что полезно для приложений с обновлениями в реальном времени, таких как чаты или онлайн-игры.

// Фронтенд (JavaScript с использованием WebSocket API)
const socket = new WebSocket('ws://example.com/socket');

socket.onopen = () => {
  console.log('WebSocket is open now.');
  socket.send(JSON.stringify({ message: 'Hello Server!' }));
};

socket.onmessage = (event) => {
  console.log('Received:', event.data);
};

socket.onclose = () => {
  console.log('WebSocket is closed now.');
};

4️⃣RESTful API и GraphQL RESTful API: Это стиль архитектуры API, который использует стандартные HTTP методы (GET, POST, PUT, DELETE) для взаимодействия с ресурсами. Каждый ресурс идентифицируется уникальным URL, а данные передаются в формате JSON или XML. GraphQL: Это язык запросов для API, который позволяет клиенту запрашивать именно те данные, которые ему нужны. В отличие от REST, где каждый ресурс имеет свой URL, в GraphQL есть единая точка доступа (endpoint), и запросы могут быть более гибкими и оптимизированными. Фронтенд и бэкенд взаимодействуют через HTTP-запросы и ответы. Фронтенд отправляет запросы на сервер, который обрабатывает их и отправляет ответы обратно. Также можно использовать WebSocket для двустороннего взаимодействия в реальном времени. Для организации взаимодействия часто применяются RESTful API и GraphQL. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

В этом канале вы можете купить рекламу Для заказа напишите @easyoffer_adv

👾 1096 вопросов собесов на Frontend Developer 🔒 База реальных собесов 🔒 База тестовых заданий 👾 Список менторов 🖥 Frontend на каждый день Вакансии с удалёнкой Решение задач LeetCode Тесты для самопроверки Список менторов 🖥 Python на каждый день Вакансии с удалёнкой Решение задач LeetCode Тесты для самопроверки Список менторов 👩‍💻 С/С++ на каждый день Вопросы с собеседований Вакансии с удалёнкой Решение задач LeetCode Тесты для самопроверки Список менторов 👩‍💻 Kotlin на каждый день Вопросы с собеседований Вакансии с удалёнкой Решение задач LeetCode Тесты для самопроверки Список менторов 👩‍💻 С# на каждый день Вопросы с собеседований Вакансии с удалёнкой Решение задач LeetCode Тесты для самопроверки Список менторов 👩‍💻 Java на каждый день Вопросы с собеседований Вакансии с удалёнкой Решение задач LeetCode Тесты для самопроверки Список менторов 👩‍💻 Swift на каждый день Вопросы с собеседований Вакансии с удалёнкой Решение задач LeetCode Тесты для самопроверки Список менторов 👩‍💻 PHP на каждый день Вопросы с собеседований Вакансии с удалёнкой Решение задач LeetCode Тесты для самопроверки Список менторов 🖥 Тестировщик на каждый день Вопросы с собеседований Вакансии с удалёнкой Тесты для самопроверки Список менторов 🖥 Data Science на каждый день Вопросы с собеседований Вакансии с удалёнкой Тесты для самопроверки Список менторов 👩‍💻 DevOps на каждый день Вопросы с собеседований Вакансии с удалёнкой Тесты для самопроверки Список менторов 👣 Golang на каждый день Вопросы с собеседований Вакансии с удалёнкой Решение задач LeetCode Тесты для самопроверки Список менторов ⚙ Backend на каждый день Вопросы с собеседований Список менторов

Что такое ооп ? Спросят с вероятностью 7% Объектно-ориентированное программирование (ООП) — это парадигма, основанная на концепции "объектов", которые могут содержать данные (в виде полей или атрибутов) и код (в виде методов). Предоставляет структуру для организации программного кода в форме объектов, которые могут взаимодействовать друг с другом. Основные концепции 1️⃣Классы и объекты ✅Это шаблон или "чертеж" для создания объектов. Класс определяет свойства (данные) и методы (функции), которые будут у объектов. Объект: это экземпляр класса, который содержит реальные значения для свойств и может вызывать методы, определенные в классе.

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }

  speak() {
    console.log(`${this.name} издает звук.`);
  }
}

const dog = new Animal('Рекс', 'Собака');
dog.speak(); // Рекс издает звук.

2️⃣Инкапсуляция ✅Это принцип скрытия внутреннего состояния объекта и предоставление доступа к нему только через методы. Это помогает защитить данные от некорректного использования и улучшает модульность кода.

class Person {
  constructor(name, age) {
    this.name = name;
    let _age = age; // Приватное свойство

    this.getAge = function() {
      return _age;
    }

    this.setAge = function(newAge) {
      if (newAge > 0) {
        _age = newAge;
      } else {
        console.log('Возраст должен быть положительным числом.');
      }
    }
  }
}

const person = new Person('Иван', 30);
console.log(person.getAge()); // 30
person.setAge(35);
console.log(person.getAge()); // 35

3️⃣Наследование ✅Позволяет одному классу наследовать свойства и методы другого класса, что способствует повторному использованию кода и улучшает его организацию.

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(); // Рекс лает.

4️⃣Полиморфизм ✅Позволяет методам выполнять разные действия в зависимости от объекта, который вызывает этот метод. Это достигается через переопределение методов в классах-наследниках.

```javascript
class Animal {
  speak() {
    console.log('Животное издает звук.');
  }
}

class Dog extends Animal {
  speak() {
    console.log('Собака лает.');
  }
}

class Cat extends Animal {
  speak() {
    console.log('Кошка мяукает.');
  }
}

const animals = [new Dog(), new Cat()];
animals.forEach(animal => animal.speak());
// Собака лает.
// Кошка мяукает.

Преимущества 1️⃣Улучшенная модульность: Классы и объекты позволяют разбивать код на отдельные, независимые части. 2️⃣Повторное использование кода: Наследование и полиморфизм способствуют повторному использованию кода. 3️⃣Упрощенное управление сложностью: Инкапсуляция помогает скрыть сложность реализации и предоставляет простой интерфейс для взаимодействия с объектами. 4️⃣Повышенная гибкость и расширяемость: Легко добавлять новые функции и изменять существующие без значительного переписывания кода. ООП — это метод, который организует код в виде объектов и классов. Основные принципы ООП включают инкапсуляцию, наследование, полиморфизм и абстракцию. Это помогает создавать модульный, повторно используемый и легко управляемый код. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых

🤔 Что такое макро и микро задачи? Макро- и микро-задачи являются частью механизма асинхронного программирования и внутренней модели выполнения, которые помогают управлять порядком выполнения асинхронных операций. Эти понятия связаны с циклом событий (event loop) и очередью задач. Ставь 👍 если знал ответ

🤔 Что не стоит писать в методе render? Метод render должен быть чистым и идемпотентным. Это означает, что он должен только возвращать JSX для рендеринга и не выполнять побочные эффекты, такие как изменения состояния, запросы к серверу, дорогостоящие вычисления или манипуляции с DOM. Для этих целей следует использовать хуки (например, useEffect) или методы жизненного цикла классовых компонентов.

Какие методы http запросов знаешь ? Спросят с вероятностью 7% HTTP (HyperText Transfer Protocol) поддерживает множество методов запросов, каждый из которых предназначен для выполнения определенных действий на сервере. Вот основные методы HTTP-запросов, которые широко используются: 1️⃣GET Описание: Запрашивает данные с сервера. Особенности: ✅Не изменяет состояние сервера (идемпотентный). ✅Параметры запроса передаются в URL. ✅Кэшируется. ✅Можно сохранить в закладках браузера.

GET /api/users?id=123 HTTP/1.1
Host: www.example.com

2️⃣POST Описание: Отправляет данные на сервер для создания ресурса или выполнения действия. Особенности: ✅Изменяет состояние сервера. ✅Данные передаются в теле запроса. ✅Не кэшируется по умолчанию.

POST /api/users HTTP/1.1
Host: www.example.com
Content-Type: application/json

{
  "name": "John Doe",
  "email": "john.doe@example.com"
}

3️⃣PUT Описание: Отправляет данные на сервер для создания или замены ресурса. Особенности: ✅Идемпотентный. ✅Данные передаются в теле запроса.

PUT /api/users/123 HTTP/1.1
Host: www.example.com
Content-Type: application/json

{
  "name": "John Doe",
  "email": "john.doe@example.com"
}

4️⃣DELETE Описание: Удаляет ресурс на сервере. Особенности: ✅Идемпотентный.

DELETE /api/users/123 HTTP/1.1
Host: www.example.com

5️⃣PATCH Описание: Частично обновляет ресурс на сервере. Особенности: ✅Не является идемпотентным, хотя в некоторых случаях может быть. ✅Данные передаются в теле запроса.

PATCH /api/users/123 HTTP/1.1
Host: www.example.com
Content-Type: application/json

{
  "email": "new.email@example.com"
}

6️⃣HEAD Описание: Запрашивает только заголовки ресурса, без тела. Особенности: ✅Идемпотентный. ✅Используется для проверки наличия ресурса, размера, даты последнего изменения и т.д.

HEAD /api/users/123 HTTP/1.1
Host: www.example.com

7️⃣OPTIONS Описание: Запрашивает поддерживаемые сервером методы для указанного ресурса. Особенности: ✅Идемпотентный. ✅Используется для CORS-запросов, чтобы определить разрешенные методы и заголовки.

OPTIONS /api/users HTTP/1.1
Host: www.example.com

8️⃣CONNECT Описание: Устанавливает туннель к серверу, обычно используется для прокси-серверов. Особенности: ✅Не используется в обычных RESTful API.

CONNECT www.example.com:443 HTTP/1.1
Host: www.example.com

9️⃣TRACE Описание: Выполняет запрос по пути до целевого ресурса, возвращая запрос в ответе. Особенности: ✅Используется для диагностики или отладки.

TRACE /api/users HTTP/1.1
Host: www.example.com

Резюме ✅GET: Запрашивает данные, не изменяет состояние сервера. ✅POST: Отправляет данные для создания ресурса, изменяет состояние сервера. ✅PUT: Создает или заменяет ресурс, идемпотентный. ✅DELETE: Удаляет ресурс, идемпотентный. ✅PATCH: Частично обновляет ресурс. ✅HEAD: Запрашивает заголовки ресурса, без тела. ✅OPTIONS: Запрашивает поддерживаемые методы для ресурса. ✅CONNECT: Устанавливает туннель к серверу. ✅TRACE: Выполняет запрос по пути до целевого ресурса для диагностики. Методы HTTP-запросов включают GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS, CONNECT и TRACE. Каждый метод используется для различных типов операций: получения данных, отправки данных, обновления, удаления и диагностики. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент 🔐 База собесов | 🔐 База тестовых