Привет!
Не так давно я понял, что работа с CSS во всех моих приложениях — это боль для разработчика и пользователя.
Под катом лежат мои проблемы, куча странного кода и подводные камни на пути к правильной работе со стилями.
Рубрика «ReactJS» - 27
Готовим идеальный CSS
2018-11-23 в 7:00, admin, рубрики: css, javascript, React, ReactJS, vue, vuejs, webpack, webpack 4, Блог компании Constanta, Клиентская оптимизация, минификацияReact-redux, connect по-новому, разделение отвественности в компонентах
2018-11-21 в 19:47, admin, рубрики: javascript, ReactJSПри написании SPA с помощью связки react-redux, для работы с redux используют функцию connect в файле react компонента для проброски стейта и «диспатча». Вся боль в том, что «коннекторы» и «диспатчеры» многие описывают там же, в компоненте. В этой статье я опишу connect по новому, и покажу простой способ разделения кода.Читать полностью »
Валидация сложных форм React. Часть 1
2018-11-18 в 19:03, admin, рубрики: javascript, React, react-validation-boo, react.js, ReactJSДля начала надо установить компонент react-validation-boo, предполагаю что с react вы знакомы и как настроить знаете.
npm install react-validation-boo
Чтобы много не болтать, сразу приведу небольшой пример кода.
import React, {Component} from 'react';
import {connect, Form, Input, logger} from 'react-validation-boo';
class MyForm extends Component {
sendForm = (event) => {
event.preventDefault();
if(this.props.vBoo.isValid()) {
console.log('Получаем введённые значения и отправляем их на сервер', this.props.vBoo.getValues());
} else {
console.log('Выведем в консоль ошибки', this.props.vBoo.getErrors());
}
};
getError = (name) => {
return this.props.vBoo.hasError(name) ? <div className="error">{this.props.vBoo.getError(name)}</div> : '';
};
render() {
return <Form connect={this.props.vBoo.connect}>
<div>
<Input type="text" name="name" />
{this.getError('name')}
</div>
<button onClick={this.sendForm}>
{this.props.vBoo.isValid() ? 'Можно отправлять': 'Будьте внимательны!!!'}
</button>
</Form>
}
}
export default connect({
rules: () => (
[
['name', 'required'],
]
),
middleware: logger
})(MyForm);
Приручить зверя. С чем мы столкнулись при разработке приложения для ведения личного дневника на React Native
2018-11-16 в 13:39, admin, рубрики: android development, Google Drive API, javascript, open source, react native, ReactJS, Realm, личный дневник, личный опыт, мобильное приложение, разработка мобильных приложений, Разработка под androidВ предыдущей статье я подробно рассказал о нашем опыте создания веб-сервиса/мобильного приложения для ведения личного дневника. Актуальная версия приложения (минимальная работоспособная версия уже выложена в Google Play) разрабатывается на React Native, и вот на нем мы и остановимся подробно сегодня.
Рассказываем о собственном опыте работы с фреймворком, способах расширения функционала, «подводных камнях» (куда ж без них!) и как мы их обошли.
О фреймворке в целом
Немного о виновнике торжества — React Native. Он все-таки хорош!
Для тех, кто в достаточной степени знает JavaScript и тем более NodeJS — он очень хорош. Если же есть опыт с React, ну или хотя бы есть понимание ее идеи, механизма — он просто великолепен!
Главное, что на выходе получается действительно нативное приложение. Расширения и плагины покрывают практически 99% типовых задач. Оставшийся процент при острой необходимости можно дописать на родных языках (java, object-c) и подключить к React Native приложению.
Но хватит про плюсы, от них толку ноль, хоть список и будет внушительным. Все плюшки и вкусности бессмысленны, если приложение не запускается, а это первое чем нас «порадовал» React Native.
Сначала ему не понравилась версия NodeJS. Потом версия npm. Потом версия Android SDK, потом версия Android tools, потом… Писать про то, как все проблемы решились, смысла нет, ибо с того момента все вышеперечисленное ПО обновило свои версии и инструкции будут неактуальны.
Просто знайте: узкое место React Native — среда сборки. Будьте готовы к штудированию google, чтению форумов и stackoverflow. На развертывание в итоге потратили: Ubuntu 12.6 — 3 дня, Win10 — 2 дня. Как ни странно, на «винде» все оказалось проще, ну, или просто на ubuntu «шишек набили» и уже понимали, что и куда подсовывать.
На заметку, вдруг кому пригодится: код, представленный ниже, решил все проблемы с совместимостью версий sdk у дополнений при компиляции проекта.
Читать полностью »
Введение в React Hooks
2018-11-13 в 12:38, admin, рубрики: frontend-разработка, hooks, javascript, JS, React, react.js, ReactJS, Разработка веб-сайтов, Тестирование веб-сервисов
Если вы читаете Twitter, вы, вероятнее всего, знаете что Hooks - это новая фича React, но вы можете спросить, как мы на практике можем их использовать? В этой статье мы покажем вам несколько примеров использования Hooks.
Одна из ключевых идей для понимания заключается в том, что Hooks позволяют использовать state и другие возможности React без написания классов.
Читать полностью »
Руководство по разработке Web-приложений на React Native
2018-11-09 в 9:00, admin, рубрики: javascript, react native, ReactJS, Блог компании RUVDS.com, разработка, Разработка веб-сайтовВы проснулись. Сияет солнце, щебечут птички. В мире никто ни с кем не воюет, никто не голодает, а один и тот же код можно использовать и в веб-проектах, и в нативных приложениях. Как бы было хорошо! К сожалению, на горизонте можно разглядеть лишь универсальный код, но путь к нему, даже сегодня, всё ещё полон неожиданностей.
Материал, перевод которого мы сегодня публикуем, представляет собой небольшое, но достаточно подробное руководство по разработке универсальных приложений с использованием React Native.
Читать полностью »
Разыгрываем билеты на воркшоп «Advanced React State Management With MobX»
2018-11-07 в 9:34, admin, рубрики: javascript, mail.ru group, mobx, React, ReactJS, workshop, Блог компании Mail.Ru Group
Привет, хаброчитатели! Мы с классными новостями. Как только наши коллеги узнали, что Michel Weststrate готов сделать воркшоп в Москве, сразу собрали группу желающих. И решили разыграть два билета на мастер-класс среди читателей хаброблога. Про воркшоп и условия розыгрыша читайте под катом.Читать полностью »
Как развернуть окружение для разработки приложений на React Native
2018-11-06 в 11:20, admin, рубрики: mobile apps, ReactJS, ReactNative, Блог компании Неофлекс, мобильные приложения, разработка мобильных приложенийДоброго времени суток!
Решив начать разрабатывать приложения на React Native, я столкнулся с проблемами разворачивания окружения. Сегодня я хочу поделиться опытом его настройки.
Конечно, на официальном сайте есть подробное описание, но следуя только этим рекомендациям, было довольно сложно сделать все настройки.
Разбираемся с перехватчиками в React
2018-11-02 в 16:06, admin, рубрики: javascript, React, ReactJS, Блог компании Издательский дом «Питер», веб-дизайн, Веб-разработка, книги, Программирование, проектирование интерфейсов, Профессиональная литератураПривет!
Мы с чувством невероятной гордости и облегчения сегодня вечером сдали в типографию новую книгу о React
По этому поводу предлагаем вам немного сокращенный перевод статьи Дэна Абрамова (Dan Abramov), рассказывающего об использовании перехватчиков в 16-й версии React. В книге, которую мы сами уже ждем с нетерпением, об этом рассказано в 5-й главе.
Читать полностью »
Использование RxJS в React-разработке для управления состоянием приложений
2018-10-31 в 9:00, admin, рубрики: javascript, React, ReactJS, rxjs, Блог компании RUVDS.com, разработка, Разработка веб-сайтовАвтор материала, перевод которого мы сегодня публикуем, говорит, что здесь он хочет продемонстрировать процесс разработки простого React-приложения, использующего RxJS. По его словам, он не является экспертом в RxJS, так как сам занимается изучением этой библиотеки и не отказывается от помощи знающих людей. Его цель — привлечь внимание аудитории к альтернативным способам создания React-приложений, вдохновить читателя на самостоятельные исследования. Этот материал нельзя назвать введением в RxJS. Тут будет показан один из многих способов использования этой библиотеки в React-разработке.
