Как стать автором
Поиск
Написать публикацию
Обновить
27.51

ReactJS *

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

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

Работа с формами в React.js, используя базовый инструментарий

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

Введение


За время работы на React.js мне часто приходилось сталкиваться с обработкой форм. Через мои руки прошли Redux-Form, React-Redux-Form, но ни одна из библиотек не удовлетворила меня в полной мере. Мне не нравилось, что состояние формы хранится в reducer, а каждое событие проходит через action creator. Также, согласно мнению Дана Абрамова, «состояние формы по своей сути является эфемерным и локальным, поэтому отслеживать его в Redux (или любой библиотеке Flux) не нужно».


Замечу, что в React-Redux-Form есть компонент LocalForm, который позволяет работать без redux, но на мой взгляд, пропадает смысл устанавливать библиотеку размером 21,9kB и использовать её менее чем на половину.


Я не против названных библиотек, в конкретных случаях они незаменимы. Например, когда от введённых данных зависит сторонний компонент, не связанный с формой. Но в своей статье я хочу рассмотреть формы, которые не нуждаются в redux.


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

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

Решение отсутствия prevProps в getDerivedStateFromProps

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

Привет, друзья!


Итак, разработчики Реакта решили сделать нашу работу с их либой более линейной, направить, так сказать, нас нерадивых на путь наименьшего шанса ошибиться и написать плохой код, что, на мой взгляд, является нашим неотъемлемым правом и способом совершенствоваться и изобретать. Речь идет о всеми любимых методах componentWillReceiveProps и других из той же серии, их больше не будет, но нам дадут альтернативу в виде статического метода getDerivedStateFromProps. Лично мне он напоминает темную комнату, где лежат вещи, и их нужно найти, но ничего не видно.


Разработчики в своих ответах на гневные комментарии пользователей Реакта пишут мол: Ну не дадим мы вам prevProps, это невозможно, придумайте что-нибудь, prevProps нет, ну вы держитесь там, просто кешируйте их в состоянии, в общем предлагают нам сделать небольшой костылек в нашем новом хорошем коде. Это все конечно несложно, можно понять и простить, но вот меня раздосадовал тот факт, что теперь у меня нет контекста this, комнату мою замуровали, из нее ничего не видно, даже соседей не слышно, вот и решил я написать для себя штуку, которая скроет в себе все костыли и мой код будет с виду хоть и странным, но бескостыльным (а бескостыльным ли?).


В общем, мне нужно внедрить prevProps в состояние компонента, еще хочется чтобы все выглядело как обычно, а также невозможно прожить без волшебного this в статическом getDerivedStateFromProps (вот дурак!). Два дня мучений и самосовершенствования и все готово, я родил мышь.

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

Как интегрировать ReactJS в 1С-Битрикс с автоматической генерацией шаблонов на back-end на примере сети Глобус

Время на прочтение5 мин
Количество просмотров21K
В этом году впервые начали внедрение ReactJS для интернет-магазина сети гипермаркетов Глобус. Проект интересен тем, что расширяет возможности платформы Битрикс и при этом сохраняет возможность генерации страниц для поисковиков и не захламляет дублированием кода и верстки. В этой статье рассказываем о том, как связать компоненты Битрикса с компонентами ReactJS при помощи модуля v8js для php и сохранить основную фронтовую часть сайта.
Читать дальше →

Kotlin + React vs Javasript + React

Время на прочтение7 мин
Количество просмотров23K
Мысль перевести фронт на какой-либо js фреймворк появилась одновременно с возможностью писать React на Kotlin. И я решил попробовать. Основная проблема: мало материалов и примеров (постараюсь эту ситуацию поправить). Зато у меня полноценная типизация, безбоязненный рефакторинг, все возможности Kotlin, а главное, общий код для бека на JVM и фронта на Javascript.

В этой статье будем писать страницу на Javasript + React параллельно с её аналогом на Kotlin + React. Чтобы сравнение было честным, я добавил в Javasript типизацию.


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

Основы Redux (текстовый учебник, 2-е издание)

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

Прошло 2.5 года после публикации первой версии подробного туториала по основам Redux. За это время gitbook насчитал 200 000+ уникальных посетителей.


redux cover


Под катом подробнее об учебнике и список изменений.

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

Serverless и React 2: ловкость рук и никакого мошенничества

Время на прочтение15 мин
Количество просмотров11K
Можно ли по-простому рассказать фронтенд-разработчикам о работе «безоблачной» архитектуры Serverless в рамках AWS (Amazon Web Services)? Почему бы и нет. Давайте отрендерим React/Redux-приложение в архитектуре AWS, а после этого поговорим о плюсах и минусах AWS-лямбд.


В основе материала — расшифровка доклада Марины Миронович с нашей весенней конференции HolyJS 2018 в Санкт-Петербурге.

11 библиотек (наборов компонентов) для React Native, о которых стоит знать в 2018-м

Время на прочтение5 мин
Количество просмотров30K
В начале года мы опубликовали несколько материалов о популярных наборах компонентов для React, Angular и Vue. Сегодня мы представляем вашему вниманию перевод статьи из той же серии, посвящённой React Native. Учитывая непрекращающийся рост популярности React, и то, что мобильные приложения и PWA становятся всё востребованнее, неудивителен тот факт, что React Native привлекает всё большее внимание сообщества разработчиков.



Фреймворк React Native очень похож на React в том плане, что его применение подталкивает программиста к созданию пользовательских интерфейсов с использованием изолированных компонентов. Наборы таких компонентов, предназначенные для разработки интерфейсов, дают разработчикам готовые модули, использование которых помогает экономить время, ускоряя работу. Здесь мы обсудим одиннадцать наборов компонентов, которые отличаются хорошей поддержкой их создателей. Они, надеемся, пригодятся всем, кому приходится разрабатывать интерфейсы на React Native
Читать дальше →

Легенда о Фреймворке Всевластия

Время на прочтение11 мин
Количество просмотров13K
В последнее время набирает популярность тренд «исчезающих фреймворков», локомотивом которого, без сомнения, можно считать SvelteJS — buildtime-фреймворк и компилятор в ванильный javascript.

Несмотря на то, что концептуально Svelte весьма прост, а в использовании еще проще, многие разработчики задаются вопросом, в чем же killer-фича данного фреймворка, да и подхода в целом? Почему это не «yet another javascript framework»?

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

Давайте разберемся, но сначала я расскажу вам одну легенду…


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

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

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


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

Как сделать поиск пользователей по GitHub без React + RxJS 6 + Recompose

Время на прочтение6 мин
Количество просмотров5.7K
Эта статья является ответом на статью-перевод «Как сделать поиск пользователей по GitHub используя React + RxJS 6 + Recompose», которая буквально вчера научила нас как надо использовать React, RxJS и Recompose вместе. Что ж, предлагаю теперь посмотреть, как это можно реализовать без оных инструментов.


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

Как сделать поиск пользователей по GitHub используя React + RxJS 6 + Recompose

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

Картинка для привлечения внимания


Эта статья рассчитана на людей имеющих опыт работы с React и RxJS. Я всего лишь делюсь шаблонами, которые я посчитал полезными для создания такого UI.

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

Сравнение React и Vue на практическом примере

Время на прочтение11 мин
Количество просмотров65K
Автор материала, перевод которого мы публикуем сегодня, говорит, что на работе ему приходится использовать Vue и он хорошо изучил этот фреймворк. Однако, ему всегда было любопытно узнать, как обстоят дела в других мирах, а именно, во вселенной React.

Он почитал документацию, посмотрел несколько учебных видео, и, хотя всё это показалось ему весьма полезным, ему хотелось по-настоящему понять, в чём заключается разница между React и Vue. Для него поиск различий между фреймворками заключался не в выяснении того, поддерживают ли они виртуальную объектную модель документа, или того, как именно они рендерят страницы. Ему хотелось, чтобы кто-нибудь объяснил бы ему особенности кода, показал бы, что в нём происходит. Он надеялся найти статью, которая посвящена раскрытию именно таких различий, прочтя которую тот, кто знал раньше лишь Vue или React (или совершенно новый в веб-разработке человек), мог бы лучше понять различия между этими фреймворками.



Однако такой статьи ему найти не удалось. Этот факт привёл его к пониманию того, что ему самому надо взять и такую статью написать, попутно разобравшись в сходствах и отличиях React и Vue. Собственно говоря, перед вами описание его эксперимента по сравнению этих двух фреймворков.
Читать дальше →

Redux против React Context API

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


В React 16.3 был добавлен новый Context API. Новый в том смысле, что старый Context API был за кадром, большинство людей либо не знали о его существовании, либо не использовали, потому что документация советовала избегать его использования.

Однако теперь Context API является полноценной частью React, открытой для использования (не так, как раньше, официально).
Читать дальше →

Ближайшие события

[Перевод] 4 способа стилизировать React-компоненты

Время на прочтение3 мин
Количество просмотров5.9K
Привет, Хабр! Представляю вашему вниманию перевод статьи «4 Ways to Style React Components».



На сегодняшний день разработано много способов стилизации React компонентов. От библиотек до использования традиционных СSS файлов. Выбор довольно обширен и, скорее всего, будет соответствовать вашим предпочтениям. Вот четыре способа стилизации React компонентов.
Читать дальше →

4 библиотеки, упрощающие жизнь React-разработчика

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

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

1) Nanoid


Ссылка на github
Это маленькая библиотека, которая имеет всего одну функцию — генерация уникального id. Она может быть полезна в массе случаев, как любой другой генератор случайных последовательностей символов. Неоспоримые плюсы: простота и крошечный размер — 143 байта.
Читать дальше →

Разбираемся с Render Props на примере

Время на прочтение3 мин
Количество просмотров27K
Привет, Хабр! Представляю вашему вниманию перевод статьи «Learn Render Props by Example».

image

Честно говоря, раньше я не представлял ситуаций, в которых можно применить React render props, пока не увидел практический пример
Читать дальше →

Основы React (текстовый учебник, 2-е издание)

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

Прошло 2.5 года после публикации первой версии подробного туториала по основам React. За это время gitbook насчитал 250 000+ уникальных посетителей.


book cover


Под катом подробнее об учебнике и список изменений.

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

Apollo: 9 месяцев — полет нормальный

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

image


Всем привет, меня зовут Семен Левенсон, я работаю teamlead’ом на проекте «Поток» от Rambler Group и хочу рассказать о нашем опыте использования Apollo.


Объясню, что такое «Поток». Это автоматизированный сервис для предпринимателей, позволяющий привлекать клиентов из Интернета в бизнес, не вовлекаясь в рекламу, и быстро создавать простые сайты, не являясь экспертом в верстке.

CSS-in-JS — мифы и реальность (на примере styled-components)

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

CSS-in-JS, будучи не совсем новой технологией и реализованной во множестве библиотек, до сих пор вызывает сомнения и споры в целесообразности ее использования. Свои точки над «i» в спорах о CSS-in-JS в общем, и о styled-components в частности, расставил еще год назад, ( 27 Apr 2017 ), и Gajus Kuizinas, автор react-css-modules и babel-plugin-react-css-modules, во все еще, на мой взгляд, актуальной публикации «Прекратите использовать CSS-in-JavaScript в веб-разработках».
Ниже предлагается слегка сокращенный ее перевод с некоторыми добавлениями и выводами:

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

Re: «Сравнение JS-фреймворков: React, Vue и Hyperapp»

Время на прочтение7 мин
Количество просмотров16K
Это небольшая ответная статья на публикацию «Сравнение JS-фреймворков: React, Vue и Hyperapp». Вообще я не большой фанат подобных сравнений. Однако раз уж речь зашла о таком маргинальном фреймворке, как Hyperapp, в сравнении с мастодонтами, типа React и Vue, я подумал, почему бы не рассмотреть все те же примеры на Svelte. Так сказать, для полноты картины. Тем более, это займет буквально 5 минут. Поехали!

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

Вклад авторов