6 важни концепции на JavaScript за начинаещи в React

Като най-популярната библиотека за интерфейс, всеки иска да научи React. ReactJS е фундаментално JavaScript. Но това не означава, че трябва да научите всичко в JavaScript, за да преминете към ReactJS. Разбирането на фундаменталните концепции на JavaScript ще ви помогне да разберете по-лесно концепциите на React и в крайна сметка ще ускори способността ви да работите по проекти.

Нека очертаем основните понятия, които трябва да знаете за JavaScript, преди да преминете към ReactJS.

1. Функции на стрелките

Функциите със стрелки се използват широко в React. От версия 16.8 React се премести от базирани на клас компоненти към функционални компоненти. Функции на стрелките ви позволяват да създавате функции с по-кратък синтаксис.

Нека илюстрираме това в следните примери:

Редовна функция

функцияпоздрав() {
връщане'Здравейте'
}
конзола.log (поздрав()) //hello

Функция стрелка

позволявам поздрав = () =>'Здравейте'
конзола.log (поздрав()) //hello

Двете функции по-горе имат еднакъв изход, въпреки че синтаксисът е различен. Функцията със стрелка изглежда по-къса и по-чиста от обикновената функция. Обикновено компонентите на React имат следната структура:

импортиране Реагирайте от"реагира"
конст Книга = () => {
връщане (

Книга</div>

 )
}
износпо подразбиране Книга

Функциите със стрелки нямат имена. Ако искате да го наименувате, присвоете го на променлива. Разликата между обикновената и стрелковата функция е повече от синтаксиса. Научете повече за функциите на стрелките в Mozilla документация на разработчиците.

2. Деструктуриране

Деструктурирането се използва за получаване на данни от сложни структури от данни. В JavaScript масивите и обектите могат да съхраняват много стойности. Можете да манипулирате стойностите и да ги използвате в различни части на приложението.

За да получите тези стойности, трябва да деструктурирате променливата. В зависимост от структурата на данните, с която работите, можете да използвате нотация с точка (.) или нотация със скоби. Например:

конст студент = {
име: 'Дева Мария',
"адрес": „Южен парк, Витлеем“,
"възраст": 15
}

Деструктуриране:

конзола.log (student.name) // изход Мери

В горния пример нотацията с точка има достъп до стойността на ключа „име“. В ReactJS ще използвате концепцията за деструктуриране, за да получите и споделите стойности във вашето приложение. Деструктурирането помага да се избегне повторението и прави кода ви по-четлив.

3. Методи за масиви

Ще срещнете масиви няколко пъти, докато работите върху React проекти. Масивът е колекция от данни. Вие съхранявате данни в масиви, така че можете да ги използвате повторно, когато е необходимо.

Методите на масива се използват предимно за манипулиране, извличане и показване на данни. Някои често използвани масивни методи са карта(), филтър(), и намали (). Трябва да сте запознати с масивни методи за да разберете кога да приложите всеки.

Например, на карта() метод обхожда всички елементи в масив. Той действа върху всеки елемент от масива, за да създаде нов масив.

конст числа = [9, 16, 25, 36];
конст squaredArr = numbers.map(математика.sqrt) // 3,4,5,6 

Ще използвате масивни методи много в ReactJS. Ще ги използвате за преобразуване на масиви в низове, обединяване, добавяне на елементи и премахване на елементи от други масиви.

4. Кратки условия

Условните изрази са изрази, които JavaScript използва за вземане на решения в кода. Кратките условни изрази включват && (и), II (или) и троичния оператор. Това са по-кратки изрази на условия и операторите if/else.

Следващият пример показва как да използвате троичен оператор.

Код с оператор if/else:

функцияВреме на отваряне(ден) {
ако (ден == НЕДЕЛЯ) {
връщане12;
 } 
друго {
връщане9;
 }
}

Код с троичен оператор:

функцияВреме на отваряне(ден) {
връщане ден == НЕДЕЛЯ? 12: 9;
}

Научете повече за различни видове условни изрази със специален акцент върху кратките условни изрази. Те се използват широко в React.

5. Шаблонни литерали

Шаблонните литерали използват обратни отметки (``), за да дефинират низ. Шаблонните литерали ви позволяват да манипулирате низови данни, което ги прави по-динамични. Маркираните шаблонни литерали ви позволяват да извършвате операции в рамките на низ. Това са по-кратки изрази на условия и операторите if/else.

Например:

позволявам първо име = "Джейн";
позволявам фамилно име = "Сърна";
позволявам текст = `Добре дошли ${firstName}, ${lastName}!`; // Добре дошла, Джейн Доу!

6. Оператори на спред

Операторът Spread (...) копира стойностите на обект или масив в друг. Синтаксисът му се състои от три точки, последвани от името на променливата. Например (...име). Той обединява свойствата на два масива или обекта.

Следващият пример показва как да използвате оператора spread за копиране на стойностите на една променлива в друга.

конст имена = ['Дева Мария', "Джейн"]; 
конст членове на групата = ["Фред", ...имена, "Анджела"]; // ["Фред", "Мери", "Джейн", "Анджела"]

Можете да използвате оператора spread, за да извършвате редица операции. Те включват копиране на съдържанието на масив, вмъкване на масив в друг, достъп до вложени масиви и предаване на масиви като аргументи. Можете да използвате оператора за разпространение в ReactJS, за да управлявате промените в състоянието на компонентите.

Защо да научите ReactJS?

ReactJS е популярен с добра причина. Има кратка крива на обучение, надежден е и се рендира бързо в DOM. Той поддържа самостоятелни компоненти и има страхотни инструменти за отстраняване на грешки.

ReactJS включва нови концепции на JavaScript от ECMAScript 6 (ES6). Изучаването на фундаментални концепции в JavaScript ще улесни разработването на проекти в ReactJS.

На всичкото отгоре ReactJS има страхотна общност, която постоянно пуска нови актуализации. Ако искате да научите JavaScript библиотека, ReactJS би бил чудесен избор. Рамката Next.js допълва ограниченията на ReactJS. Комбинацията от двете прави ReactJS мощна библиотека от предния край.