Как стать автором
Обновить
61.56

ReactJS *

JavaScript-библиотека для создания интерфейсов

Сначала показывать
Период
Уровень сложности

Поиск данных в столбцах таблицы с пагинацией (front-часть)

Время на прочтение4 мин
Количество просмотров7.8K

Проблемы поиска данных всегда отличались особенной сложностью и зачастую нестандартностью в подходах. Сегодня я бы хотел остановиться на одной интересной задаче, которую мне пришлось решать совсем недавно во время разработки платформы Интернета вещей. Впрочем, такая задача, может встретиться и на любом другом проекте, где есть динамическая подгрузка данных по REST API. Будь то подгрузка во время пагинации, или во время скроллинга, или как то иначе…

Читать далее

5 подходов к стилизации React-компонентов на примере одного приложения

Время на прочтение4 мин
Количество просмотров20K


Доброго времени суток, друзья!

Сегодня я хочу поговорить с вами о стилизации в React.

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

Когда дело касается разметки (HTML), то React предоставляет в наше распоряжение JSX (JavaScript и XML). JSX позволяет писать разметку в JS-файлах — данную технику можно назвать «HTML-в-JS».

Однако, когда речь идет о стилях, то React не предоставляет каких-либо специальных инструментов (JSC?). Поэтому каждый разработчик волен выбирать такие инструменты по своему вкусу.

Пишем свой CLI генерации React компонент, а может быть не только компонент, а может не только React

Время на прочтение4 мин
Количество просмотров2.8K

Всем привет!


В этой статье, я хочу вам рассказать о том, как так получилось, что мне пришлось писать свой CLI генерации React компонент, притом, что готовых решений достаточно много.

Читать дальше →

Как не закопаться в рефакторинге на фронте. Советы новичку

Время на прочтение6 мин
Количество просмотров5.6K
С тех пор как вам доверяют не только кодить под строгим контролем, но и принимать даже минимальные решения, вы становитесь в полной мере ответственны за будущее проекта. В том числе, за стоимость его последующей поддержки. Имея опыт с действительно долгосрочными историями, мы собрали несколько советов о том, как не “стрелять в ноги” себе, своим коллегам и тем, кто придет на проект после вас.

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

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

image
Читать дальше →

Типичные ошибки джунов, использующих React

Время на прочтение4 мин
Количество просмотров6.5K
Об основных ошибках junior-разработчиков, использующих React. На чем сыпятся джуны, и как с этим жить. Перевод статьи «Mistakes Junior React Developers Make» от специалиста Frontend практики «Рексофт».

Читать дальше →

Redux store vs React state

Время на прочтение14 мин
Количество просмотров19K
Как спроектировать хранение данных в React-приложении? Где хранить данные приложения: в глобальном хранилище (Redux store) или в локальном хранилище (component state)?
Такие вопросы возникают у разработчиков, начинающих использовать библиотеку Redux, и даже у тех, кто ей активно пользуется.

Мы в BENOVATE за 5 лет разработки на React опробовали на практике различные подходы к построению архитектуры таких приложений. В статье рассмотрим возможные критерии для выбора места хранения данных в приложении.
Читать дальше →

Очередное руководство по уменьшению бойлерплейта в Redux (NGRX)

Время на прочтение10 мин
Количество просмотров12K


О чем пойдет речь?


Будем о говорить о нескольких (пяти, если быть конкретным) способах, трюках, кровавых жертвах богу энтерпрайза, которые вроде как должны помочь нам писать более лаконичный и выразительный код в наших Redux (и NGRX!) приложениях. Способы выстраданы потом и кофе. Просьба сильно пинать и критиковать. Будем учиться кодить лучше вместе.

Читать дальше →

Чем на самом деле является Node.js?

Время на прочтение4 мин
Количество просмотров136K


Node.js это — среда выполнения JavaScript. Что же это значит, и как работает?
Окружение Node.js включает все, что вам нужно для выполнения программы, написанной на JavaScript.

Оптимизируем (debounce) срабатывание событий в React

Время на прочтение1 мин
Количество просмотров8.3K

Вышел перевод видео с канала Manorism. В этот раз ничего нового. Наоборот, вспоминаем "старое" и оптимизируем частоту срабатывания событий с помощью "дебаунс" (debounce).


Читать дальше →

Частые трудности работы с React.js

Время на прочтение8 мин
Количество просмотров29K
Привет, Хабр! Представляю вашему вниманию перевод статьи Samer Buna «React.js Frequently Faced Problems».
Не паникуйте. Вы правы: существуют мириады веб-технологий, архитектур и фреймворков, и множество разрабатывается прямо сейчас. Помните: каждый, кто стал профессиональным веб-разработчиком начинал как и вы. Они изучали языки, библиотеки по одному, раз за разом, пока не прокачали свои навыки и механизмы работы

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

На самом деле, если вы сконцентрируетесь на одной вещи, например на создании сайта на простейшем HTML/CSS/JavaScript без библиотек, а потом добавите фреймворк по типу React’а, ваш путь от новичка до профессионала пройдет гораздо удобнее и приятнее.
И правда, новичкам бывает сложно разобраться с простыми вещами, на которые опытный разработчик даже не обращает внимание. Эта статья призвана разобрать популярные ошибки и затруднения, с которыми сталкиваются большинство изучающих React.
Читать дальше →

Простейший генератор redux types для асинхронных запросов

Время на прочтение3 мин
Количество просмотров3.4K
Для того, чтобы немного сократить шаблонный код при использовании Redux, в голову пришла идея написать максимально простую библиотеку для генерации типов асинхронных запросов.

image

Читать дальше →

Redux: попытка избавиться от потребности думать во время запросов к API

Время на прочтение4 мин
Количество просмотров9.9K

И в чем же проблема?


Я начал изучать React и Redux не так давно, но он уже успел изрядно потрепать мне нервы. Буквально над каждым действием приходится задумываться — почти никакие изменения в коде невозможны без того, чтоб что-то оторвать. Чтоб просто получить список постов по API и вывести их, надо, пожалуй, написать не меньше сотни строк кода — создать корневой контейнер, создать store, добавить action для запроса к API, для успешного результата запроса, для неудачного результата запроса, создать action-creators, сматчить action-creators и props, сматчить dispatch и props, написать reducer на каждый action… Ух, продолжать не хочется. И все это мы должны делать заново для каждого веб-приложения — крайне нерациональная трата сил программиста.


Да, можно сказать новичку: "Смотри, тут десяток пакетов, которые могут сделать каждое действие из этого списка вместо тебя. Выбирай и пользуйся!" Но проблема в том, что надо разобраться в настройке и воспользоваться десятком пакетов, позаботившись о том, чтоб они совпадали с версией, которая описана в документации и не вступали друг с другом в конфликты… Слишком сложно. Хочется чего-то проще, такого же простого, как в мире Django, из которого я пришел. Какой-то один пакет, после установки которого в store сами по волшебству складываются все нужные данные — бери и пользуйся.


Ну, я и решил — если такого решения нет, напишу-ка я его сам.


Постановка задачи


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


  1. Делать асинхронный GET-запрос к REST API.
  2. Анализировать полученные данные и данные, лежащие в store, и, если там не хватает связанных по foreign key данных, делать еще запросы.
  3. Складывать полученные данные в store и следить за актуальностью хранящихся данных.

По описанию выходит, что состоять пакет будет из action creator'а, middleware и reducer'а.

Читать дальше →
12 ...
84