3 концепции JavaScript, которые необходимо изучить, прежде чем изучать React

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

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

С учетом сказанного давайте перейдем к ключевым концепциям JavaScript, с которыми вам следует ознакомиться перед изучением React:

1. Встроенные функции высшего порядка массива (HoF)

Когда вы начнете использовать React, вы быстро обнаружите, что так или иначе вам нужно использовать HoF. На самом деле вы никогда не увидите проект React без HoF.

Функция высшего порядка — это функция, которая принимает другую функцию (функции) в качестве аргумента (аргументов) и/или возвращает функцию (функции) в качестве результата.

Известные примеры:

Array.prototype.map

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

Например: ([1, 2, 3, 4]).map((arrayElm) => arrayElm * 2) вернет [2, 4, 6, 8]

Array.prototype.filter

Создает новый массив со всеми элементами, прошедшими проверку, реализованную предоставленной функцией.

Например: ([1, 2, 3, 4]).filter((arrayElm) => arrayElm % 2 === 0) вернет [2, 4]. Он отфильтровал все элементы, где условие arrayElm % 2 === 0 было ложным.

Array.prototype.forEach

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

Например: ([1, 2, 3, 4]).forEach((arrayElm) => console.log(arrayElm)), который выведет на консоль только элементы массива, но вернет undefined .

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

Вы можете подписаться на мою рассылку здесь, чтобы получать уведомления каждый раз, когда я публикую новую историю 😉.

2. Современный синтаксис ES6

Сюда входят такие понятия, как:

• Объявления переменных с использованием const/let

• Синтаксис import/export для модулей

• Функции со стрелками ( Синтаксис: const fn = () => { console.log('Современный синтаксис ES6'); } )

• Классы

• Новый оператор спреда ( Синтаксис: ... )

Вы можете прочитать эту замечательную статью на FreeCodeCamp, чтобы лучше ознакомиться с новыми функциями ES6: JavaScript ES6 - пишите меньше, делайте больше, а также официальную документацию MDN, которая что я настоятельно рекомендую вам сделать.

3. Объекты

Объекты — это важная встроенная структура данных, которую вы, вероятно, будете использовать в любом проекте.

Возможно, вы захотите ознакомиться с:

• Деструктуризация объекта (const { x, y } = someObject )

• Псевдонимы деструктуризации объекта (const { x: newVarName, y: AnotherNewVarName } = someObject)

• Значения деструктурирования объекта по умолчанию ( const { x = 5, y = 12 } = someObject )

• Имена свойств динамических объектов ( const dynamicObjectKey = '☕️'; const newObject = { [dynamicObjectKey]: '🍰' } )

• Методы объектов, такие как: Object.keys(), Object.values(), Object.entries()

Экосистема NPM

Над каким бы проектом вы ни работали, вам понадобится использовать некоторые уже созданные функции, и именно здесь в игру вступают модули NPM.

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

• Более простой способ обработки HTTP-запросов? → аксиос

• Более простой способ работы с JS Dates? → дата-fns

• Хотите получать платежи через Stripe? → [полоса] (https://stripe.com/)

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

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

Вы можете проверить все доступные пакеты здесь.

Последнее слово

Эта статья предполагает определенный уровень знаний JS, и поэтому я решил включить несколько более продвинутые концепции JS, которые помогут получить достаточно знаний, чтобы начать изучать React.

Я надеюсь, вам понравилось читать эту статью, и, что более важно, я надеюсь, что она помогла вам получить более четкое представление о том, что вы можете изучить дальше, чтобы быть готовым к изучению React.

Если вам понравилось читать эту статью, вы также можете поддержать меня, купив мне кофе здесь.

Также опубликовано здесь