7 навыков JavaScript, которые вам нужно знать для React (+ практические примеры)
Одна из самых важных вещей, которые нужно понять о React, заключается в том, что по своей сути это JavaScript. Это означает, что чем лучше вы разбираетесь в JavaScript, тем успешнее вы добьетесь успеха в React.
Давайте разберем 7 основных концепций JavaScript, которые вам необходимо знать, чтобы освоить React.
И когда я говорю, что эти концепции необходимы — они используются в каждом отдельном приложении, которое делает разработчик React, практически без исключений.
Изучение этих концепций — одна из самых ценных вещей, которые вы можете сделать, чтобы ускорить свою способность создавать проекты React и стать опытным разработчиком React, так что давайте начнем.
Хотите получить собственную копию этого руководства?
Скачать шпаргалку в формате PDF здесь (это займет 5 секунд).
1. Объявления функций и стрелочные функции
Основой любого приложения React является компонент. В React компоненты определяются как функциями, так и классами JavaScript. Но в отличие от функций JavaScript, компоненты React возвращают элементы JSX, которые используются для структурирования интерфейса нашего приложения.
Обратите внимание на разные регистры между именами функций JavaScript и компонентов функций React. Функции JavaScript называются в верблюжьем регистре, в то время как компоненты функций React пишутся в паскалевом регистре (в котором все слова пишутся с заглавной буквы).
Есть два разных способа написать функцию в JavaScript. Традиционный способ с использованием ключевого слова function называется объявлением функции. И как стрелочная функция, которая была представлена в ES6.
Для написания функциональных компонентов в React можно использовать либо объявления функций, либо функции со стрелками. Основным преимуществом стрелочных функций является их лаконичность. Мы можем использовать несколько сокращений, чтобы написать наши функции для удаления ненужного шаблонного кода, так что мы можем даже написать все это в одной строке.
Небольшое преимущество использования объявлений функций по сравнению со стрелочными функциями заключается в том, что вам не нужно беспокоиться о проблемах с подъемом.
Из-за поведения подъема в JavaScript вы можете использовать несколько функциональных компонентов, созданных с помощью объявлений функций в одном файле, в любом порядке. Однако функциональные компоненты, созданные с помощью стрелочных функций, нельзя расположить так, как вам нравится. Поскольку переменные JavaScript поднимаются, компоненты стрелочных функций должны быть объявлены до их использования:
Еще одно небольшое различие между использованием синтаксиса объявления функции заключается в том, что вы можете сразу же экспортировать компонент из файла, используя export default или export, прежде чем функция будет объявлена. Вы можете использовать только ключевое слово export перед функциями стрелок (экспорт по умолчанию должен быть помещен на строку ниже компонента).
2. Шаблонные литералы
У JavaScript неуклюжая история работы со строками, особенно если вы хотите конкатенировать или соединить несколько строк вместе. До появления ES6, чтобы складывать строки вместе, вам нужно было использовать оператор + для добавления каждого сегмента строки друг к другу.
С добавлением ES6 нам была предоставлена новая форма строки, называемая литералом шаблона, которая состоит из двух обратных галочек вместо одинарных или двойных кавычек. Вместо использования оператора + мы можем соединить строки, поместив выражения JavaScript (например, переменную) в специальный синтаксис ${}:
Мощным преимуществом литералов шаблонов является их способность использовать любое выражение JavaScript (то есть любое выражение JavaScript, которое преобразуется в значение) в рамках синтаксиса ${}.
Мы даже можем включить условную логику, используя тернарный оператор, который идеально подходит для условного добавления или удаления правила класса или стиля для данного элемента JSX:
Короче говоря, шаблонные литералы отлично подходят для React, когда нам нужно динамически создавать строки. Например, когда мы используем строковые значения, которые могут изменяться в элементах заголовка или тела на нашем сайте:
3. Короткие условные операторы: &&, ||, тернарный оператор
Учитывая, что React — это просто JavaScript, очень легко условно показать (или скрыть) элементы JSX, используя простые операторы if, а иногда и операторы switch.
С помощью некоторых основных операторов JavaScript мы сокращаем количество повторений и делаем наш код более лаконичным. Мы можем преобразовать приведенный выше оператор if в следующий, используя тернарный оператор. Тернарный оператор действует точно так же, как оператор if, но короче, это выражение (не оператор) , и может быть вставлен в JSX:
Тернарные операторы также можно использовать внутри фигурных скобок (опять же, поскольку это выражение):
Если бы мы изменили приведенный выше пример и хотели бы показывать текст только в том случае, если пользователь вошел в систему (если isLoggedIn истинно), это был бы отличный вариант использования оператора && (и).
Если первое значение ( operand) в условном выражении истинно, оператор && отображает второй операнд. В противном случае возвращается первый операнд. И поскольку оно falsy (значение, автоматически преобразованное в логическое значение false с помощью JavaScript), оно не отображается в JSX:
Допустим, мы хотим противоположного тому, что мы делаем сейчас: сказать только «Кто ты?» если isLoggedIn ложно. Если это правда, мы ничего не покажем.
Для этой логики мы можем использовать оператор || (или). По сути, он работает противоположно оператору &&. Если первый операнд истинен, возвращается первый (ложный) операнд. Если первый операнд ложный, возвращается второй операнд.
4. Три метода массива: .map(), .filter(), .reduce()
Вставлять примитивные значения в элементы JSX легко, просто используйте фигурные скобки.
Мы можем вставлять любые допустимые выражения, включая переменные, содержащие примитивные значения (строки, числа, логические значения и т. д.), а также свойства объекта, содержащие примитивные значения.
Что, если у нас есть массив, и мы хотим выполнить итерацию по этому массиву, чтобы показать каждый элемент массива в отдельном элементе JSX?
Для этого мы можем использовать метод **.map()**. Это позволяет нам преобразовывать каждый элемент в нашем массиве так, как мы указываем с помощью внутренней функции.
Обратите внимание, что это особенно лаконично, когда используется в сочетании с функцией стрелки.
Существуют и другие разновидности метода .map(), которые выполняют связанные задачи, и их важно знать, поскольку они могут быть объединены в цепочку в сочетании друг с другом.
Почему? Поскольку .map(), как и многие методы массива, возвращает неглубокую копию массива, по которому он прошел итерацию, что позволяет передать возвращенный массив следующему методу в цепочке.
, как следует из его названия, позволяет нам отфильтровывать определенные элементы из нашего массива. Например, если мы хотим удалить все имена программистов, которые начинаются с «J», мы можем сделать это с помощью .filter():
Важно понимать, что и .map(), и .filter() — это просто разные варианты метода массива, который способен преобразовывать значения массива практически в любой тип данных, даже в значения, не являющиеся массивами.
Вот .reduce(), выполняющий ту же операцию, что и наш метод .filter() выше:
5. Трюки с объектами: сокращение свойств, деструктуризация, оператор расширения
Как и массивы, объекты представляют собой структуру данных, с которой вам должно быть удобно работать при использовании React.
Поскольку объекты существуют для организованного хранения значений ключа, в отличие от массивов, вам понадобится очень удобный доступ к свойствам объектов и управление ими.
Чтобы добавить свойства к объекту по мере его создания, вы называете свойство и соответствующее ему значение. Следует запомнить одно очень простое сокращение: если имя свойства совпадает со значением, вам нужно указать только имя свойства.
Это сокращение свойства объекта:
Стандартный способ доступа к свойствам объекта — использование записи через точку. Однако еще более удобным подходом является деструктуризация объекта. Это позволяет нам извлекать свойства как отдельные переменные с тем же именем из данного объекта.
Это выглядит так, как будто вы пишете объект в обратном порядке, что делает процесс интуитивно понятным. Это гораздо приятнее в использовании, чем использовать имя объекта несколько раз для доступа каждый раз, когда вы хотите получить от него значение.
Теперь, если вы хотите создать объекты из существующих, вы можете перечислить свойства одно за другим, но это может стать очень повторяющимся.
Вместо того, чтобы копировать свойства вручную, вы можете распространить все свойства объекта на другой объект (по мере его создания) с помощью оператора распространения объекта:
Что хорошо в распределении объектов, так это то, что вы можете распространять столько объектов в новый, сколько хотите, и вы можете упорядочивать их как свойства. Но имейте в виду, что свойства с тем же именем, которые появятся позже, перезапишут предыдущие свойства:
6. Промисы + асинхронный/ожидающий синтаксис
Практически каждое приложение React состоит из асинхронного кода — кода, выполнение которого занимает неопределенное время. В частности, если вам нужно получить или изменить данные из внешнего API с помощью таких функций браузера, как Fetch API или сторонней библиотеки axios.
Промисы используются для разрешения асинхронного кода, чтобы он разрешался как обычный синхронный код, который мы можем читать сверху вниз. Обещания традиционно используют обратные вызовы для разрешения нашего асинхронного кода. Мы используем обратный вызов .then() для разрешения успешно разрешенных промисов, а обратный вызов .catch() используем для разрешения промисов, которые отвечают с ошибкой.
Вот реальный пример использования React для получения данных из моего Github API с использованием Fetch API для отображения изображения моего профиля. Данные разрешаются с помощью промисов:
Вместо того, чтобы всегда использовать обратные вызовы для разрешения наших данных из промиса, мы можем использовать очищенный синтаксис, который выглядит идентичным синхронному коду, называемый синтаксисом async/await.
Ключевые слова async и await используются только с функциями (обычными функциями JavaScript, а не компонентами функций React. Чтобы использовать их, нам нужно убедиться, что наш асинхронный код находится в функции, перед которой стоит ключевое слово async. Любое значение обещания может быть разрешено с помощью поместив ключевое слово await перед ним.
Мы используем обратный вызов .catch() для обработки ошибок в традиционных промисах, но как вы отлавливаете ошибки с помощью async/await?
Мы по-прежнему используем .catch(), и когда мы сталкиваемся с ошибкой, например, когда у нас есть ответ от нашего API, который находится в диапазоне статуса 200 или 300:
7. Модули ES + синтаксис импорта/экспорта
ES6 дал нам возможность легко обмениваться кодом между нашими собственными файлами JavaScript, а также сторонними библиотеками с помощью модулей ES.
Кроме того, когда мы используем такие инструменты, как Webpack, мы можем импортировать ресурсы, такие как изображения и svg, а также файлы CSS и использовать их в качестве динамических значений в нашем коде.
Идея модулей ES состоит в том, чтобы иметь возможность разделить наш код JavaScript на разные файлы, чтобы сделать его модульным или повторно используемым в нашем приложении.
Что касается кода JavaScript, мы можем импортировать и экспортировать переменные и функции. Существует два способа импорта и экспорта: именованный импорт/экспорт и импорт/экспорт по умолчанию.
Может быть только одна вещь, которую мы делаем импортом или экспортом по умолчанию для каждого файла, и мы можем сделать столько вещей с именами импорта/экспорта, сколько захотим. Например:
Мы также можем записать все экспорты в конец файла, а не рядом с каждой переменной или функцией:
Вы также можете использовать псевдоним или переименовать то, что вы импортируете, используя ключевое слово as для именованного импорта. Преимущество экспорта по умолчанию заключается в том, что им можно присвоить любое имя.
За время, необходимое для просмотра вашего любимого телешоу, вы можете начать карьеру в React за 100 000 долларов в год.
В этом учебном курсе React премиум-класса вы сможете разблокировать знания, навыки и уверенность, которые принесут результаты, которые изменят вашу жизнь, в реальных долларах.
Получите инсайдерскую информацию, которую сотни разработчиков уже использовали, чтобы освоить React, найти работу своей мечты и взять под контроль свое будущее:
Нажмите здесь, чтобы получить уведомление, когда курс откроется
