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

Итак, давайте перечислим некоторые концепции, с которыми вы столкнетесь при использовании React:

1) Назначение деструктуризации объекта

Это концепция, позволяющая извлекать свойства объекта из его родительского объекта, которые затем при необходимости могут быть присвоены переменной. Это то, что мы будем часто использовать в React, особенно при работе с передачей данных в качестве реквизита. Давайте посмотрим на этот пример деструктуризации этого объекта ниже:

2) Метод Array.map()

Этот метод следует концепции функций высшего порядка, которые представляют собой функцию, которая принимает другую функцию, чтобы что-то с ней делать. Функция .map() создает новый массив из исходного массива, перебирая в цикле каждый элемент в массиве и выполняя указанную операцию над каждым элементом, прежде чем вернуть результат в новый массив. Это сделано для того, чтобы избежать мутации исходного массива. Давайте рассмотрим пример использования метода .map():

Это важная концепция, которую нужно знать, потому что в React мы собираемся отображать данные, которые мы получаем напрямую, в виде реквизита или из API.

3) Синтаксис распространения (…)

Также называемый оператором расширения, это способ предотвращения изменения исходного массива путем «расширения» или расширения всех элементов исходного массива в новый массив. Новые элементы также могут быть добавлены в новый массив вместе с элементами исходного массива. Таким образом, исходный массив остается прежним, а новый массив содержит все содержимое исходного массива. Ниже приведен фрагмент, показывающий, как это работает:

4) Классы

Классы пришли с ES6 как более простой способ создания объектов. В React есть два способа создания компонентов: функциональные компоненты и компоненты класса. Если вы предпочитаете создавать компоненты с использованием компонентов класса, вам необходимо знать, как работают классы.

Класс — это тип функции, который объявляется с помощью ключевого слова «класс», и все его свойства создаются внутри метода конструктора, который затем распространяется на новые объекты, созданные из этого объекта класса. Метод конструктора действует как план объекта. Объекты, которые мы создаем из этого класса, наследуют все свойства самого класса. Ниже приведен фрагмент, который показывает объяснение этого:

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

Вы можете узнать больше об этих темах на таких сайтах, как W3Schools, MDN, DigitalOcean и FreeCodeCamp.