Игорь Забродин

можно так https://jsfiddle.net/6q5319rm/

Вы мутируете state:

this.state.data[this.state.id][e.target.name] = !checked;

До этого присваиваете ему значение props:

this.setState({
  data: this.props.data,
  id: this.props.id
});

Естественно props изменяется после мутации.

Банальный пример:

const a = { key: 'value' };
const b = a;
b.key = 'new value';
console.log(a.key); // new value

Почитайте о том, что такое передача по ссылке. Почитайте про иммутабельность.
И никогда больше не пишите ничего подобного:

this.state.data[this.state.id][e.target.name] = !checked;

Изменение state только через this.setState.

const fs = require('fs');
const dir = './directory';

fs.readdir(dir, (err, files) => {
  console.log(files.length);
});

Попробую на пальцах объяснить.

Событие – это конверт, на котором написано его название. Внутрь конверта можете вложить что-нибудь, а можете оставить конверт пустым.

Элемент – это столик. Кто угодно может подойти и положить на столик свой конверт.

Слушатель – это мужик, который топчется около столика и смотрит, нет ли чего с интересующим его названием. Может несколько человек поджидать конвертики с определённым названием – прочтут все, если только в конверте не написано «по прочтении съесть» – тогда кто-то съест и дальше не передаст.

Как создать/отправить конверт. В любом месте кода создайте конверт и дайте ему название: var myEvent = new Event('teaTime'); Остается положить конверт на нужный столик:

document.getElementById('stolik').dispatchEvent(myEvent);

Чтобы в событие вложить какие-то данные, нужно использовать другой конструктор и передать нагрузку в поле detail:

var event = new CustomEvent('saySomething', { detail: "Hello there!" });

Для чего нужно создавать свои события? Чтобы развязать куски кода. Например, в разных местах документа можно нажать на кнопку повторяющегося виджета. Виджет создаст на document событие "widgetClicked". А ещё несколько одинаковых компонентов в странице, слушающих document на предмет события "widgetClicked", получат пинок и что-нибудь вытворят.

svg - https://codepen.io/topicstarter/pen/jxYEdB?editors=1010

И самое главное: кто придумал слабую типизацию?

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

Динамическую типизацию придумали для того, чтобы было легче писать обобщённые алгоритмы и мета-алгоритмы, в дин. языке для обобщения кода не нужны ухищрения типа дженериков (TypeScript, C# и много чего ещё) или шаблонов/макросов (C++). В ОО-языках часто доступны и другие удобства, например смена интерфейса объекта в зависимости от его состояния (т.к. решение о возможности вызова метода/свойства объект может принимать сам).

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

Как вы пишете код на жс?

Мы не пишем код на JS, мы пишем код на TypeScript. Да, такие сейчас странные времена, когда язык со статической типизацией компилится в язык с динамической, т.к. исполнять на клиенте (в браузере) больше нечего пока.

Он же не должен быть напичкан parseInt() и !== undefined.

Не должен. Если писать на голом JS, можно а) использовать JSDoc для аннотаций о типах, и работать с типами на уровне документации и договорённостей; б) писать алгоритмы в максимально обобщенной манере, и требовать по возможности не конкретных типов данных, а значений, над которыми допустимы нужные вам операции; в) покрывать код тестами, что и спасает в динамических языках.

Чем больше проект, тем важнее статическая типизация, это нормально. JS - это язык который популярен по техническим причинам и по стечению обстоятельств, а не потому что он этого заслуживает (имхо). Очень неглупые дяди и тёти не стали бы тратить годы своего времени и кучу денег на разработку TypeScript и Flow, если бы это было ненужно.

Вопрос поставлен некорректно, так как Node.js никак не альтернатива Angular.
Изучайте Node.js и React.
Node для бека, React для фронта.
Можно посмотреть на Vue как альтернативу React, порог входа там ниже.
Но комьюнити и экосистема у React больше.
Angular тяжеловат для новичка, порог входа повыше, а научиться писать на нем правильные вещи тяжелей.
Лучшая IDE для JS и фронтенда в частности Webstorm

Замените

$('.test').append('NEW BLOCK!');

на

$(this).closest('.test').append('NEW BLOCK!');