Все потоки

ReactJS *

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

СтатьиПостыНовостиАвторыКомпании

ru_vds 20 авг 2018 в 08:23

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

5 мин

32K

Блог компании RUVDS.comJavaScript * ReactJS * Веб-разработка *

Перевод

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

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

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

+21

PaulMaly 20 авг 2018 в 04:25

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

11 мин

13K

JavaScript * ReactJS * SvelteJS * Клиентская оптимизация * Веб-разработка *

Туториал

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

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

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

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

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

+12

m_vash 14 авг 2018 в 07:10

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

4 мин

142K

JavaScript * Node.JS * ReactJS * Веб-разработка *

Перевод

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

-2

PaulMaly 8 авг 2018 в 16:47

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

6 мин

5.8K

Веб-разработка * ReactJS * JavaScript *

Туториал

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

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

+18

atomAltera 7 авг 2018 в 16:44

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

8 мин

9.3K

JavaScript * ReactJS *

Перевод

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

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

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

+8

ru_vds 7 авг 2018 в 08:41

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

11 мин

68K

Блог компании RUVDS.comJavaScript * ReactJS * VueJS * Веб-разработка *

Перевод

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

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

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

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

+21

m_vash 6 авг 2018 в 18:28

Redux против React Context API

15 мин

83K

JavaScript * ReactJS * Веб-разработка *

Туториал

Перевод

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

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

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

+12

m_vash 4 авг 2018 в 07:11

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

3 мин

6.4K

CSS * JavaScript * ReactJS * Веб-разработка *

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

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

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

0

snapoak 1 авг 2018 в 14:20

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

4 мин

55K

JavaScript * ReactJS *

Из песочницы

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

1) Nanoid

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

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

+9

m_vash 1 авг 2018 в 04:25

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

3 мин

28K

JavaScript * ReactJS * Веб-разработка *

Recovery Mode

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

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

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

+9

maxfarseer 29 июл 2018 в 18:04

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

2 мин

53K

JavaScript * ReactJS *

Туториал

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

book cover

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

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

+31

User-1 27 июл 2018 в 14:42

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

9 мин

21K

Блог компании Rambler&CoПроектирование API * JavaScript * ReactJS * Веб-разработка *

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

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

+19

m512781 24 июл 2018 в 07:37

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

8 мин

69K

CSS * JavaScript * ReactJS *

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 в веб-разработках».
Ниже предлагается слегка сокращенный ее перевод с некоторыми добавлениями и выводами:

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

+11

PaulMaly 21 июл 2018 в 23:46

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

7 мин

16K

JavaScript * ReactJS * SvelteJS * VueJS * Веб-разработка *

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

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

+18

ru_vds 20 июл 2018 в 09:28

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

13 мин

21K

Блог компании RUVDS.comJavaScript * ReactJS * VueJS * Веб-разработка *

Перевод

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

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

+10

andrey1s 12 июл 2018 в 15:48

Опыт Rambler Group: как мы начали полностью контролировать формирование и поведение фронтовых React компонентов

13 мин

9.6K

Блог компании Rambler&CoПрограммирование * Symfony * ReactJS * PHP *

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

На наш взгляд нам удалось реализовать неплохой пример сбалансированного по сложности и профиту решения, который мы успешно используем в production на основе Symfony и React.

добро пожаловать под кат

+30

m512781 11 июл 2018 в 13:48

Знакомьтесь: «все и сразу», React Boilerplate от Maximilian Stoiber v3.6.0

5 мин

13K

JavaScript * Node.JS * ReactJS * Программирование *

Из песочницы

Сборка react-boilerplate совсем недавно, 26.06.2018, была обновлена до версии 3.6.0. Этой сборке уже более трех лет, но, заметно выделяясь на фоне множества других (более 18 тыс. Stars GitHub), она практически никак не была замечена на Хабре. В чем же ее особенность? Если кратко — сборка предлагает разработчику «все и сразу»!

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

+15

MordorReal 8 июл 2018 в 12:24

Самые распространенные ошибки в вашем React коде, которые вы (возможно) делаете

5 мин

104K

JavaScript * ReactJS *

Из песочницы

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

Весь код написан в ES6 стиле, поэтому, что бы повторить его вам нужно использовать Babel в вашем проекте (а еще есть такие кто его не использует?).

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

Если вам интересно, то добро пожаловать под кат.

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

+16

bgnx 5 июл 2018 в 21:21

Как организовать общее состояние в react-приложениях без использования библиотек (и зачем нужен mobx)

10 мин

12K

JavaScript * ReactJS *

Cразу небольшой спойлер — организация состояния в mobx ничем не отличается от организации общего состояния без использования mobx на чистом реакте. Ответ на закономерный вопрос зачем тогда собственно этот mobx нужен вы найдете в конце статьи а пока статья будет посвящена вопросу организации состояния в чистом в react-приложении без каких-либо внешних библиотек.

Реакт предоставляет способ хранить и обновлять состояние компонентов используя свойство state на инстансе компонента класса и метод setState. Но тем не менее среди реакт сообщества используются куча дополнительных библиотек и подходов для работы с состоянием (flux, redux, redux-ations, effector, mobx, cerebral куча их). Но можно ли построить достаточно большое приложение с кучей бизнес-логики c большим количеством сущностей и сложными взаимосвязями данных между компонентами используя только setState? Есть ли необходимость в дополнительных библиотеках для работы с состоянием? Давайте разберемся.

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

+11

frog 4 июл 2018 в 06:38

Конвертация данных GraphQL для компонента CustomTreeData из DevExtreme-Reactive

5 мин

1.7K

JavaScript * ReactJS *

Понадобилось тут отобразить данные в виде дерева, с возможностью редактировать разные поля, удалять/добавлять строки и т.д. В процессе поиска подходящих компонентов (хотелось найти под material-ui и react) стал пробовать devextreme-reactive. Ньюанс, однако, оказался в том, что devextreme-reactive хочет данные для дерева в виде плоского массива объектов, в каждом из которых указан parent_id «родителя». А GraphQL сервер у меня отдаёт дерево в виде вложенных друг в друга объектов с массивами объектов. Пришлось делать из одного другое — возможно, кому-то пригодится. А может кто-то скажет, что я заморочился не по делу и всё это делается куда проще.

Итак, в ответ на GraphQL запрос (есть тесты, в каждом есть вопросы, для каждого опроса есть несколько вариантов ответов и мы хотим получить всё сразу):

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

+7

1 2 ...

79

80 81 ...