Обновить
123.65

ReactJS *

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

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

mgr-forms-react: Простой компонент для простейших форм

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

Вы когда нибудь считали, сколько форм вы делаете во время разработки веб-приложения? И я не говорю о сложных формах вроде кастомного date-picker'а или же чего-то сложнее, а простых форм с тремя input, двумя select и одним textarea?


Я не считал. Но когда я начал писать очередное приложение на React и мне за один вечер пришлось создать 5 разных форм — мне поплохело. Ну, а когда разработчику плохеет — разработчик пишет велосипед!


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


Вместо картинки для привлечения внимания — количество однотипного кода, который нам всем приходится писать ради создания простейшей формы с одним полем.

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

Интервью c Max Stoiber и Сергеем Лапиным: Выбираем state management решение для React.js

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


В преддверии конференции HolyJS мы поговорили с Максом Штойбером (одним из организаторов React.js Vienna Meetup, создателем react-boilerplate, принимавшим участие и в создании Carte Blanche) и Сергеем Лапиным (членом программного комитета HolyJS) и обсудили, как выбрать state management решение.

Redux, MobX, Relay или другая реализация Flux? Практические рекомендации и лучшие практики.

Макс Штойбер


– Макс, привет! Для начала коротко представься и расскажи о себе.

– Привет! Меня зовут Макс Штойбер, я Open Source разработчик, работаю в компании Thinkmill. Мы делаем всякие прикольные штуки вроде KeystoneJS, разрабатываем веб- и мобильные приложения, вносим свой вклад в улучшение User Experience.

– Звучит круто! Расскажи, как давно ты всем этим занимаешься, когда открыл для себя React, и в каких проектах участвовал?
Читать дальше →

JavaScript 2016, а можно попроще?

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

Последние полгода много пишут о неоправданной сложности клиентского JavaScript. Недавняя статья How it feels to learn JavaScript in 2016 и ее перевод на хабре вызвали много внимания, критика во многом справедливая, но...


Усложнять просто, упрощать сложно. (Один из законов Мерфи)


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


Как пример используется приложение для работы с коллекцией фильмов. Фильмы отображаются в списке с постраничной выборкой, поиском, сортировкой, редактированием и удалением.


Использованный стек: create-react-app как сборщик для клиента, React, bootstrap, API с json-server или json-заглушки.



Работающее демо здесь: Movies List.

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

Пишем простое приложение на React с использованием библиотеки cellx

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

Идея написания статьи появилась в этой ветке, может кому-то будет интересно и её почитать. Сразу скажу, писатель (в том числе кода) из меня так себе, но я буду стараться.


Писать будем как обычно тудулист, надоел конечно до чёртиков, но что-то лучшее для демонстрации придумать сложно. Сразу ссылка на работающее приложение: жмяк (код).


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

DBGlass — Open-Source кросс-платформенный PostgreSQL GUI клиент

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

Всем привет! Только что выложили бету DBGlass PostgreSQL GUI клиент. Стандартные функции клиента — просмотр и редактирование данных.


К сожалению мы не являемся специалистами в области баз данных и PostgreSQL, явно упустили важный функционал или особенности работы базы. Будем рады фидбэку или пулл реквестам.


Для тех, кто не знаком с интерфейсом гитхаба, скачать бинарники можно тут.

Универсальний (изоморфный) «шлем» для React js или Как удобно работать с head на React js

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

Ребята из nfl вылечили одну из болей React js, работу с head. Речь пойдет о библиотеке react-helmet. Она работает как на клиенте, так и на сервере.
Читать дальше →

Универсальный (Изоморфный) проект на Koa 2.x + React + Redux + React-Router

Время на прочтение5 мин
Количество просмотров20K
Универсальный Koa

Сейчас много споров по поводу универсального (изоморфного) кода, есть свои за и против.
Я считаю, что за универсальным (изоморфним) кодом будущее, так как он позволяет взять лучшее с серверного и клиентского рендеринга.
Читать дальше →

JSX: антипаттерн или нет?

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

Довольно часто приходится слышать, что React и особенно JSX-шаблоны – это плохо, и хороший разработчик так не делает. Однако нечасто объясняется, чем именно вредит смешивание верстки и шаблонов в одном файле. И с этим мы попробуем сегодня разобраться.


Подход "каждой технологии свой файл" использовался с начала существования веба, поэтому неудивительно, что слом этого шаблона вызывает отторжение некоторых разработчиков. Но перед тем, как заявлять "нет, мы так делать не будем никогда", будет полезно разобраться истории и понять, почему JSX пользоваться можно, а смешивать скрипты и html – нет.


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

React.js: собираем с нуля изоморфное / универсальное приложение. Часть 3: добавляем авторизацию и обмен данными с API

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

Пожалуйста, авторизуйтесь


Это третья и заключительная часть статьи про разработку изоморфного React.js приложения с нуля. Части первая и вторая.


В этой части мы:


  • добавим redux-dev-tools;
  • добавим запросы к API;
  • реализуем авторизацию;
  • реализуем выполнение запросов к API в процессе Server-Side Rendering.
Читать дальше →

Javascript-фреймворки: должен остаться только один

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

Сергей Аверин ( XEK )


Сергей Аверин

Изначально я хотел сделать доклад про сравнение фреймворков, но потом подумал, что закидают помидорами, поэтому доклад — просто адский троллинг, как водится у меня. И он, скорее, не про HighLoad, а про менеджерскую задачу, которая стоит над всем этим делом, включая фронтенд.

Про что же, все-таки, получился доклад? Доклад про то, как выбирали новый фреймворк, почему выбирали, и какие задачи решали.
Читать дальше →

Redux Action Creators. Без констант и головной боли

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


Всем привет! Эта статья будет полезна тем, кто устал использовать constants в Redux (частично показано на превью выше). Под катом я покажу очередной возможный велосипед и как на нем кататься.


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

Как использовать Mongoose-схему для генерации graphQL-типов

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

Все начал с того что я решил написать изоморфный CMS для одного из моих проектов с использованием следующих технологий:

  • React — для постройки UI
  • Express — в качестве сервера
  • MongoDb + Mongoose — noSQL база данных
  • graphQL — основной API для взаимодействия с базой данных
  • Apollo-Client — коннектор для удобного вызова запросов и мутаций через graphQL
  • webpack — для сборки проекта и разделения клиентского и серверного кода

Упрощенная архитектура выглядит следующим образом:

__root
1 |__client
2 |__public
3 |__middleware
4 |__server

  1. React-компоненты
  2. Бандл клиентского кода и остальные публичные файлы
  3. Mongoose: схемы, дополнительные методы и graphQL: типы, класс с запросами, класс с мутациями, схема
  4. Бандл серверного кода вместе с express сервером
Читать дальше →

React.js: собираем с нуля изоморфное / универсальное приложение. Часть 2: добавляем bootstrap, страницы и роутинг

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

Разработка изоморфного приложения глазами моей жены


Это продолжение статьи про разработку изоморфного приложения с нуля на React.js. В этой части мы добавим несколько страниц, bootstrap, роутинг, концепцию Flux и ее популярную реализацию Redux.

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

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

Нянчим проект на React-redux с пелёнок

Время на прочтение20 мин
Количество просмотров66K
intro
В начале этого года мы в HeadHunter начали проект, нацеленный на автоматизацию различных HR-процессов у компаний-клиентов. Архитектурой этого проекта на фронте выбрали React-Redux стек.

За 9 месяцев он вырос из небольшого приложения для тестирования сотрудников в многомодульный проект, который сегодня называется “Оценка талантов”. По мере его роста мы сталкивались с вопросами:

  • хранения стейта, его нормализации;
  • построения масштабируемой архитектуры проекта, удобной иерархии — как в структуре, так и в бизнес-логике.

Это проявлялось в изменении подхода к построению компонентов, архитектуры редьюсеров.

Давайте поговорим о том, как мы развивали проект и какие решения принимали. Некоторые из них могут оказаться “холиварными”, а другие, напротив, “классикой” в построении большого проекта на redux. Надеюсь, что описанные ниже практики помогут вам при построении react-redux приложений, а живые примеры помогут разобраться, как работает тот или иной подход.
Читать дальше →

Доводы в пользу function tree

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

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


Написание хорошего кода


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


function add(numA, numB) {
  return numA + numB
}

Полезным свойством чистых функций является то, что их легко тестировать.


test.equals(add(2, 2), 4)

Компонуемость тоже является их сильной стороной.


test.equals(multiply(add(4, 4), 2), 16)

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


const totalPoints = users
  .map(takePoints)
  .reduce(sum, 0)

Но давайте взглянем на ваше приложение. Какая его часть действительно может быть выражена чистыми функциями? Насколько часто речь идёт о преобразовании значений, которые традиционно выполняют чистые функции? Могу предположить, что большая часть вашего кода работает с побочными эффектами. Вы выполняете сетевые запросы, DOM манипуляции, используете вебсокеты, локальные хранилища, изменяете состояние приложения и так далее. Это всё описывает разработку приложения, по крайней мере в Интернете.

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

React.js: собираем с нуля изоморфное / универсальное приложение. Часть 1: собираем стек

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

Лицо моей жены, когда она вычитывала эту статью


Я решил написать цикл статей, который и сам был бы счастлив найти где-то полгода назад. Он будет интересен в первую очередь тем, кто хотел бы начать разрабатывать классные приложения на React.js, но не знает, как подступиться к зоопарку разных технологий и инструментов, которые необходимо знать для полноценной front-end разработки в наши дни.


Я хочу с нуля реализовать, пожалуй, наиболее востребованный сценарий: у нас есть серверная часть, которая предоставляет REST API. Часть его методов требует, чтобы пользователь веб-приложения был авторизован.

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

Offline-first приложение с Hoodie & React. Часть вторая: авторизация

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

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

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

Строим свой full-stack на JavaScript: Основы

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

Строим свой full-stack на JavaScript: Основы



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


В этом цикле статей я хочу поделиться своим практическим опытом построения JS стека.


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

Offline-first приложение с Hoodie & React. Часть первая: браузерная база данных

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

Современный веб позволяет решать часть задач которые раньше были прерогативой нативных мобильных приложений. Мы с вами создадим веб-приложение (сайт) которое будет загружаться и сохранит полную функциональность даже в отсутствии интернета, а при его появлении автоматически синхронизируется с сервером. На мобильном устройстве для такого приложения достаточно создать ярлык и в плане автономности мы получим аналог нативного приложения.


Мы напишем подобие todo-листа, с одним отличием: "выполненные" задачи будут не удаляться, а переноситься в конец списка и по мере решения остальных задач всплывать вверх. Такой список удобно использовать для повторяющихся вещей, таких как различные спортивные активности, развлечения, еда и т.п. Одна моя социально-реализованная знакомая использует его, чтобы равномерно поддерживать контакт с многочисленной популяцией своей френдзоны.


То, что получится в результате можно посмотреть тут. Попробуйте внести некоторые изменения, закрыть вкладку, отключить интернет и снова открыть сайт. Вы обнаружите, что он открывается и сохраняет полную функциональность. Если вы залогинитесь на разных устройствах и внесёте изменения в оффлайне, по восстановлении соединения изменения синхронизируются интуитивно ожидаемым образом.


Вы удивитесь насколько мало кода нам потребуется для реализации этого функционала.

Удивиться

Паттерны React

Время на прочтение10 мин
Количество просмотров138K
Привет Хабр! Предлагаю вашему вниманию свободный перевод статьи «React Patterns» Майкла Чана, с некоторыми моими примечаниями и дополнениями.

Прежде всего хотел бы поблагодарить автора оригинального текста. В переводе я использовал понятие «Простой компонент» как обозначение Stateless Component aka Dump Component aka Component vs Container
Конструктивная критика, а так же альтернативные паттерны и фичи React приветствуются в комментах.

Оглавление
  • Простые компоненты — Stateless function
  • JSX распределение атрибутов — JSX Spread Attributes
  • Деструктуризация аргументов — Destructuring Arguments
  • Условный рендеринг — Conditional Rendering
  • Типы потомков — Children Types
  • Массив как потомок — Array as children
  • Функция как потомок — Function as children
  • Функция в render — Render callback
  • Проход по потомкам — Children pass-through
  • Перенаправление компонента — Proxy component
  • Стилизация компонентов — Style component
  • Переключатель событий — Event switch
  • Компонент-макет — Layout component
  • Компонент-контейнер — Container component
  • Компоненты высшего порядка — Higher-order component

Поехали!
Читать дальше →

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