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

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

📜 8 важнейших аспектов JavaScript, которые нужно освоить до изучения 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> ); };

Привет!

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

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

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

♾🎓 Подтянуть свои знания по 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

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

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

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

1. Bootstrap

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

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

2. Tailwind CSS

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

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

Сайт: tailwindcss.com

3. Bulma

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

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

Сайт: bulma.io

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

Proglib.io

4. Foundation

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

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

Сайт: get.foundation

5. Materialize

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

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

6. Semantic UI

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

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

Сайт: semantic-ui.com

7. Skeleton

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

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

Сайт: getskeleton.com

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

Proglib.io

8. Pure CSS

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

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

Сайт: purecss.io

9. UIKit

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

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

Сайт: getuikit.com

10. Milligram

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

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

Сайт: milligram.io

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

Proglib.io

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

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

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

11
3 комментария

Чет какие то призывы сатаны тут расписаны

2
Ответить

Работаю 7 лет в вебе, про Bulma впервые слышу

Ответить

Говорят все программисты долбятся в сраку. Это правда?

Ответить