Антон Спирин

Примерно так.

Это embed проигрыватель сервиса https://soundcloud.com
Для проигрывания конкретного трека, на любом треке достаточно нажать Share > Embed, выбрать нужные настройки и скопировать код.

https://developers.soundcloud.com/docs/api/html5-widget

Почитайте про геттеры и сеттеры.

@keyframes
Пример

Вы, видимо, механику происходящего не понимаете.

Есть родительский класс и есть дочерний класс.

Нет, есть расширяемый класс(класс-предок) и есть класс наследующий свойства и методы от класса-предка(класс-потомок).

У вас в классе-предке ничего из класса-потомка не доступно, вы сделали ошибочные выводы.
На самом деле в компоненте-предке определен метод ngOnInit который, наследуется и вызывается компонентом-потомком.
Вот посмотрите, я изменил ваш пример и теперь в консоли видно кем именно вызывается ngOnInit в вашем примере.
А вот так можно воспроизвести, по сути, ту же ситуацию.

Срочно подтягивайте основы JavaScript и API Angular.

class properties экспериментальный синтаксис.
В этом случае поле state задается после (простой пример) вызова конструктора React.Component, в котором инициализируются преданные props. Поэтому когда вы определяете state, props уже определены и доступны.
Если используете transform-class-properties, он входит в stage-0, stage-1, stage-2, то смело используйте.

webpack.config.js

entry: 'entry.js',
output: {
  filename: 'bundle.js',
  library: 'App'
},

entry.js

function initMap() {
    var e = {
        lat: 40.714909,
        lng: -73.751213
    }
        , t = new google.maps.Map(document.getElementById("map"), {
        zoom: 16,
        center: e
    });
    new google.maps.Marker({
        position: e,
        map: t
    })
}

export {
  initMap,
};

в параметрах ссылки:
callback=App.initMap

Но если не используете в функции переменных из других частей кода, проще прописать функцию в теге script в html:

<script type="text/javascript" src="./js/bundle.js"></script>
<script>
//Google Maps init
function initMap() {
    var e = {
        lat: 40.714909,
        lng: -73.751213
    }
        , t = new google.maps.Map(document.getElementById("map"), {
        zoom: 16,
        center: e
    });
    new google.maps.Marker({
        position: e,
        map: t
    })
}
</script>
<script type="text/javascript"  async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDgD9raCgCP3YPNgS7DZyoB8t-Q8wCuaRY&callback=initMap"></script>

Ошибка проверки ESLint. В react-scripts перед билдом запускается проверка ESLint с правилом no-undef.
Исправить можно так:
const VK = window.VK;
или:

/*eslint-disable */
VK.Api.call({
 /* ... */
});
/*eslint-enable */

Using Global Variables with create-react-app

А самим исходники посмотреть не?

.btn {
    background-image: url(../img/btn.png);
    background-position: 0 0;
    width: 478px;
    height: 152px;
    display: inline-block;
    position: absolute;
    top: 160px;
    left: 0;
    font-size: 20px;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,0.53);
    text-align: center;
    line-height: 150px;
}
.btn:hover {
    background-position: 0 -155px;
    padding-top: 2px;
}
.btn:before {
    content: '';
    position: absolute;
    top: 50px;
    right: 40px;
    bottom: 50px;
    left: 40px;
    border: 6px solid transparent;
    border-radius: 50px;
    animation-duration: 1s;
}
.btn:hover:before, .btn:focus:before, .btn:active:before {
    animation-name: hvr-ripple-out;
}
@keyframes hvr-ripple-out {
    100% {
        border-color: #ccc;
        top: -12px;
        right: -12px;
        bottom: -12px;
        left: -12px;
        opacity: 0
    }
}

.eslintrc

{
  "extends": [
    "airbnb",
    "prettier",
    "prettier/react"
  ],
  "plugins": [
    "prettier"
  ],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "node": true
  },
  "rules": {
    "no-plusplus": 0,
    "no-confusing-arrow": 0,
    "no-restricted-syntax": 0,
    "guard-for-in": 0,
    "class-methods-use-this": 0,
    "jsx-a11y/no-static-element-interactions": 0,
    "jsx-a11y/anchor-is-valid": 0,
    "react/no-danger": 0,
    "react/prop-types": 0,
    "react/jsx-filename-extension": 0,
    "react/jsx-curly-brace-presence": ["error", { "props": "never", "children": "never" }],
    "import/no-unresolved": ["error", { "commonjs": true }],
    "import/extensions": 0,
    "import/no-extraneous-dependencies": ["error", {"devDependencies": true}],
    "import/prefer-default-export": 0,
    "prettier/prettier": ["error", {
      "singleQuote": true,
      "trailingComma": "all"
    }]
  },
  "settings" : {
    "import/resolver": {
      "webpack": {
        "config": "webpack/base.config.js"
      }
    }
  }
}

пакеты:

{
    "assets-webpack-plugin": "^3.5.1",
    "babel-eslint": "^8.2.1",
    "eslint": "^4.18.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-import-resolver-webpack": "^0.8.4",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-prettier": "^2.6.0",
    "eslint-plugin-react": "^7.6.1",
    "prettier": "^1.10.2",
}

Резолвер нужен если алиасы используете для путей в коде.

день: getDate()
месяц: getMonth()

var date = new Date();
date.setDate(date.getDate() + 3);
var dayOfMonth = date.getDate();
var month = date.getMonth() + 1;

document.body.innerHTML = 'Day: ' + dayOfMonth + ' Month: '+ month;

Демо

Логическое или, если проверяемый операнд истина, то проверка дальше не идет и возвращается его значение.
Почитать

Можно использовать функцию обертку:

obj.curse.push(function() {
  return ask(obj.name);
});

или bind:
obj.curse.push(ask.bind(null, obj.name));