Итоги недели в мире фронтенда и обзоры новых сервисов: что нужно знать до изучения React

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

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

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

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

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

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

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

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

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

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

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> ); };

Мы запустили еженедельную email-рассылку, посвященную последним новостям и тенденциям в мире фронтенда. В наших еженедельных рассылках ты найдешь:

Современные JavaScript-фреймворки и библиотеки.
HTML5 и CSS3: новые возможности и трюки.
Оптимизация производительности веб-приложений.
Тестирование и отладка кода.
Лучшие практики UI/UX.
Новые веб-стандарты и браузерные технологии.
Тренды в веб-дизайне и интерфейсах.
Прогрессивные веб-приложения (PWA).

📧 Подпишись, чтобы быть в числе первых, кто получит дайджест
Proglib.io

Эти операторы часто применяются с деструктуризацией и помогают эффективно работать с данными, что особенно полезно в 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-оператор часто используется для копирования объектов, объединения свойств или передачи пропсов:

Тернарные операторы в 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> ); };

♾🎓 Подтянуть свои знания по DevOps вы можете на нашем телеграм-канале «Библиотека DevOps для собеса»
Proglib.io

Стрелочные функции, добавленные в 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;

#🧩 Интересные задачи по C# для практики можно найти на нашем телеграм-канале «Библиотека задач по C#»
Proglib.io

Массивы – базовая структура данных в 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 для перехвата исключений и предоставления соответствующей обратной связи пользователю.

📖🤖 Больше полезных книг вы найдете на нашем телеграм-канале «Книги для дата-сайентистов | Data Science»
Proglib.io

Разработка привлекательных и адаптивных CSS-стилей с нуля – долгий и трудоемкий процесс. К счастью, существует множество CSS-фреймворков и библиотек, которые предоставляют готовые компоненты и утилиты. С их помощью можно быстро создавать красивые и адаптивные дизайны, экономить время и обеспечивать единообразие стилей. А чтобы фронтенд не выглядел шаблонно, достаточно совсем небольших усилий по кастомизации. Как говорил Брюс Ли: «Возьми полезное, отбрось бесполезное, добавь что-то свое».

Вот 10 лучших CSS-фреймворков и библиотек, которые точно стоят вашего внимания.

Самая популярная CSS-библиотека. Создана Twitter в далеком 2011 году, очень часто обновляется и совершенствуется. Включает обширный набор компонентов для типографики, кнопок, навигации, сеток, карточек и т. д. Предоставляет готовые JavaScript-плагины для модальных окон, подсказок и других элементов.

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

Сайт: getbootstrap.com

Утилитарный CSS-фреймворк, выпущенный в 2015 году. Не содержит конкретных стилей для определенных компонентов, а позволяет создавать кастомные дизайны с помощью утилитарных классов прямо в HTML.

Почему стоит использовать: кратно повышает скорость разработки и обеспечивает очень высокую степень кастомизации.

Сайт: tailwindcss.com

Современный CSS-фреймворк, построенный на Flexbox, с набором готовых компонентов и модульной структурой. Легко позволяет создавать адаптивные макеты и импортировать только нужные части.

Почему стоит использовать: мощность Flexbox и легкость, а также модульность.

Сайт: bulma.io

♾🧩 Интересные задачи по DevOps для практики можно найти на нашем телеграм-канале «Библиотека задач по DevOps»
Proglib.io

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

Почему стоит использовать: продвинутая настройка и адаптивность.

Сайт: get.foundation

CSS-фреймворк, построенный на принципах Material Design от Google. Предоставляет стильные кнопки, формы и карточки, а также JavaScript для добавления интерактивных элементов, например, параллакса.

Почему стоит использовать: современный вид и принципы Material Design.

Сайт: materializecss.com

Фреймворк с использованием простого и понятного HTML-синтаксиса для создания адаптивных и современных дизайнов. Сосредотачивается на удобстве написания кода и высокой кастомизации.

Почему стоит использовать: чистый HTML и мощные параметры кастомизации.

Сайт: semantic-ui.com

Минималистичная библиотека (около 400 строк кода), подходящая для небольших проектов с базовой сеткой и простыми стилями. Несмотря на маленький размер, позволяет быстро создать адаптивный сайт.

Почему стоит использовать: минимализм и легкость для небольших проектов.

Сайт: getskeleton.com

#🎓 Подтянуть свои знания по C# вы можете на нашем телеграм-канале «Библиотека C# для собеса»
Proglib.io

Минималистичная библиотека от Yahoo, предлагает набор адаптивных стилей для стандартных веб-элементов. Она модульная, что позволяет выбирать только нужные части.

Почему стоит использовать: адаптивность, минимализм и модульность.

Сайт: purecss.io

Модульная и легкая библиотека с полным набором компонентов, включая кнопки, слайдеры и модальные окна. Имеет обширную и подробную документацию, которая помогает быстро приступить к разработке.

Почему стоит использовать: предоставляет множество готовых компонентов на все случаи жизни.

Сайт: getuikit.com

CSS-микрофреймворк, разработанный с прицелом на производительность. Идеально подходит для базовых веб-проектов, требующих минимальных стилей и высокой скорости.

Почему стоит использовать: простота и производительность.

Сайт: milligram.io

# 📖 Больше полезных книг вы найдете на нашем телеграм-канале «Книги для шарпистов | C#, .NET, F#»
Proglib.io

Использование CSS-библиотек и фреймворков значительно упрощает и ускоряет процесс разработки за счет предоставления готовых компонентов и макетов – стильных и адаптивных. Независимо от того, работаете ли вы над крупным проектом или создаете простой дизайн, эти инструменты помогут вам выполнить работу быстрее и качественнее.

Автор рассылки: Наталья Кайда

📧 Подписаться на рассылку
Proglib.io

Итоги недели в мире фронтенда и обзоры новых сервисов: что нужно знать до изучения React

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

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

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

Привет!

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

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

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

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

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

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

📔 10 лучших CSS-библиотек и фреймворков для быстрой разработки фронтенда

1. Bootstrap

2. Tailwind CSS

3. Bulma

4. Foundation

5. Materialize

6. Semantic UI

7. Skeleton

8. Pure CSS

9. UIKit

10. Milligram

Ускоренная разработка, отличный результат