Разделяй и Властвуй

Вам дан массив, состоящий из цифр и строковых представлений цифр.
Вам нужно вычесть сумму строковых представлений из цифр и вернуть этот результат.

Примеры:
divCon([9, 3, '7', '3']) => 2
divCon(['5', '0', 9, 3, 2, 1, '9', 6, 7]) => 14
divCon(['3', 6, 6, 0, '5', 8, 5, '6', 2,'0']) => 13

Что такое управляемые и неуправляемые компоненты?

В управляемых компонентах данные формы обрабатываются React-компонентом. Альтернативой являются неуправляемые компоненты, где данные формы обрабатываются DOM.

Управляемые компоненты
В управляемых компонентах данные формы обрабатываются с помощью состояния компонента. Состояние компонента выступает в роли "единственного источника истины" (single source of truth) для "инпутов" компонента.

Неуправляемые компоненты
Неуправляемые компоненты похожи на обычные HTML-элементы. Данные каждого "инпута" сохраняются в DOM, а не в компоненте. Вместо обработчиков событий для обновления состояния, в таких компонента используются refs (ссылки, references) для извлечения значений из DOM. Ссылки позволяют получать доступ к узлам DOM или элементам React, создаваемым в методе render():

Что такое React.cloneElement()?

Функция React.cloneElement() возвращает копию переданного ей элемента. В функцию могут передаваться дополнительные пропы и потомки. Она используется, когда родительский компонент хочет добавить или модифицировать пропы потомков.

 React.cloneElement(element, [props], [...children])

cloneElement() принимает три аргумента:

1. element: элемент, подлежащий клонированию
2. props: пропы, передаваемые клонированному элементу
3. children: мы также можем передавать потомков в клонированный элемент (новые потомки заменяют старых)

Какой второй опциональный аргумент может быть передан setState() и в чем его назначение?

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

Функция setState() является асинхронной, поэтому она принимает коллбек в качестве второго параметра. Как правило, лучше использовать другой метод жизненного цикла, чем полагаться на этот коллбек, но не лишним будет знать о такой возможности.

 this.setState(
   { username: 'Alex' },
   () => console.log('Обновление состояние завершено и компонент повторно отрисован.')
 )

setState() всегда влечет за собой повторный рендеринг, пока shouldComponentUpdate() не вернет false. Во избежание лишних рендерингов, вызывайте setState() только когда новое состояние отличается от предыдущего. Также избегайте вызова setState() в таких методах жизненного цикла, как componentDidUpdate(), поскольку это может привести к бесконечному циклу.

ECMAScript 6 для разработчиков Николас Закас

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

Старый switcheroo

Напишите функцию vowel2index(str), которая принимает строку и заменяет все гласные на их номера в строке.

Примеры:
vowel2index('this is my string')
// 'th3s 6s my str15ng'

vowel2index('Codewars is the best site in the world')
// 'C2d4w6rs 10s th15 b18st s23t25 27n th32 w35rld'

vowel2index('')
//''

Мэтт Вайсфельд: Объектно-ориентированный подход

Эта книга написана разработчиком для разработчиков, и позволяет выбрать оптимальные подходы для решения конкретных задач. Вы узнаете, как правильно применять наследование и композицию, поймете разницу между агрегацией и ассоциацией и перестанете путать интерфейс и реализацию.
Технологии программирования непрерывно меняются и развиваются, но объектно-ориентированные концепции не зависят от платформы и остаются неизменно эффективными. В этом издании основное внимание уделяется фундаментальным основам ООП: паттернам проектирования, зависимостям и принципам SOLID, которые сделают ваш код понятным, гибким и хорошо сопровождаемым.

​Что такое useState()?

useState() - это хук, позволяющий функциональным компонентам иметь состояние. Раньше это было возможно только в классовых компонентах.

import React, { useState } from 'react'

const App = () => {
const [count, setCount] = React.useState(0)

const handleIncrease = () => {
setCount(count + 1)
}

const handleDecrease = () => {
setCount(count - 1)
}

return (
<div>
Значение счетчика: {count}
<hr />
<div>
<button type="button" onClick={handleIncrease}>
Увеличить
</button>
<button type="button" onClick={handleDecrease}>
Уменьшить
</button>
</div>
</div>
)
}
useState() принимает единственный аргумент - значение начального состояния. В примере таким значением является 0. Хук возвращает массив из двух элементов: count и setCount. Вы можете думать об этих элементах как о паре геттер/сеттер.
Геттер позволяет получать текущее значение состояния, а сеттер - устанавливать новое значение, т.е. обновлять состояние. На самом деле, эти элементы можно называть как угодно (поскольку мы имеем дело с деструктуризацией массива). Такой способ именования является распространенным соглашением и отражает суть возвращаемых useState() значений.

​Что такое useReducer()?

useReducer() - это хук, принимающий функцию-редуктор и начальное состояние приложение в качестве аргументов и возвращающий текущее состояние и диспетчер (dispatcher) для отправки (dispatch) операций.

Несмотря на то, что useState() - это базовый хук, а useReducer() - продвинутый, на самом деле useState() реализован с помощью useReducer(). Это означает, что useReducer() - это примитив, который может использоваться во всех случаях использования useState(). Редуктор - мощный инструмент, который может использоваться в самых разных сценариях:

Пример

 import React, { useReducer } from 'react'

 const initialState = 0
 const reducer = (state, action) => {
   switch (action) {
     case 'increment': return state + 1
     case 'decrement': return state - 1
     case 'reset': return 0
     default: return state
   }
 }

 const ReducerExample = () => {
   const [count, dispatch] = useReducer(reducer, initialState)

   return (
     <div>
       {count}
       <button onClick={() => dispatch('increment')}>+1</button>
       <button onClick={() => dispatch('decrement')}>-1</button>
       <button onClick={() => dispatch('reset')}>reset</button>
     </div>
   )
 }

 export default ReducerExample

Сначала мы определяем начальное состояние и редуктор. Затем передаем их в useReducer(). Хук возвращает текущее значение состояния и диспетчер, который используется для обновления состояния. Когда пользователь нажимает на кнопку, происходит отправка определенной операции в редуктор, который обновляет счетчик на основе операции. Мы может определять столько операций, сколько требуется нашему приложению.