От автора: я был немного вдохновлен этим утром твиттом от Кента Си Доддса. Признание: мне сегодня немного тоскливо, к тому же у меня небольшое похмелье, поэтому прошу прощения, если буду выражаться не слишком четко.. Но я увидел, что в списке Кента присутствует один пункт: vanilla javascript! Итак, давайте сделаем это самым простым способом: Это работает, но это немного скучно и ...
Читать далее »Архив меток: React
Лучшие практики кодирования на React и Redux
От автора: этим летом я закончил стажировку в Scott Logic, в их офисе в Ньюкасле. Имея небольшой опыт реализации реальных программных проектов, я обнаружил, что много смог почерпнуть из этого опыта. Мы работали над киоском для honesty.store. honesty.store — это магазин офисных товаров, он основан на идее, что люди платят за товары на веб-сайте и просто забирают их. Киоск позволял ...
Читать далее »Работа с ref в React
От автора: React ref позволяет получить доступ к узлам DOM непосредственно внутри React. Это полезно в ситуациях, когда, например, вы хотите изменить дочерний элемент компонента. Предположим, вы хотите изменить значение элемента input, но без использования свойства или повторного рендеринга всего компонента. Это то, что мы рассмотрим в этом посте. Как создать ref createRef() — это новый API, который поставляется с ...
Читать далее »Разделяй и властвуй! Отложенная загрузка для вашего SPA
От автора: «Как же это медленно? Я использую только 100 компонентов. Давай же, браузер, делайте свое дело! »Звучит знакомо? Ну, пришло время попробовать повысить производительность. Если вы являетесь веб-разработчиком, скорее всего, вы используете Webpack, и, возможно, вы не знаете, что такое отложенная загрузка. Что такое отложенная (ленивая) загрузка? Я знаю, о чем вы подумали: «Ленивый — это не быстрый, это ...
Читать далее »Библиотека React — обязательный инструмент для современного веб-разработчика
От автора: привет, друзья! Для front-end разработки сегодня есть множество инструментов. У каждого из них имеются свои преимущества и недостатки. Каждый из них по-своему уникален и специфичен. В данной статье мы поговорим с вами о библиотеке React, подробно рассмотрим, что это такое, обсудим ее преимущества перед другими подобными библиотеками и фреймворками. Также мы рассмотрим тему ее популярности и возможности заработка ...
Читать далее »Понятие компонентов высшего порядка в React и Gutenberg
От автора: Front end экосистема развивается чрезвычайно быстро, с ростом таких фреймворков, как React, Vue и Angular, что приводит к резким изменениям в архитектуре приложений и целым новым наборам шаблонов для разработчиков JavaScript. С WordPress, охватывающим React в новом редакторе Gutenberg, миллионы разработчиков внезапно внедряются в этот мир и пытаются не отстать от нововведений. В этой статье мы собираемся сломать ...
Читать далее »React JS — важные моменты разработки
От автора: в этой главе мы приведем лучшие методы, приемы и техники, с помощью которых осуществляется разработка на React. Они помогут нам оставаться последовательными во время создания приложения. Состояние — Следуем максимально избегать создания новых состояний. Рекомендуется централизовать состояние и передать его по дереву компонентов в качестве свойства. Каждый раз, когда у нас есть группа компонентов, которым нужны одни и ...
Читать далее »React JS — компоненты высшего порядка
От автора: компоненты высшего порядка React — это функции JavaScript, используемые для добавления дополнительных функциональных возможностей к существующему компоненту. Эти функции являются чистыми, что означает, что они получают данные и возвращают значения в соответствии с этими данными. Если данные изменяются, функции более высокого порядка перезапускаются с различными вводимыми данными. Если мы хотим обновить возвращаемый компонент, нам не нужно менять компоненты ...
Читать далее »React JS — анимация
От автора: в этой главе мы узнаем, как делается в React js анимация. Шаг 1 — Установите React CSS Transitions Group Это надстройка React, используемая для создания базовых CSS-переходов и анимации. Мы установим ее из окна командной строки: C:\Users\username\Desktop\reactApp>npm install react-addons-css-transition-group Шаг 2 — Добавьте файл CSS Давайте создадим новую папку css и в ней файл style.css. Чтобы иметь возможность ...
Читать далее »React JS — использование Flux
От автора: в этой главе мы познакомимся с тем, как реализовать в приложениях шаблон Flux React. Мы будем использовать среду Redux. Цель этой главы — представить простейший пример каждой части, необходимой для подключения Redux и React. Шаг 1 — Установите Redux Мы установим Redux через окно командной строки. C:\Users\username\Desktop\reactApp>npm install --save react-redux C:\Users\username\Desktop\reactApp>npm install --save redux Шаг 2. Создание файлов ...
Читать далее »