Выразительный React: интерактивность на клиенте

В статье описан один из стандартных подходов к созданию React-приложения.
Эта статья — продолжение серии «Выразительный React». В предыдущей статье «Выразительный React: простые компоненты на сервере» была показана техника SSR (Server-Side Rendering). В ней разбирались определения, которые пригодятся при чтении этой статьи.

👉 @frontendInterview

“Ну тут недельки на две”. Оцениваем задачи

Работа в сфере информационных технологий – не стройка. Большая часть задач требует от человека мыслительного процесса и творческого подхода. Именно поэтому так сложно оценить задачу правильно, именно поэтому мы часто ошибаемся в наших оценках и это нормально. Ошибки – часть рабочего процесса.

👉 @frontendInterview

👉 @frontendInterview

backface-visibility

Свойство backface-visibility управляет видимостью задней части элемента, если тот развёрнут относительно пользователя с помощью свойства transform. Это нужно только для 3D-трансформаций, для 2D-трансформаций свойство не имеет эффекта. Оно используется для создания более реалистичных 3D-сцен, скрывая изнанку объектов при их вращении.

Есть всего два возможных значения:
- visible — значение по умолчанию, задняя сторона элемента видна. Например, при вращении элемента на 180 градусов его задняя часть будет отображаться;
- hidden — задняя сторона элемента не видна. Это полезно, когда вы хотите скрыть обратную сторону элемента при его вращении, что создаёт иллюзию, будто элемент исчезает, когда повёрнут спиной.

Пример
Задняя сторона будет скрыта:

.element {
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

👉 @frontendInterview

JavaScript From Zero to Hero

Cамое полное руководство на свете. Освойте современный JavaScript, даже если вы новичок в программировании

👉 @frontendInterview

Training JS #7: if..else and ternary operator

Функция принимает 1 параметр: n, n - это количество хот-догов, которые купит клиент, за покупку нескольких штук предусмотрены скидки. Сколько денег потратит клиент, чтобы купить указанное количество хот-догов?


n < 5              $100
n >= 5 и n < 10    $95
n >= 10            $90


Пример:

saleHotdogs( 1 )  => 100
saleHotdogs( 5 )  => 475
saleHotdogs( 10 ) => 900

👉 @frontendInterview

​Как можно скопировать объект в JS?

Есть несколько способов скопировать объект. Важно понимать разницу между поверхностным (shallow) и глубоким (deep) копированием. Поверхностная копия копирует только сам объект и его непосредственные свойства, в то время как глубокая копия копирует весь объект и все его вложенные объекты.

Поверхностное копирование

1. Метод Object.assign копирует все перечисляемые свойства из одного или более исходных объектов в целевой объект.

const original = { a: 1, b: 2 };
const copy = Object.assign({}, original);
console.log(copy); // { a: 1, b: 2 }

2. Оператор расширения (...) также можно использовать для создания поверхностной копии объекта.

const original = { a: 1, b: 2 };
const copy = { ...original };
console.log(copy); // { a: 1, b: 2 }

Глубокое копирование

1. JSON.parse и JSON.stringify
Этот метод преобразует объект в строку JSON, а затем обратно в объект, создавая тем самым глубокую копию. Однако он имеет ограничения, такие как невозможность копирования функций и потеря undefined значений.

const original = { a: 1, b: { c: 2 } };
const copy = JSON.parse(JSON.stringify(original));
console.log(copy); // { a: 1, b: { c: 2 } }

2. Рекурсивная функция
Можно написать свою рекурсивную функцию для глубокого копирования объекта.

function deepCopy(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }

  if (Array.isArray(obj)) {
    const arrCopy = [];
    for (let i = 0; i < obj.length; i++) {
      arrCopy[i] = deepCopy(obj[i]);
    }
    return arrCopy;
  }

  const copy = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}

const original = { a: 1, b: { c: 2 } };
const copy = deepCopy(original);
console.log(copy); // { a: 1, b: { c: 2 } }

3. Библиотеки для глубокого копирования
Существуют библиотеки, такие как lodash, которые предоставляют готовые функции для глубокого копирования объектов.

const _ = require('lodash');
const original = { a: 1, b: { c: 2 } };
const copy = _.cloneDeep(original);
console.log(copy); // { a: 1, b: { c: 2 } }

👉 @frontendInterview

​Как клонировать репозиторий на GitHub?

Чтобы клонировать репозиторий, нужно установить на компьютер Git CLI. Как это сделать описано в статьях «Системы управления версиями» и «Git CLI».

Выполните в терминале команду:

git clone <ссылка на репозиторий>

Чтобы найти ссылку на репозиторий, выберите вкладку «<> Code» в репозитории на GitHub. Когда переходите к нужному проекту, эта вкладка открывается по умолчанию. Найдите в основной части вкладки аккордеон, который тоже называется «<> Code» и разверните его. В развернувшейся панели по умолчанию будет выбрана «Local». В ней выберите формат ссылки.

Первые «HTTPS» и «SSH» — это ссылки на репозиторий, использование которых подходит для стандартной команды клонирования, описанной выше. SSH ссылка будет работать в том случае, если настроили доступ по SSH. Для этого надо установить публичный ключ в настройках профиля на GitHub. Подробнее в рецепте «Как настроить доступ по SSH на GitHub». Третий формат — «GitHub CLI». Он набран в виде команды, которая будет работать, если у вас установлен GitHub CLI.

После выбора скопируйте из поля нужную ссылку или команду. Поле расположено после типов ссылок.

После выполнения команды git clone в вашей текущей папке появится папка с тем же именем, что и сам репозиторий. Если хотите указать другую папку для репозитория, укажите в конце команды для клонирования её название:

👉 @frontendInterview

​Открытый вебинар "Создание веб-компонентов и использование Shadow DOM"

🎁Полный обзор веб-компонентов: создание независимых, повторно используемых элементов интерфейса на чистом JavaScript и Shadow DOM

На практике изучите:

- Изоляция стилей и поведения, создание защищенных компонентов.

- Примеры создания интерфейсов, работающих с нативным JavaScript и интегрируемых с фреймворками, такими как React и Vue, где уже есть поддержка для веб-компонентов.

Что узнают участники?

✅ Как создать нативные веб-компоненты с использованием JavaScript и Shadow DOM — мощные, инкапсулированные элементы для долгосрочной поддержки.

🤖 Методы работы с Shadow DOM — независимость от остального кода и адаптация под любые задачи

❓ Почему веб-компоненты — это фундамент для универсальных интерфейсов, и как фреймворки уже используют эти принципы, давая возможность легко внедрять и масштабировать элементы.

🔥Регистрируйтесь на урок 4 декабря, в 20:00 мск и получите скидку на большое обучение «JavaScript Developer. Professional»: https://vk.cc/cFDEU6


Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576 erid 2SDnjerK15V

Собеседование — битва к которой нужно подготовиться

Ты ищешь первую работу или решил сменить работу? Поздравляю! Впереди тебя ждет карусель интересных приключений: от собеседований и до ожидания обратной связи. Я провел немало собеседований, и у многих кандидатов есть одна общая ошибка — отсутствие подготовки. Они идут напролом, что заслуживает уважения, но можно облегчить себе путь, если подготовиться заранее. Ниже я опишу простые способы подготовки. Однако помни: не стоит затягивать с выходом на собеседования. Подготовка не должна превращаться в бесконечное "а вот этот вопрос изучу поглубже, этот курс пройду, еще видео посмотрю". Не превращайся в "вечного студента". Скорее всего, все нужные знания у тебя уже есть; главное — их УПАКОВАТЬ (как бы инфоцыгански это ни звучало).

👉 @frontendInterview

Правда...

👉 @frontendInterview

​Как проверить, что поле является массивом ?

Для проверки, является ли поле массивом, можно использовать несколько методов. Самый распространенный и рекомендуемый способ — это использование метода Array.isArray(). Этот метод проверяет, является ли переданное значение массивом, и возвращает true или false.

Пример

const arr = [1, 2, 3];
const notArr = "Hello";

console.log(Array.isArray(arr)); // true
console.log(Array.isArray(notArr)); // false

Альтернативные методы

- Проверка с помощью instanceof:
Этот метод проверяет, является ли объект экземпляром конструктора Array.

      const arr = [1, 2, 3];
   const notArr = "Hello";

   console.log(arr instanceof Array); // true
   console.log(notArr instanceof Array); // false
   

- Проверка с помощью конструктора Object.prototype.toString.call():
Этот метод проверяет тип объекта, возвращаемый методом

Object.prototype.toString.

      const arr = [1, 2, 3];
   const notArr = "Hello";

   console.log(Object.prototype.toString.call(arr) === '[object Array]'); // true
   console.log(Object.prototype.toString.call(notArr) === '[object Array]'); // false

Сравнение методов

Array.isArray():
- Является самым современным и предпочтительным методом.
- Поддерживается всеми современными браузерами.
- Легко читается и понимается.

instanceof:
- Работает корректно в большинстве случаев.

  - Может давать неверные результаты, если массив создан в другом контексте (например, в iframe).

- Object.prototype.toString.call():
  - Универсальный метод для проверки различных типов объектов.
  - Меньше подвержен проблемам с контекстом, но выглядит менее читаемым по сравнению с Array.isArray().

👉 @frontendInterview

Введение в веб-разработку на языке JavaScript: учебное пособие

В учебно-методическом пособии рассматриваются фундаментальные основы и прикладные аспекты использования языка JavaScript для клиентской и серверной разработки веб-ресурсов. Проанализированы основные тенденции развития наиболее распространённого языка клиентского веб-программирования в свете внедрения новых стандартов ECMAScript.

👉 @frontendInterview

Testing 1-2-3

Напишите функцию, которая принимает массив строк и возвращает каждую строку, дополненную нужным номером
Нумерация начинается с 1. Обратите внимание на двоеточие и пробел между ними

Пример:

[] --> []
["a", "b", "c"] --> ["1: a", "2: b", "3: c"]

👉 @frontendInterview

​Что нужно сделать, чтобы поменять данные в хранилище redux?

Чтобы изменить данные, нужно выполнить несколько шагов: создать действие (action), определить редюсер (reducer), который будет обрабатывать это действие и обновлять состояние, и затем отправить действие (dispatch action) в хранилище. Рассмотрим эти шаги более подробно.

Шаги для изменения данных в хранилище:

Создание действия (action)
Это объект, который описывает, что должно произойти. Он должен содержать как минимум свойство type, которое указывает на тип действия. Дополнительно можно добавить любые данные, которые нужны для обновления состояния.

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

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

export const setValue = (value) => ({
  type: 'SET_VALUE',
  payload: value,
});

Создание редюсера (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,
      };
    case 'SET_VALUE':
      return {
        ...state,
        count: action.payload,
      };
    default:
      return state;
  }
};

export default counterReducer;

Создание хранилища (store)
Создается с использованием функции createStore из библиотеки Redux. Хранилище объединяет редюсеры и обеспечивает централизованное управление состоянием.

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

const store = createStore(counterReducer);

export default store;

Подключение Redux к React (или другому фреймворку)
Нужно подключить его через провайдер (Provider), который делает хранилище доступным для всех компонентов в дереве компонентов.

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

Использование состояния и отправка действий в компонентах
Для получения состояния из хранилища и отправки действий используются хуки useSelector и useDispatch из библиотеки react-redux.

// App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, setValue } 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>
      <button onClick={() => dispatch(setValue(10))}>Set to 10</button>
    </div>
  );
};

export default App;

👉 @frontendInterview