romanlex

import React, {Component, PureComponent} from 'react';
import PropTypes from 'prop-types';
import { spring, Motion, presets } from 'react-motion';
import Modal from 'react-modal';

const portalClassName = "modal-portal";
const bodyOpenClassName = "modal-opened";

export const MODAL_VERTICAL_POSITIONS = {
	TOP: 'top',

romanlex

The Beginning

Yes...it's true...redux is smart....smarter than you even know. It really does want to help you. It strives to be sane and easy to reason about. With that being said, redux gives you optimizations for free that you probably were completely unaware of.

connect()

connect is the most important thing in redux land IMO. This is where you tie the not between redux and your underlying components. You usually take state and propogate it down your component hiearchy in the form of props. From there, presentational

romanlex

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---

romanlex

package main

import (
	"io/ioutil"
	"log"
	"fmt"
	"os"
	"sync"
	"path/filepath"
	"os/exec"

romanlex

"eslintConfig": {
    "env": {
      "browser": true,
      "jquery": true,
      "es6": true,
      "node": true
    },
    "extends": [
      "plugin:react/recommended",
      "plugin:jsx-a11y/recommended",

romanlex

const emptyCounterparties = [];
const emptyProducts = [];

/** Список банков */
export const getCounterparties = (state) => state.orders.data.counterparties;

/** Конкретный банк */
export const getCounterparty = (state, props) =>
    state.orders.data.counterparties[props.bankId] || null;

romanlex

{
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'common',
      children: true,
      deepChildren: true,
      minChunks: (module, count) => {
        return count >= 3 && module.context && !module.context.includes('node_modules');
      },

romanlex

#!/usr/bin/env node
/**
 * Flowtype understands Node (or Haste) imports but not Webpack.
 *
 * Many codebases have webpack set up like:
 * src/foo.js
 * src/components/Bar.jsx
 *
 * And then import them like `require('foo')` or `require/components/Bar.jsx`
 *

romanlex

[ignore]
<PROJECT_ROOT>/app/*
<PROJECT_ROOT>/bin/*
<PROJECT_ROOT>/config/*
<PROJECT_ROOT>/db/*
<PROJECT_ROOT>/doc/*
<PROJECT_ROOT>/dockerfiles/*
<PROJECT_ROOT>/engines/*
<PROJECT_ROOT>/kubernetes/*
<PROJECT_ROOT>/lib/*

romanlex

const RAW_CONTENT_TYPES = ['image/svg+xml']

/**
 * Fetch url
 *
 * @param {string} url
 */
export const fetchResources = url => fetch(url, {
  credentials: 'same-origin',
}).then((response) => {