Реагировать - это любовь. Реагировать - это жизнь. Популярность этой библиотеки JavaScript от Facebook не перестает расти, поэтому мы подготовили три статьи, которые, мы надеемся, найдутся полезными для всех любителей React. Кроме того, мы хотим предоставить вам доказательства того, что разработчики DHTMLX в последнее время не сидели сложа руки. За последний месяц они представили два важных обновления: DHTMLX Scheduler 5.0 и DHTMLX Diagram 2.1. Также мы не забыли собрать и другие интересные новости с планеты JavaScript.

Поехали!

Новые инструменты и обновления

RSuite 3: набор компонентов пользовательского интерфейса React

RSUITE (React Suite) - это набор компонентов React для построения корпоративных системных продуктов. После трех основных изменений разработчики предоставили огромное количество компонентов и богатую функциональность. RSUITE предназначен для использования в основном в современных настольных браузерах. Следовательно, это может быть не лучший выбор для мобильных разработчиков. Вы можете установить RSUITE через NPM или Yarn.

В новой версии разработчики РГУИТЭ реализовали полезный функционал. Во-первых, RSUITE теперь поддерживает React 16+. Был добавлен новый стиль и функция интернационализации. Internet Explorer версии 9 больше не поддерживается. Разработчики реализовали более красивое форматирование и добавили некоторые новые свойства в следующие компоненты: группа кнопок, таблица, флажок, Dropbox, компоненты Nav и компоненты, связанные с формами. Кроме того, были добавлены некоторые новые компоненты, например Sidenav, IconButton, Drawer, Progress, Alert, Message, Notification, Loader.

Планировщик DHTMLX 5.0

DHTMLX Scheduler - это полнофункциональный календарь событий JavaScript. Компонент планировщика предоставляет огромное количество представлений и настраиваемых функций. Пользовательский интерфейс аккуратный и полностью настраиваемый. Не так давно разработчики выпустили DHTMLX Scheduler версии 5.0. Давайте проверим, какие новые функции были реализованы.

Следуя шаблонам Material Design, разработчики переработали планировщик, чтобы обеспечить пользователям более модный вид. Новый Material Skin будет знаком всем пользователям Google:

Кроме того, есть некоторые улучшения UX. Новые улучшения связаны с переключением между разными периодами времени (дни, недели, месяцы) и работой с формой сведений о мероприятии. В приложение можно добавить оранжевую кнопку «Плюс». Пользователи могут щелкнуть по нему, чтобы добавить новое событие. В результате на экране появится форма для добавления описания события. Грандиозный рефакторинг CSS, сделанный разработчиками, позволяет использовать преимущества значительно обновленных стилей планировщика для создания ваших приложений.

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

Разработчики улучшили интеграцию этого компонента на стороне сервера. Начиная с версии 5.0, использование dhtmlxScheduler с внутренними технологиями стало настолько простым, насколько вы можете себе представить. Улучшения в модуле dataProcessor обеспечивают простое соединение с бэкэндами RESTful. Чтобы узнать больше об этой части функциональности dhtmlxScheduler, вы можете прочитать Руководство по интеграции на стороне сервера.

Диаграмма DHTMLX 2.1

DHTMLX Diagram - еще одно изобретение наших разработчиков, которое недавно получило несколько существенных обновлений. Этот инструмент JavaScript позволяет создавать графики и диаграммы практически любого типа. Вы можете добавить в свое веб-приложение организационную диаграмму, блок-схему, диаграмму действий, дерево решений и т. Д. Теперь давайте посмотрим, что нового в версии 2.1.

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

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

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

  • Ctrl + C - скопировать фигуру
  • Ctrl + V– вставить фигуру.
  • Ctrl + Z - отменить последнее действие
  • Del - удалить фигуру
  • Стрелки - для перемещения фигуры влево / вправо / вверх / вниз

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

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

Selection.js. Создание выделений Visual DOM

Эта легкая и простая в использовании библиотека выбора позволяет включить визуальное выделение DOM. Вы можете проверить эту демонстрацию, чтобы увидеть, как все работает. Selection.js поддерживает современные сенсорные устройства, работает с Node.js, не требует jQuery и весит всего 3 КБ в сжатом виде.

Чтобы использовать Selection.js, вы можете либо установить его через диспетчер пакетов NPM, либо использовать CDN. Библиотека позволяет сделать выбираемыми все элементы с заданным классом. Набор полезных опций, методов и событий позволяет настраивать поведение библиотеки.

nanoJS. Маленькая библиотека JavaScript для манипуляции с DOM

NanoJS - это действительно крошечная (примерно 100 строк кода, 0,6 КБ сжатого кода) JavaScript-библиотека для основных манипуляций с DOM. Эта библиотека имеет простой синтаксис для jQuery и поддерживает цепочку. Помимо того, что эта библиотека очень легкая, эта библиотека также отлично настраивается. Вы можете легко добавлять или удалять методы, ничего не нарушая. Все методы не связаны между собой, поэтому добавление или удаление одного или двух не повлияет на библиотеку. Таким образом, nanoJS может стать основой для вашей собственной библиотеки.

Алгоритмы JavaScript и структуры данных

Создатели этой библиотеки JavaScript собрали обширную коллекцию популярных алгоритмов и структур данных. Вы можете думать об этом ресурсе как о базе знаний, которую вы можете использовать для обучения. Для каждого алгоритма и структуры данных есть отдельная страница README с подробным объяснением и ссылкой на видеоурок YouTube.

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

Полезные советы и статьи

Реакция и разделение проблем

После того, как компания Facebook анонсировала новое расширение синтаксиса JSX для JavaScript, были некоторые сетования на то, что такой подход противоречит традиционной практике разделения ответственности. Суть в том, что, используя JSX, вы смешиваете HTML, CSS и JavaScript. В своей статье Красимир Цонев описывает, что React и его экосистема на самом деле имеет неплохой механизм разделения проблем.

Создайте свой блог, используя Gatsby и React

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

  • Гэтсби
  • Реагировать
  • Уценка
  • GraphQL
  • GitHub

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

Создайте модальное окно для предварительного просмотра изображения в Instagram с помощью жестов в React Native

Если вы пользователь Instagram, вы, вероятно, знаете, что, когда вы нажимаете и удерживаете изображение в сетке, вы можете быстро просмотреть его. Удерживая, вы также можете двигать пальцем, чтобы получить доступ к нескольким действиям (например, поделиться или комментировать). Автор этого руководства создал пошаговое руководство по восстановлению такого поведения с помощью React Native. Руководство довольно подробное, но требует некоторого опыта программирования на React, поэтому мы не будем рекомендовать его новичкам.

✉️ Подпишитесь на рассылку еженедельно Email Blast от CodeBurst 🐦 Подпишитесь на CodeBurst на Twitter , просмотрите 🗺️ Дорожная карта веб-разработчиков на 2018 год и 🕸️ Изучите веб-разработку с полным стеком .