Рубрика «react.js» - 10

image

Перевод туториала официальной документации библиотеки React.js.

Мыслим в стиле React

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

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

Читать полностью »

Изоморфные React-приложения: производительность и масштабирование - 1

Денис Измайлов ( DenisIzmaylov )

Всем привет! Вкратце расскажу о себе. Я — Денис Измайлов. Последние 5 лет сосредоточился на JS-разработке, делал много Single Page Application, highload, React, выступал на MoscowJS несколько раз, каммитил webpack и т.д.

Сегодня хотел бы поговорить вот о чем: почему от Single Page Application в его классическом виде стоит отказаться; как изоморфные приложения отразятся на Вашей зарплате; и что вы будете делать на этих выходных?
Читать полностью »

JSON API + redux

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

Читать полностью »

Недавно команда Qwintry начала активную миграцию на Vue.js во всех наших старых и новых проектах:

  • в legacy системе, работающей на Drupal (qwintry.com)
  • в нашей новой, полностью переписанной ветке qwintry.com (бекэнд на Yii2 / Node.js)
  • в наших B2B-системах (работающих на Yii2) (logistics.qwintry.com)
  • во всех наших мелких внутренних и публичных проектах (в основном использующих PHP и Node.js на бэкенде)

Почему наши программисты остановили выбор на Vue.js, рассказывает руководитель департамента разработки Qwintry LLC. Антон Сидашин ➔
Читать полностью »

Разбор: как и зачем применять PureComponent в React - 1
29 Июля вышел React 15.3, и первым пунктом в release-notes значилось добавление поддержки React.PureComponent, который заменяет своего предшественника pure-render-mixin. В этой статье обсудим, почему же этот компонент так важен и где его использовать.
Читать полностью »

Этот пост является продолжением поста про оптимизацию производительности списка в React приложении.

Внимание. В данном посте примеры подготовлены специально для Redux приложений. Но сам подход возможно применить и с другими библиотеками. Так же нижеприведенный совет работает в react-redux версии 5. Я не смог достичь желаемого результата в версии 4. Глубоко разбираться в причинах я не стал.

И так, стандартный способ хранить некоторое множество элементов в приложении — это хранить их в массиве:

const state = {
  targets: [{id: 'target1', radius: 10}, {id: 'target2', radius: 2}]
};

Читать полностью »

Отличный фреймворк!
Простой, чистый, производительный!
Так на его могиле и напишем...

image

Полсотни интернет-зависимых не спят. Прижав тощие и не очень задницы к стульям, они флудят в самописном чатике. Удовольствие стоит 6 рублей в час (цена «городского интернета» в далеких
2000-х с одним сервером на город-полумиллионник).

На это хватало сэкономленного на студенческих обедах. На выход в Глобальный Интернет по 33 рубля (хренасе!) в час — уже нет. Писк модема на 33600. Ночь.

Читать полностью »

React.js на русском языке. Часть восьмая - 1
Перевод официальной документации библиотеки React.js на русском языке.

Оглавление:

1 — Часть первая — Установка
2 — Часть вторая — Внедрение JSX
3 — Часть третья — Отрисовка элементов
4 — Часть четвертая — Компоненты и свойства
5 — Часть пятая — Состояние и жизненный цикл
6 — Часть шестая — Обработка событий
7 — Часть седьмая — Условный рендеринг
8 — Часть восьмая — Списки и ключи
9 — Часть девятая (скоро)

Списки и ключи

Для начала, давайте рассмотрим, как преобразовать списки в JavaScript.
В приведенном ниже примере, мы используем функцию «map()», чтобы считать массив устройств «numbers» и удвоить их значения. Мы задаем новый массив устройств, возвращенный с помощью «map()», посредством удвоенной переменной и зарегистрировали ее следующим образом:
Читать полностью »

React.js на русском языке. Часть седьмая - 1
Перевод официальной документации библиотеки React.js на русском языке.

Оглавление:

1 — Часть первая — Установка
2 — Часть вторая — Внедрение JSX
3 — Часть третья — Отрисовка элементов
4 — Часть четвертая — Компоненты и свойства
5 — Часть пятая — Состояние и жизненный цикл
6 — Часть шестая — Обработка событий
7 — Часть седьмая — Условный рендеринг
8 — Часть восьмая (скоро)

Условный рендеринг

В React вы можете создавать отдельные компоненты, которые воплощают нужную вам модель поведения. Затем можно будет отобразить только некоторые из них, в зависимости от состояния приложения.

Условный рендеринг в React работает точно так же, как и в JavaScript. Используйте операторы JavaScript, как "if" или условный оператор для создания элементов, которые отображают текущее состояние, и чтобы позволить React обновлять пользовательский интерфейс, чтобы им соответствовать.
Читать полностью »

React.js на русском языке. Часть шестая - 1

Перевод официальной документации библиотеки React.js на русском языке.

Оглавление:

1 — Часть первая
2 — Часть вторая
3 — Часть третья
4 — Часть четвертая
5 — Часть пятая
6 — Часть шестая
7 — Часть седьмая (скоро)

Обработка событий

Обработка событий с элементами React очень схожа с обработкой событий с элементами DOM.

Существует несколько синтаксических различий:

Названия событий React создаются с помощью camelCase, а не lowercase. С JSX вы передаете функцию как обработчик события, а не строку. Например, HTML:

<button onclick="activateLasers()">
  Activate Lasers
</button>

В React это выглядит немного по-другому:
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js