⚛️ 8 важнейших аспектов JavaScript, которые нужно освоить до изучения React

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

Начинающие фронтендеры часто приступают к работе с React, не изучив досконально основные концепции JavaScript. В результате освоение библиотеки дается с трудом. Исправим эту ошибку!

Шаблонные литералы

Раньше конструирование строк в JS выглядело громоздко и неаккуратно:

let name = prompt("Как вас зовут?");
let greeting = alert("Привет, " + name + "!");

С появлением ES6 стало возможным использовать шаблонные литералы. Они создаются с помощью обратных кавычек `` и позволяют вставлять переменные прямо в строку:

let name = prompt("Как вас зовут?");
let greeting = alert(`Привет, ${name}`);

Шаблонные литералы очень упрощают динамическое создание строковых компонентов в React:

const name = 'Алиса';
const greeting = `Привет, ${name}! Как дела?`;
console.log(greeting); // Вывод: Привет, Алиса! Как дела?

const items = ['яблоко', 'банан', 'апельсин'];
const listItems = items.map(item => `<li>${item}</li>`).join('');
const list = `<ul>${listItems}</ul>`;

Деструктуризация

Деструктуризация в JavaScript позволяет извлекать значения из массивов или свойства объектов в отдельные переменные, что упрощает работу с данными. Чтобы деструктурировать объект, используют фигурные скобки { }, указывая нужные свойства:

const person = {
	firstName: 'Евгений',
	lastName: 'Онегин',
	jobPosition: 'фронтенд-разработчик',
	age: 30
};

const { lastName, firstName } = person;
console.log(firstName, lastName); // Вывод: Евгений Онегин

Вложенные объекты тоже можно деструктурировать:

const address = {
	street: 'Невский проспект',
	city: 'Санкт-Петербург',
	region: {
    	name: 'Северо-Западный федеральный округ',
    	abbreviation: ' СЗФО'
	}
};

Можно задавать значения по умолчанию, если свойство отсутствует:

const { street, city, region: { name } } = address;
console.log(street, city, name);
const config = {
	theme: 'light'
};

const { theme = 'dark' } = config;
console.log(theme); // Вывод: light

Деструктуризация позволяет переименовать свойства:

const person = {
	firstName: 'Татьяна',
	lastName: 'Ларина',
	jobDescription: 'UI-дизайнер',
	age: 25
};

const { firstName: givenName, lastName: familyName } = person;
console.log(givenName, familyName); // Вывод: Татьяна Ларина

Для деструктуризации массива используют квадратные скобки [], указывая индексы элементов:

const numbers = [1, 2, 3, 4, 5];
const [first, second] = numbers;
console.log(first, second); // Вывод: 1 2

В React деструктуризация позволяет легко извлекать и переименовывать данные в компонентах, делая код чище и понятнее:

import React from 'react';

const MyComponent = ({ name, age }) => {
  return (
	<div>
  	<h1>Привет, {name}!</h1>
  	<p>Вам {age} лет.</p>
	</div>
  );
};

Операторы rest и spread

Эти операторы часто применяются с деструктуризацией и помогают эффективно работать с данными, что особенно полезно в React для передачи пропсов, клонирования и объединения объектов и массивов. Хотя rest и spread используют одинаковый синтаксис …, они решают разные задачи.

Оператор ...rest собирает оставшиеся элементы массива или свойства объекта в новый массив или объект:

const numbers = [1, 2, 3, 4, 5];
const [first, ...rest] = numbers;
console.log(rest); // Вывод: [2, 3, 4, 5]

Оператор spread используется для распаковки массива или объекта, позволяя легко добавлять или копировать их содержимое:

const numbers = [1, 2, 3];
const newArray = [...numbers, 4, 5];
console.log(newArray); // Вывод: [1, 2, 3, 4, 5]

В React spread оператор часто используется для копирования объектов, объединения свойств или передачи пропсов:

const person = { name: 'Евгений', age: 30 };
const newPerson = { ...person, city: 'Москва' };
console.log(newPerson); // Вывод: { name: 'Евгений', age: 30, city: 'Москва' }

Тернарные операторы

Тернарные операторы в JavaScript позволяют записывать условные выражения компактнее, чем с помощью if/else:

let age = 19;
const message = age >= 18 ? 'Вы совершеннолетний.' : 'Вы несовершеннолетний.';
console.log(message); // Вывод: Вы совершеннолетний.

В React тернарные операторы используются для условного рендеринга:

const MyComponent = ({ isLoggedIn }) => {
	return (
    	<div>
    	{isLoggedIn ? (
        	<p>Добро пожаловать!</p>
    	) : (
        	<p>Пожалуйста, войдите в систему.</p>
    	)}
    	</div>
	);
};

Стрелочные функции

Стрелочные функции, добавленные в ES6, предлагают краткий синтаксис, улучшая читаемость и поддержку кода:

const greet = name => `Привет, ${name}!`;
console.log(greet('Вася')); // Вывод: Привет, Вася!

Они часто используются в React для создания коротких и понятных обработчиков и других вспомогательных функций:

<button onClick={() => this.handleClick()}>Нажми меня</button>

Стрелочные функции удобно использовать с методами map, filter и reduce:

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2);

Кроме того, в React можно передавать стрелочные функции в качестве пропсов:

const MyComponent = ({ name, onButtonClick }) => {
	return (
    	<button onClick={onButtonClick}>Нажми меня</button>
	);
};

Короткие замыкания

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

Оператор && прекращает выполнение, если первое значение ложно, и сразу возвращает его. Если первое значение истинно, возвращается второе значение:

const isLoggedIn = true;
const greeting = isLoggedIn && <p>Добро пожаловать!</p>;

Оператор || работает наоборот: если первое значение истинно, оператор возвращает его, иначе – второе значение:

const username = 'Татьяна';
const greeting = username || 'Гость';

Оператор объединения с null ?? возвращает первое значение, если оно не null или undefined, иначе возвращает второе значение:

let numberOfBooksRead = 0;
const hasRead = numberOfBooksRead ?? 'Нет данных'; 
// hasRead = 0

Оператор ?. безопасно проверяет наличие вложенных свойств, возвращая undefined, если значение не существует:

const user = { address: { street: 'Ул. Зеленая, 123' } };
const street = user?.address?.street;

Основные методы массивов

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

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

const items = ['яблоко', 'банан', 'апельсин'];
const updatedItems = items.map(item => item === 'яблоко' ? 'грейпфрут' : item);

filter() создает новый массив только из элементов, которые соответствуют заданному условию. Подходит для удаления ненужных элементов:

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);

reduce() применяет функцию к каждому элементу массива, сокращая массив до одного значения:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);

Среди других методов массивов, которые особенно часто используются в React:

• sort() – сортирует элементы массива на месте.
• flatMap() – распаковывает вложенные массивы и применяет функцию ко всем элементам.
• find() – возвращает первый элемент, удовлетворяющий условию.

При сложной обработке данных, результаты которой последовательно изменяют интерфейс, методы массивов можно использовать цепочкой:

const users = [
	{ name: 'Болконский', age: 30 },
	{ name: 'Безухов', age: 28 },
	{ name: 'Онегин', age: 26 }
];

const adultUsers = users
	.filter(user => user.age >= 18)
	.map(user => ({ name: user.name, age: user.age }));

Получение данных

Получение данных – один из важнейших аспектов разработки фронтенда: данные используются для заполнения компонентов, обновления интерфейса и создания динамичного пользовательского опыта.

Промисы и fetch

Промисы представляют собой объект, который обозначает окончание (или неудачу) асинхронной операции. Функция fetch() – это встроенная функция JavaScript, которая возвращает промис, представляющий запрос на получение ресурса:

fetch('https://api.example.com/data')
	.then(response => response.json())
	.then(data => {
               	// Обработка данных здесь
               	console.log(data);
	})
	.catch(error => {
               	// Обработка ошибок здесь
               	console.error(error);
	});

async/await

Синтаксис async/await предлагает более удобный способ работы с промисами, позволяя писать асинхронный код, который выглядит как синхронный:

async function fetchData() {
	try {
               	const response = await fetch('https://api.example.com/data');
               	const data = await response.json();
               	console.log(data);
	} catch (error) {
               	console.error(error);
	}
}

fetchData();

Получение данных в компонентах React

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

import React, { useEffect, useState } from 'react';
function MyComponent() {
	const [data, setData] = useState(null);

	useEffect(() => {
    	const fetchData = async () => {
        	try {
            	const response = await fetch('https://api.example.com/data');
            	const data = await response.json();
            	setData(data);
        	} catch (error) {
            	console.error(error);
        	}
    	};

    	fetchData();
	}, []);

	return (
    	<div>
        	{data ? (
            	<p>Данные: {JSON.stringify(data)}</p>
        	) : (
            	<p>Загрузка...</p>
        	)}
    	</div>
	);
}

В процессе получения данных важно обрабатывать ошибки с помощью блоков try/catch для перехвата исключений и предоставления соответствующей обратной связи пользователю.

Frontend Basic: от нуля до первых проектов в портфолио

Хотите освоить Frontend с нуля? В Proglib Academy запустили практический курс:

• 26 видеоуроков и 28 практических заданий с пожизненным доступом
• Стек: HTML, CSS, JavaScript, React.js, Git
• Проекты для портфолио: от простой верстки до полноценного интернет-магазина
• Персональные консультации с действующими разработчиками из Газпромбанка и Айньюс

Особенно круто, что курс построен по принципу «делай как я» — смотришь, повторяешь, получаешь фидбек. Никакой воды и лишней теории.