React JS — одна из самых популярных библиотек среди разработчиков интерфейса, и из-за ее популярности нет сомнений, что все хотят ее изучить. Но прежде чем перейти непосредственно к React JS, вам нужно изучить некоторые концепции JavaScript, поскольку вы будете использовать много JavaScript при создании веб-приложения с использованием React JS.
В этой статье я собираюсь пропустить очень простые вещи, такие как объявление переменных или введение в функции, потому что это подразумевает, что вам нужно знать основы программирования и синтаксис языка.
Я расскажу о том, что вам нужно знать о JavaScript, чтобы вы были готовы начать изучение React JS.
Начнем……
Функция стрелки
Когда вы работаете с React, вы обнаружите, что много работаете со стрелочными функциями. Это новая функция ES6, которая почти часто использовалась в последних кодовых базах, потому что она делает код чистым и читабельным. Мы можем использовать эту функцию для написания функций с более кратким синтаксисом.
Чтобы заменить обычные функции стрелочными функциями, просто удалите ключевое слово function и добавьте жирную стрелку «=›» после «()».
При передаче параметров круглые скобки по-прежнему необходимы, однако они необязательны, если параметр только один.
Функция обратного вызова
Функция, которая передается другой функции в качестве параметра, является функцией обратного вызова.
Здесь внутри функции callbackExample() вызывается другая функция, которая принимает ее в качестве аргумента. В JavaScript это допустимо и называется «обратным вызовом». Обратные вызовы гарантируют, что функция будет запущена сразу после завершения задачи. Он защищает нас от ошибок и проблем, помогая нам писать асинхронный код JavaScript.
Метод карты ()
Метод Map() является одним из наиболее часто используемых методов, который перебирает массив и возвращает элементы в новом массиве после запуска функции обратного вызова для каждого элемента.
Давайте посмотрим пример…
Несколько замечаний:
а. Даже если исходный массив пуст, map() всегда создает новый массив.
б. Он не изменяет размер исходного массива.
в. При создании нового массива всегда используются значения из существующего.
Обещания
Если вы новичок в JavaScript, вам может быть трудно понять, что такое обещание. Давайте попробуем понять обещания на примере из реальной жизни.
Предположим, вы недавно приняты на работу в компанию, и это ваш первый рабочий день. К вам подходит менеджер и просит выполнить срочное задание в течение часа, а вы обещаете сообщить ему, как только выполните данное задание.
Предполагая, что задача в конечном итоге завершена, и вы сообщаете об этом своему руководителю:
«Успешно, я выполнил задачу!»
Но если вы не смогли выполнить данное задание в течение часа, вы сообщите об этом своему менеджеру
«Извините, я не смог выполнить задание в течение часа.
А пока менеджер устанавливает статус задачи как ОТРЕЗАННАЯ, пока вы над ней не поработаете.
Как только вы выполните задание, это означает, что вы добились успеха. Если вы не смогли выполнить задание, значит Отклонено.
Ваше обещание вашему руководителю выполнить задачу является синонимом того, как мы определяем обещание в JavaScript. Код не возвращает значение мгновенно или напрямую. Вместо этого он дает обещание, что в конечном итоге принесет пользу.
Обещания JavaScript являются асинхронными, что означает, что для их выполнения или выполнения требуется некоторое время. Так же, как поставленная задача требует времени для выполнения. Кроме того, движок JS ничего не делает; вместо этого он начинает выполнять другие разделы кода, ожидая возвращаемого значения промиса.
Вызов класса Promise и создание объекта следующим образом позволит вам определить промисы в JavaScript:
Выполнение этого в консоли вернет объект Promise:
Асинхронно/ожидание
Предположительно, это лучший подход к написанию обещаний, и он помогает поддерживать ясность и чистоту нашего кода. Любую обычную функцию можно превратить в промис, просто добавив перед ней слово async.
Перед async/await, чтобы дать обещание, мы написали это:
Теперь, используя async/await, мы пишем примерно так:
Ключевое слово await заставляет JavaScript ждать, пока промис не установится и не вернет свой результат.
Разрушение
Распаковка элементов массива или объекта называется деструктурированием. Деструктуризация дает вам возможность манипулировать и переключать элементы после их распаковки в зависимости от операции, которую вы хотите выполнить. Деструктуризация позволяет легко извлечь только то, что необходимо.
Вот пример того, как массив деструктурируется в переменные:
Другие понятия
Ниже приведены другие концепции JS, которые вам необходимо знать, прежде чем писать свой первый код React JS.
а) Литерал шаблона
б) Обработка ошибок
в) Модули, импорт, экспорт, бабел
г) ключевое слово класса ES6
д) Получить API
Это те, на которые вы можете не обращать внимания при изучении JavaScript, даже если есть так много других методов и идей, о которых вам следует знать. Прежде чем изучать React, вы должны понять это.
Спасибо, счастливое кодирование.
