Антон Спирин

Вот исправленный вариант https://jsfiddle.net/5zqfno0x/
Тут используется особенность NaN, которая заключается в том, что
NaN !== NaN // true

Еще вариант с использованием Number.isNaN вместо isNaN https://jsfiddle.net/gz2onxrh/
Но Number.isNaN это спецификация ES6. Функция не поддерживается IE11 и другими старыми браузерами.

Проблема функции isNaN в том что она сначала конвертирует аргумент в число и строки содержащие что угодно помимо числел и пробелов, объекты, undefined превращаются в NaN

isNaN(undefined); // true
isNaN({});   // true
isNaN('test');  // true

На странице два элемента с одним id. Ваш скрипт забирает и слушает первый, а пользователь взаимодействует со вторым, который ваш скрипт не слушает. Видимо, особенности работы вендерной библиотеки. Добавьте класс, например f1 и забирайте по нему, а значение получайте из e.currentTarget:

$('.f1').on('change', function(e) => {
 var value = $(e.currentTarget).val();
})

Вот этот код, выполненный в консоли браузера на вашем сайте, прекрасно работает:

$(document).find('.form-element').on('change', e => console.log($(e.currentTarget).val()));

Зачем вам подгружать роуты? Вы должны добавить в приложение 6 основных роутов:
/posts
/comments
/albums
/photos
/todos
/users

А конкретные сущности открывать с помощью параметров, например postId:

<Route path="/post/:postId" component={Post}/>

const Post = ({ match, postsMap }) => {
  const post = postsMap[match.params.postId];
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
}

Вообще для получения поста из списка постов лучше использовать selector pattern. Но это выходит за рамки темы вопроса, поэтому пример писать не буду. Но советую посмотреть библиотеку reselect.

Сам список постов получаем GET запросом и рендерим с помощью Link:

<List>
  {postsList.map(post => (
    <Link to={`/post/${post.id}`} key={post.id}>{post.title}</Link>
  ))}
</List>

Nikita Shchypylov, у тебя в коде точно что-то не правильно. Ты его сам писал или что-то копировал?
Не хватает полных примеров кода, чтобы понять в чем причина.
Вот что точно надо поменять:
1. inputIdeaHandle надо передать в компонент через декоратор connect:

import { connect } from 'react-redux';
import { inputIdeaHandle } from '../actions';

const mapDispatchToProps = {
  inputIdeaHandle,
};

export default connect(null, mapDispatchToProps)(Dashboard);

2. changeHandle должен быть inlineFunction:

changeHandle = e => {
  const { value } = e.target;
  this.props.inputIdeaHandle(value);
};

Потому, что сначала надо сконвертировать коллекцию узлов в массив, так как коллекция узлов не имеет интерфейса используемого функцией sort.

Для конвертации можно использовать функцию slice:

const array = Array.prototype.slice.call(nodeList);

функцию Array.from:
const array = Array.from(nodeList)

spread оператор:
const array = [...nodeList];

Вот исправленный вариант с использованием Array.from https://jsfiddle.net/4e9exevw/
или такой если сортировать собираетесь только числа https://jsfiddle.net/uywwju0a/

Это SPA на React с server side rendering. Приложение рендерится и получает данные на стороне сервера. При переключении поста, срабатывает роутер, рендерится нужный пост, а из интернета подтягиваются только картинки. Скорость node тут не причем. Такие SPA принято называть изоморфными.

Вот вариант решения с переходом с inline на flex. https://jsfiddle.net/yggnswa5/

Исправил ваш календарь. https://codepen.io/rockoff/pen/rYXKyp?editors=0011
Смотрите в js строки c 15 по 20, с 51 по 60. И в css 8049

arr[number] обращение к элементу с индексом number. Замените на sum += +number;

1. Надо установить сам Eslint в зависимости проекта (глобально его обычно не ставят):
npm install eslint --save-dev
2. Если надо, установить конфиги и плагины.
Советую поставить конфиг eslint-config-airbnb и плагин eslint-plugin-prettier.
3. Если используете Flow или экспериментальные фишки JS, ставьте парсер babel-eslint.
4. Создать файл правил .eslintrc. Пример:

{
  "extends": [
    "airbnb",
    "prettier",
  ],
  "plugins": [
    "prettier"
  ],
  "parser": "babel-eslint",
  "rules": {
      /* тут пишите правила, 
       * так же при использовании конфигов,
       *  вам скорей всего захочется какие-то 
       * правила, используемые в них, отключить,
       * это можно сделать тут
       */
  }
}

5. Прописать в своей IDE путь к Eslint и файлу конфигурации, Webstorm находит конфигурацию и локальный ESLint в проекте сам. Как это сделать в NotePad++ поищите сами, скорей всего в репозитории или на сайте плагина есть руководство по настройке и полная документация.

Вот простой вариант решения https://jsfiddle.net/rockon404/q2kpasfu/

простой вариант

const str = "<div class='abc'></div><div class='abc'></div>";
const array = $(str);

array.each((_, el) => console.log(el));

//  результат 
//  <div class="abc"></div>
//  <div class="abc"></div>

Стоит уточнить, что это не массив, а объект JQuery. Плюс такого решения в том, что теги могут быть абсолютно любые.

JS мультипарадигмальный язык. Object.create это, более характерная прототипному программированию, альтернатива оператора new:

const human = {
  planet: 'Earth',
}

const tom = Object.create(human);
tom.name = 'Tom';
tom.age = 32;
tom.country = 'UK';

console.log(tom.planet);

// => Earth

Ключ planet при этом не создается в новом объекте, а берется при вызове tom.planet из прототипа human, пока не будет переназначен в tom.

И если мы изменим прототип human после создания tom, то:

const human = {
  planet: 'Earth',
}

const tom = Object.create(human);
tom.name = 'Tom';
tom.age = 32;
tom.country = 'UK';

human.planet = 'Mars';

console.log(tom.planet);

// => Mars

но если мы переназначим tom.palnet, то:

const human = {
  planet: 'Earth',
}

const tom = Object.create(human);
tom.name = 'Tom';
tom.age = 32;
tom.country = 'UK';

tom.planet = 'Jupiter';
human.planet = 'Mars';

console.log(tom.planet);

// => Jupiter

console.log(human.planet);

// => Mars

$.extend в свою очередь при вызове:

const human = {
  planet: 'Earth',
}

const tom = $.extend({}, human);
tom.name = 'Tom';
tom.age = 32;
tom.country = 'UK';

создаст новый объект tom включающий в себя ключи human без прототипирования.

Надеюсь разница понятна.

для примитивов:

const arr1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
const arr2 = ['b', 'd', 'f'];

const result = arr1.filter(el => !arr2.includes(el));

// результат ['a', 'c', 'e', 'g']

для объектов по искомому ключу:

const arr1 = [{name: 'Carl', age: 32}, {name: 'Sally', age: 24}];
const arr2 = [{name: 'Carl', age: 32}];

const result = arr1.filter(x => !arr2.some(y => x.name === y.name));

// результат [{name: 'Sally', age: 24}]

полное сравнение объектов:

const compareObjects = (obj1, obj2) => {
    for (let p in obj1){
        if (Object.prototype.hasOwnProperty.call(obj1, p)) {
            if(obj1[p] !== obj2[p]){
                return false;
            }
        }
    }
    for(let p in obj2){
        if (Object.prototype.hasOwnProperty.call(obj2, p)) {
            if (obj1[p] !== obj2[p]) {
                return false;
            }
        }
    }
    return true;
};

const arr1 = [{name: 'Carl', age: 32}, {name: 'Sally', age: 24}];
const arr2 = [{name: 'Carl', age: 32}];

const result = arr1.filter(x => !arr2.some(y => compareObjects(x, y)));

// результат [{name: 'Sally', age: 24}]

пояснение почему Object.prototype.hasOwnProperty.call(obj, p), а не obj.hasOwnProperty(p).
Так же можно использовать differesnce из lodash.

Цитата из официальной документации:

Use babel-plugin-syntax-dynamic-import on the client.
Use babel-plugin-dynamic-import-node on the server.

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

Нет, у тебя в примере в переменную d записывается 2 и все.
Там нет замыкания.
И понимаешь ты все не верно.
Твой пример похож на задачу по замыканиям, которую надо решить.

Вот если переписать так:

function a() {
    var c = 2;

    function b() { 
      return c++;
    };

    return b;
}

var d = a();

alert(d()); // 2
alert(d()); // 3

то d будет присвоенна функция:

function b() { 
  return c++;
};

а значение с будет браться из скоупа в котором функция была создана и перезаписывается с каждым вызовом d.
Скоуп будет существовать пока есть ссылка на функцию, то есть пока мы не присвоим d другое значение.
Это и есть замыкание.

Значение c было определенно в функции a в момент вызова. Следом мы возвращаем из функции a функцию b. Функция b использует переменную c из скоупа созданного в момент вызова функции a и, как я писал выше, пока будет существовать ссылка на функцию b скоуп будет существовать, потому что функция b использует a и может быть вызвана.
А с каждым вызовом a мы создаем новый скоуп, и если возвращать каждый результат вызова a в переменную, каждый раз мы будем получать новое замыкание:

function a() {
    var c = 2;

    function b() { 
      return c++;
    };

    return b;
}

var d = a();
var e = a();

alert(d()); // 2
alert(d()); // 3

alert(e()); // 2

alert(d()); // 4
alert(d()); // 5

alert(e()); // 3

Надеюсь так понятней.

function Row({ children }) {
  return <div className="descr-doc__item">{children}</div>
}

<Row>{`Клиент: ${client}`}</Row>

$('#but').click(function(){
    $('.nav').toggleClass('open');
});

https://codepen.io/pen/OOdGgW

Вот заплатка решающая вашу проблему https://jsfiddle.net/cug6w5sd/1/
Добавил дополнительные условия в слушатель keyup.
Лучше переписать покрасивей.

По содержанию сухая теория из книг. Знания которые быстрей и эффективней получить бесплатно, изучая по книге. Не удивлюсь если написали по известной книжке, ничего от себя не добавив. Пустая трата денег. Сколько за такое берут если не секрет?