Islam Ibakaev

в идеале компонент не "взаимодействует" с api.
если используешь redux-thunk, то запрос на api совершает оператор(action creator), сам же контейнер всего лишь дёргает этот оператор в методе componentDidMount.

не судите строго, гуру джаваскрипта - https://repl.it/JkPV/3

const you = { device: 0, accessory: 0, availableMoney:  null };

handle(99.99, 9.99, 0.08, you);

function handle(phone, accessory, tax, customer) {
	
	const availableMoney = parseInt(prompt('Сколько денег у вас не счету?', ''), 10);
	
	if(Number.isNaN(availableMoney) || availableMoney <= 0) return alert('Остаток на счету не является положительной суммой!');

	customer.availableMoney = availableMoney;
	
	if(!confirm('Купить телефон?')) return purchaseNothing(); // ты не хочешь покупать девайс о_0

	const phonePrice = getRealPrice(phone, tax); // стоимость девайса с учётом налогов
	
	if(availableMoney < phonePrice) return phoneBuyingFailed(availableMoney, phonePrice); // девайс не купить :(
	
	if(!confirm('Купить акссесуар?')) return purchasePhone(phonePrice, customer); // ты хочешь девайс, но без акссесуара :|

	const comboPrice = phonePrice + getRealPrice(accessory, tax); // стоимость трубы и акссесуара вместе (комбо) с учётом налогов
	
	if(availableMoney > comboPrice) return purchaseCombo(comboPrice, customer); // денег хватило на всё!

	comboBuyingFailed(availableMoney, comboPrice); // акссесуар точно мимо...
		
	return (confirm('Вы всё ещё хотите приобрести только гаджет?')) // когда пролетел с акссесуаром
		?  purchasePhone(phonePrice, customer) 
		: purchaseNothing;
}

function purchaseNothing() {
	return alert('Очень жаль видеть вас уходящим...');
}


function purchasePhone(price, customer) {
	alert('Вы приобрели девайс за ' + price + '$. Поздравляем с покупкой!'); // бабла хватило на всё!
	
	console.log('Your results:');
	
	return { device: 1, accessory: 1, availableMoney: +fixNumb(customer.availableMoney - price) };
}

function purchaseCombo(price, customer) {
	alert('Вы приобрели девайс вместе с акссесуаром за ' + price + '$. Поздравляем с покупкой!'); // бабла хватило на всё!
	
	console.log('Your results:');
	
	return { device: 1, accessory: 1, availableMoney: +fixNumb(customer.availableMoney - price) };
}

function phoneBuyingFailed(total, price) {
	alert(
		'К сожалению, у вас недостаточно средств на счету(' + total + '$).\n' + 
		'Стоимость гаджета с учётом налогов - ' + price + '$'
	);
}

function comboBuyingFailed(total, price) {
		alert(
		'К сожалению, у вас недостаточно средств на счету(' + total + '$).\n' + 
		'Стоимость гаджета вместе c акссесуаром с учётом налогов - ' + price + '$'
	);
}

function fixNumb(n) {
	return n.toFixed(2);
}

function getRealPrice(n, tax) {
	return +fixNumb((n + (n * tax)));
}

просто убери 4-ю строчку

полгода назад наткнулся на статью

никак. это и не нужно. объект arguments и параметры функции никак не связаны. по сути параметры - это синтаксическая добавка(то есть в них нет принципиальной необходимости), чтобы тупо было удобнее...
вместо

function sum () {
	return arguments[0] + arguments[1];
}

писать так

function sum (x, y) {
	return x + y;
}

Позволь поинтересоваться зачем тебе такой объект?

на freecodecamp можно написать пару несложных фронтенд проектов.

freecodecamp.com
изучишь хтмл, цсс, джейквери -> напишешь кучу алгоритмов(лёгких и нет) -> напишешь парочку несложный проектов -> получишь электронный сертификат(хз, может пригодится)

этот генератор выдаёт неплохой галпфайл

прочитай секцию ES6 Generators In Brief

1) зачем нужно очищать массив? Почему-бы просто не создать новый?
2) оффтоп:
не делай так:

ar.sum = function() {
    this.reduce(function(a, b) {
        return a + b;
    });
}

Просто напишу функцию, типа
const sum = arr => arr.reduce((a, b) => a + b)
sum(ar); // 6

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

у них, видимо, code-splitting "из коробки", но ты и сам можешь настроить, если с вебпаком "в ладах"

При серверном рендеринге(поправьте, если ошибаюсь) сначала создаётся экземпляр store, затем он вскармливается корневому элементу приложения, чтобы данные заполнили компоненты(словно вода заполняет иссохшее русло реки), затем всё это "добро" рендерится в старый-добрый html и возвращается на клиент.

Затем на клиенте react проверяет совпадают ли значения аттрибутов data-react-checksum клиетского приложения и серверного. Если совпадают, это означает, что если мы "поднимем" клиентское приложение(дорогая операция), то что мы получим будет совпадать с тем, что отправил сервер. Выходит, что этого можно избежать. Именно это и делает реакт, просто копирует полученный на сервер DOM в клиентское приложение.

Next.js делает всё это за тебя. С одной стороны это хорошо, не надо возиться с настройкой серверного рендеринга, с другой стороны - плохо, потому что всё-таки стоит знать как всё происходит в деталях на сервере.

попробуй так

let array = Array.from({ length: 10 }, (v, k) => k);

const fn = (el) => {
  setTimeout(() => { console.log(el) }, 100 * el);
  return el * 2;
};

console.log(array.map(fn));

установи yeoman командой npm install -g yo
установи webapp-generator (сгенерирует дефолтный шаблон для будущего сайта) командой npm install -g webapp-generator
установи gulp-cli и bower командой npm install -g gulp-cli bower

и наконец командаyo webapp чтобы поднять каркас

Вообщем всё это объясняется на самом сайте yeoman.io

UPDATE: поскольку этот вопрос очень многих заинтересовал, я написал простой стартер для вёрстки с pug.
вкратце: под капотом проект, который скаффолдит webapp-generator, только приспособленный для работы с pug, убрана папка тестов, добавлен gulp-uncss(чтобы отрезать неиспользумемые стили фреймворка) и почищен gulpfile.js
Вобщем форкайте, лайкайте, пулл-реквестите(если хотите)

возможно ты хотел что-то такое

var snake = document.querySelector('#snake');
    var snakeHP = 3;
    
    snake.addEventListener('click', onSnakeClick);
    
    function onSnakeClick(ev) { // ev - event object
    	snakeHP = snakeHP - 1;
    	
    	if(!snakeHP) {
    		// что-то делаешь 
    		
    		return;
    	}
    	
    	snakeHP--;
    	
    }