ZarahioN Presents

Answering why

Первые серьезные строки на React.js [Pt.3 – Finally starting for real]

В прошлых монотонных рассказах мы занимались долгой и утомительной настройкой вебпака и вообще «среды» для создания React приложений.

К счастью, это мучение наконец закончилось и мы можем приступить к созданию нашего приложения. Ура, свобода!

Впрочем, начнем с азов, затронутых еще в первом рассказе. Заглянем в файл index.js, он скорее всего находится в папке src, если ты продолжаешь с пути c-r-a, либо прямо в корне проекта, если решил в лоб принять удар тяжелой и героической самостоятельной настройки вебпака.

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

Благость под названием create-react-app [Pt.2 – Automatic React Installation (and how to break it)]

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

create-react-app

Что же это? По факту cli — command line interface для создания базового шаблона стандартного приложения на реакте.

В начале своего пути реакт не имел подобных инструментов (да и вообще разрабатывался «по приколу»

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

Разбираемся с React(Webpack)-ом [Pt. 1 — Manual React Installation (and pain of doing so)]

Что вообще такое React(.js)?

По уверениям создателей это просто быстрая, декларативная библиотека для создания пользовательских интерфейсов, и технически это сущая правда, однако.. насколько я заметил, реакт (как и многие подобные фреймворки) стал практически синонимом SPA (Single Page Application) — одностраничным приложениям, которые загружаются один раз и дальше работают без фактической перезагрузки страницы.

И это большей частью хорошо, не учитывая какой вес дополнительных библиотек и страшных слов тянет за собой эта аббревиатура. (Да-да, я знаю насколько многие боятся redux,

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

GraphQL + Apollo + Express = ? [Pt. 1 — Installation adventure]

Заглянув таки пару минут назад на страницу с установкой аполло, я слегка ужаснулся..
тому, насколько давно я с ним не сталкивался.

Я как-то работал на проекте, у которого уже был базовый функционал и работал граф(кюэль? я продолжу называть GraphQL — граф а GraphiQL — графи, так проще, не спрашивай). Это был недолгий опыт, но именно тогда я по-настоящему влюбился в граф (и аполло) и все ждал возможности поиграть с ними еще немного.

Такая возможность наконец пришла и я оказался на удивление смел и решил создать пустенький проект самостоятельно,

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

React-Saga «продвинутый» пример.

За время отсутствия записей я какое-то время посвятил созданию небольшого приложения-таймера, логику которого я реализовал практически полностью с помощью саг.

And that was a pleasant walk in a lush park, I must say.

Приступим:

export const types = {
‘start’: ‘StartTimer@Front’,
‘stop’: ‘StopTimer@Front’,
‘pause’: ‘PauseTimer@Front’,
‘resume’: ‘ResumeTimer@Front’,
‘stopped’: ‘TimerStopped@Saga’,
‘timeUpdated’: ‘TimerUpdated@Saga’,
}

Для начала действия: всего пользователь может отправить 4 действия (они помечены сферой @Front[end]) — старт и стоп таймера, чтобы начать его выполнение с самого начала,

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

Эффекты и саги. React + Redux-saga. [Pt. 3]

Я должен признаться, я был не совсем откровенен, называя call или put вспомогательными функциями (и насчет еще некоторых моментов, но забудем пока про это).

call, put и многие другие являются фабриками Эффектов (Effect) — специальных объектов, напоминающих действия (action) из redux, только предназначенные для самой библиотеки saga.

Почему эффекты? Я бы сказал та же причина, что и у самого редакса — простота, плоскость и тестируемость — за счет мгновенного возвращения простого объекта эффекты позволяют тестировать только код генератора,

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

Отправка параметров и несколько одновременных запросов. React + Redux-saga. [Pt. 2]

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

Но это скучно.

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

function* fetchQuote(action) {
try {
const quote = yield call(requestYodified, action.text);
const spellcheckedQuote = yield call(spellcheck, quote.data);

yield put({type: success, quote: quote.data, spellcheckData: spellcheckedQuote.data});
} catch (e) {
yield put({type: fail,Читать полностью

Почему саги? React + Redux-saga. [Pt. 1]

Учитывая, что ты заглянул в запись с таким названием, что такое React уже знаешь. Шутка, не зря сами создатели назвали библиотеку redux-saga, а не react-saga — многие принципы и способ работы базируется вокруг именно редакса, который, является достаточно свободной библиотекой. Однако, чтобы понять принципы работы достаточно знать только о транзакциях (action\effect).

Поэтому, надеюсь ты знаешь что такое Redux.
(Но ничего, даже если React и Redux вызывают только дрожь и страдания, о них тоже будет понятно и доходчиво,

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