Ice

1. Проверяется наличие this.state.active в this.props.items, если true, выполняется вторая часть. (если false - вторая часть не выполняется)
2. После того как мы проверили что данные есть this.props.items[this.state.active], они деструктиризируются в те пропсы которые там описаны (это могут быть не atr)

Все классно, но для < App / > нужен Babel, чтобы работал JSX
jquery удалить вообще.
В обертку скрипта добавить type="text/babel"
Пример https://metanit.com/web/react/1.2.php
Без JSX https://ru.reactjs.org/docs/react-without-jsx.html

указать alias в webpack

resolve: {
        alias: {
            '~': path.resolve(__dirname, 'src'),
            '~i': path.resolve(__dirname, 'src/images/img/icons'),
        }
    },

В проекте подключать как:
import Img from '~i/sign-out.svg';

plugins: @babel/plugin-transform-react-jsx

По настройкам вот так

module: {
        rules: [
            {
                test: /\.js|jsx$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: [
                            "@babel/plugin-transform-react-jsx",
                            "@babel/plugin-proposal-class-properties"
                        ]
                    }
                }
            }