Как самая популярная библиотека интерфейса, все хотят изучить React. ReactJS — это, по сути, JavaScript. Но это не значит, что вы должны изучить все в JavaScript, чтобы перейти на ReactJS. Понимание фундаментальных концепций JavaScript поможет вам легче понять концепции React и, в конечном счете, ускорит вашу способность работать над проектами.
Давайте обрисуем в общих чертах основные понятия, которые вы должны знать о JavaScript, прежде чем переходить к ReactJS.
1. Стрелочные функции
Стрелочные функции широко используются в React. Начиная с версии 16.8 React перешел от компонентов на основе классов к функциональным компонентам. Стрелочные функции позволяют создавать функции с более коротким синтаксисом.
Проиллюстрируем это на следующих примерах:
Обычная функция
функцияприветствие() {
возвращаться'привет'
}
консоль.log (приветствие()) //helloФункция стрелки
позволять приветствие = () =>'привет'
консоль.log (приветствие()) //helloДве приведенные выше функции имеют одинаковый результат, хотя синтаксис у них разный. Стрелочная функция выглядит короче и чище, чем обычная функция. Обычно компоненты React имеют следующую структуру:
Импортировать Реагировать от«реагировать»константа Книга = () => {
возвращаться (
Забронировать</div>)
}
экспортпо умолчанию Книга
Стрелочные функции не имеют имен. Если вы хотите назвать его, назначьте его переменной. Разница между обычной и стрелочной функциями заключается не только в синтаксисе. Узнайте больше о функциях стрелок в Мозилла документации разработчиков.
2. Разрушение
Деструктуризация используется для получения данных из сложных структур данных. В JavaScript массивы и объекты могут хранить множество значений. Вы можете манипулировать значениями и использовать их в разных частях приложения.
Чтобы получить эти значения, вы должны деструктурировать переменную. В зависимости от структуры данных, с которой вы имеете дело, вы можете использовать нотацию с точкой (.) или скобками. Например:
константа студент = {'имя': 'Мэри',
'адрес': «Южный парк, Вифлеем»,
'возраст': 15
}
Деструктуризация:
консоль.log (имя_учащегося) // вывод МэриВ приведенном выше примере запись через точку обращается к значению ключа «имя». В ReactJS вы будете использовать концепцию деструктуризации для получения и совместного использования значений в вашем приложении. Деструктуризация помогает избежать повторений и делает ваш код более читабельным.
3. Методы массива
Вы будете сталкиваться с массивами несколько раз, работая над проектами React. Массив — это набор данных. Вы храните данные в массивах, чтобы при необходимости их можно было использовать повторно.
Методы массива в основном используются для управления, извлечения и отображения данных. Некоторые часто используемые методы массива: карта(), фильтр(), и уменьшать(). Вы должны быть знакомы с методы массива понять, когда применять каждый.
Например, карта() Метод выполняет итерацию по всем элементам массива. Он действует на каждый элемент массива, чтобы создать новый массив.
константа числа = [9, 16, 25, 36];
константа SquareArr = числа.карта(Математика.sqrt) // 3,4,5,6
Вы будете часто использовать методы массива в ReactJS. Вы будете использовать их для преобразования массивов в строки, объединения, добавления элементов и удаления элементов из других массивов.
4. Короткие условия
Условные операторы — это операторы, которые JavaScript использует для принятия решений в коде. К коротким условным операторам относятся && (и), II (или) и тернарный оператор. Это более короткие выражения условий и операторы if/else.
В следующем примере показано, как использовать тернарный оператор.
Код с оператором if/else:
функциявремя открытия(день) {
если (день == ВОСКРЕСЕНЬЕ) {
возвращаться12;
}
еще {
возвращаться9;
}
}Код с тернарным оператором:
функциявремя открытия(день) {
возвращаться день == ВОСКРЕСЕНЬЕ? 12: 9;
}Узнать о различные типы условных предложений с особым акцентом на короткие условные предложения. Они широко используются в React.
5. Литералы шаблонов
Литералы шаблонов используют обратные кавычки (``) для определения строки. Литералы шаблонов позволяют манипулировать строковыми данными, делая их более динамичными. Литералы шаблонов с тегами позволяют выполнять операции в строке. Это более короткие выражения условий и операторы if/else.
Например:
позволять имя = "Джейн";позволять фамилия = "Доу";
позволять текст = `Добро пожаловать ${имя}, ${фамилия}!`; // Добро пожаловать, Джейн Доу!
6. Операторы спреда
Оператор Spread (...) копирует значения одного объекта или массива в другой. Его синтаксис состоит из трех точек, за которыми следует имя переменной. Например (...имя). Он объединяет свойства двух массивов или объектов.
В следующем примере показано, как использовать оператор распространения для копирования значений одной переменной в другую.
константа имена = ['Мэри', 'Джейн'];
константа группамемберс = ['Фред', ...имена, 'Анжела']; // ["Фред", "Мэри", "Джейн", "Анжела"]
Вы можете использовать оператор распространения для выполнения ряда операций. К ним относятся копирование содержимого массива, вставка массива в другой, доступ к вложенным массивам и передача массивов в качестве аргументов. Вы можете использовать оператор распространения в ReactJS для обработки изменений состояния в компонентах.
Зачем изучать ReactJS?
ReactJS популярен не зря. Он имеет короткую кривую обучения, надежен и быстро отображается в DOM. Он поддерживает автономные компоненты и имеет отличные инструменты отладки.
ReactJS включает в себя новые концепции JavaScript из ECMAScript 6 (ES6). Изучение фундаментальных концепций JavaScript облегчит разработку проектов в ReactJS.
Вдобавок ко всему, у ReactJS отличное сообщество, которое постоянно выпускает новые обновления. Если вы хотите изучить библиотеку JavaScript, ReactJS будет отличным выбором. Фреймворк Next.js дополняет ограничения ReactJS. Сочетание этих двух факторов делает ReactJS мощной внешней библиотекой.