Обновить
58.93

ReactJS *

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

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

Разработка ускоренной главной страницы BBC News

Время на прочтение3 мин
Количество просмотров5.7K
Веб производительность это то, что меня беспокоит как разработчика, чья работа затрагивает миллионы людей по всему миру, так и пользователя, который часто получает доступ к веб используя медленное и ненадежное соединение. Я часто и громко жаловался, что сайт BBC News неоправданно медленный, поэтому когда мне предоставилась возможность помочь перестроить одну из самых посещаемых страниц на BBC News — я ухватился за этот шанс.
Читать дальше →

Способы отладки JS на клиенте

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

Применительно к разработке на create-react-app (CRA) в браузере и в IDE WebStorm. Если вам известны какие-либо другие способы отладки, большая просьба поделиться знаниями.

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

Функциональные компоненты

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

Как говорится, в редакцию пришло письмо: "не могли бы вы подробно разъяснить..." Отвечаю публично, кому оно надо, а применение можно пощупать тут.

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

N причин, чтобы использовать Create React App

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


Create React App — отличный инструмент для быстрого старта React-приложений. Вы не тратите время на настройку Webpack, Babel и других привычных инструментов. Они заранее настроены и спрятаны, так что разработчики могут сфокусироваться на коде и бизнес-логике приложения.
Читать дальше →

Flow + tcomb = типизированный JS

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

Рано или поздно, все приходят к выводу, что нам нужна строгая типизация. Почему? Потому что проект разрастается, обрастает if-ами; функциональное программирование — всё функция — неправда, мне только что консоль сказала "undefined is not a function". Вот эти проблемы появляются всё чаще-чаще, становится сложнее отслеживать, возникает вопрос — давайте строго типизировать, хотя бы на этапе написания кода будет подсказывать.


Знаете рекламу: TypeScript — это надмножество JavaScript-а. Маркетинговый BS. Мы честно попытались, грубо говоря, переименовать проект из JS в TS — оно не заработало. Оно не компилируется, потому что некоторые вещи, с точки зрения TypeScript-а являются некорректными. Это не означает, что TypeScript — плохой язык, но продвигаться на идее надмножества, и подводить меня так, TypeScript — я не ожидал.


Как только вы вычеркиваете TypeScript, остаётся ровно одна альтернатива — Flow. Что я могу сказать про Flow? Flow мегакрутой тем, что заставит вас выучить систему типов OCaml, хотите вы того, или нет. Flow написан на OCaml. У него гораздо строже и гораздо мощнее вывод типов, чем у TypeScript-а. Вы можете переписывать проект на Flow частично. Количество бонусов, которые вам приносит Flow, сложно описать. Но, как всегда, есть парочка "но".

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

Введение в React и Redux для бекенд-разработчиков

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


Если вы как я долгое время считали, что JavaScript – это такой «игрушечный» язык на котором пишут анимашки для менюшек и падающие снежинки на форумах под новый год, а потом очнулись в 2016 году с мыслями WTF: react, flux redux, webpack, babel,… не отчаивайтесь. Вы не одиноки. Материалов по современному фронтенду в сети много, даже слишком много. Под катом еще одно альтернативное мнение о том, каково это учить JavaScript в 2016 году.
Стань модным

Создание npm пакета React компонентов на базе create-react-app

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

В данной публикации мы рассмотрим, как создать npm пакет React компонентов используя create-react-app.

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

Организация компонентов в проекте

Время на прочтение3 мин
Количество просмотров17K
Многие руководствуются рекомендациями Presentational and Container Components, но уважаемый автор признаётся в сносках, что концепция разделения спорная, и компоненты можно смешивать. А если это так, то зачем тащить чемодан без ручки? Все компоненты проекта удобнее хранить в одной общей папке. Какие плюсы:
  • Простота навигации по файловой системе.
  • Уникальные имена компонентов проекта.
  • Импорт без боли ('../../../../../..').


Когда проект вырастет, следует дробить его на приватные npm-пакеты, инкапсулируя реализацию. Но не выращивать дерево подпапок внутри папки компонентов — развивать и поддерживать такое ощутимо сложнее. Проверено.
Дальше больше

За закрытой дверью фронтенда ЕФС

Время на прочтение6 мин
Количество просмотров28K
В этой статье мы расскажем о библиотеке компонентов Единой фронтальной системы (ЕФС)  и как в целом устроен фронтенд платформы.


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

Эволюция на React+Redux

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

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

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

Отчет и презентации с Moscow JS в офисе Superjob

Время на прочтение3 мин
Количество просмотров5.1K
В офисе Superjob состоялась встреча JavaScript-разработчиков MoscowJS. Рассказываем, что обсуждали участники, и делимся презентациями.



Александр Савин, Superjob

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

React Native: очередная «серебряная пуля» для кросплатформенной разработки?

Время на прочтение7 мин
Количество просмотров22K
Есть революции, которые происходят незаметно. Когда разработчики Facebook выпустили фреймворк React Native, никто не захватывал мосты и телеграфы. Новому подходу к кроссплатформенной разработке мобильных приложений удалось взять в плен самое ценное – мозги нативных программистов. Рассказать о центральной идее React Native, его преимуществах, перспективах и недостатках мы попросили Владимира Иванова.



Владимир более шести лет занимается разработкой под Android, обладает опытом создания приложений под iOS и Windows Phone. Последний год он увлекся React Native и начал двигать культуру кроссплатформенного кода в EPAM Systems.
Читать дальше →

Знакомство с React Loadable

Время на прочтение7 мин
Количество просмотров33K
Привет, Хабр. Представляю вам свободный перевод статьи Джеймса Кайла «Introducing React Loadable». В ней Джеймс рассказывает, что такое компонент-ориентированный подход к разделению кода и представляет разработанную им библиотеку Loadable — инструмент, позволяющий реализовать этот подход в React.js приложениях.

image
Единый файл сборки и сборка из нескольких файлов

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

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

Прямая трансляция MoscowJS из офиса Superjob

Время на прочтение1 мин
Количество просмотров2.5K
Сегодня в 19:00 по московскому времени в офисе Superjob состоится встреча JavaScript-разработчиков «MoscowJS». Присоединяйтесь к прямой трансляции!


Блог а-ля Хабр, выбор платформы

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

В предыдущей серии (Как слямзить Хабр по-быстрому) запустил проект на базе Create React App (CRA). Но это SPA, что не очень подходит, когда требуется индексация в поисковиках. Нужен Server Side Rendering (SSR). И желательно из коробки, а не на коленке. Крайне расточительно тратить ресурсы на самостоятельную разработку базовых технологий. Как выбирать платформу с поддержкой SSR? На практике, конечно, POC. Попробую реализовать CRUD с формой ввода на Material-UI, рассматривая кандидатов: React Starter Kit (RSK), NEXT.js и Electrode (не путать с Electron).


Исходники на GitHub.

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

Эврика! Моменты озарения при изучении React

Время на прочтение5 мин
Количество просмотров21K
Светлана Шаповалова, редактор «Нетологии», перевела статью Тайлера МакГинниса, в которой он перечислил основные моменты озарения, которые возникают при изучении React.

image

Одна из моих главных преподавательских задач — сделать так, чтобы у людей чаще случались моменты озарения. «Эврика!» — это момент внезапного прояснения, когда ранее непонятные факты вдруг обретают смысл. Такое случалось с каждым. Я знаком со многими преподавателями и лучшие из них умеют так преподносить урок, чтобы озарение у учеников возникало намного чаще.
Читать дальше →

Больше, чем React: Почему не следует использовать ReactJS для сложных интерактивных фронтенд-проектов

Время на прочтение6 мин
Количество просмотров51K
Перевод статьи, посвящённой использованию ReactJS для создания фронтенда.

React — отличный инструмент для реализации простых интерактивных веб-сайтов. Но насколько он применим в сложных фронтенд-проектах? Работает ли он там столь же хорошо?

В этой статье мы рассмотрим некоторые проблемы, с которыми можно столкнуться при использовании React во время веб-разработки. Также вы узнаете, почему автор статьи решил разработать новый фреймворк на Scala, благодаря которому удалось сократить количество строк кода с 30 тысяч (на React) до одной тысячи.
Читать дальше →

Создание кроссплатформенных приложений с помощью React Native

Время на прочтение8 мин
Количество просмотров43K
Предлагаем вашему вниманию перевод статьи, которая будет интересна начинающим разработчикам.

React Native — это JS-фреймворк для создания нативно отображаемых iOS- и Android-приложений. В его основе лежит разработанная в Facebook JS-библиотека React, предназначенная для создания пользовательских интерфейсов. Но вместо браузеров она ориентирована на мобильные платформы. Иными словами, если вы веб-разработчик, то можете использовать React Native для написания чистых, быстрых мобильных приложений, не покидая комфорта привычного фреймворка и единой кодовой базы JavaScript.

Конечно, мы и раньше слышали обещания об универсальной разработке приложений, с помощью фреймворков наподобие Cordova или Titanium. А что насчёт React Native? В этой статье мы рассмотрим данный фреймворк и особенности его работы и поговорим о том, насколько удобно использовать React Native для написания iOS- и Android-приложений.
Читать дальше →

React + mobx путь с нуля. Mobx + react, взгляд со стороны

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


В «настоящих» проектах мы получаем данные от сервера или пользовательского ввода, форматируем, валидируем, нормализуем и производим другие операции над ними. Всё это принято считать бизнес логикой и должно быть помещено в Model. Так как react — это только треть MVC пирога, для создания пользовательских интерфейсов, то нам потребуется еще что-то для бизнес логики. Некоторые используют паттерны redux или flux, некоторые — backbone.js или даже angular, мы же будем использовать mobx.js в качестве Model.
Читать дальше →

Создание веб-приложений с помощью Scala.js и React — часть 1

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

Перевод статьи Pedro Palma Ramos "Building Web applications with Scala.js and React — Part 1"


Мне, как Scala-программисту, разрабатывающему веб-приложения, обычно неприятен переход от аккуратного, функционального и типобезопасного Scala бэкенда к фронтенду, написанному на JavaScript. К счастью, существует мощная и зрелая альтернатива нашему (не всегда) любимому стандартному языку для Web.


Scala.js — это реализация Scala за авторством Sébastien Doeraene, которая компилирует код Scala в JavaScript, а не в байт-код JVM. Она поддерживает полную двустороннюю функциональную совместимость между Scala и JavaScript-кодом и, следовательно, позволяет разрабатывать фронтенд веб-приложения на Scala с использованием библиотек и фреймворков JavaScript. Она также способствует уменьшению дублирования кода по сравнению с обычным веб-приложением на Scala, поскольку позволяет повторно использовать на фронтэнде модели и бизнес-логику, разработанные для серверной части.


React, с другой стороны, представляет собой веб-фреймворк для создания пользовательских интерфейсов в JavaScript, разработанный и поддерживаемый Facebook и другими компаниями. Он способствует чистому разделению между обновлением состояния приложения в ответ на пользовательские события и визуализацией представлений на основе указанного состояния. Поэтому фреймворк React особенно подходит для функциональной парадигмы, которая используется при программировании на Scala.

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

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