embiid

componentDidMount вызывается после того как смонтируется компонент со всеми его дочерними элементами (следовательно, когда мы пытаемся использовать props.items, запрос к json еще даже не будет отправлен).

Можно присвоить пустой массив для items в initialState, чтобы избавиться от этой ошибки, либо же добавить вспомогательное состояние, которое бы проверяло, загружены ли у нас данные, и если да, то выводить их.

опечатка

this.deleteItem = this.deleteItem.bind(this)
вместо
this.deleteItem = this.addItem.bind(this)

this.deleteItem = this.addItem.bind(this)

Так add или delete? Вы уж определитесь.

А ещё лучше - используйте при объявлении методов синтаксис стрелочных функций, и тогда вручную привязывать контекст будет не надо:

class App extends React.Component {
  addItem = e => {
    ...
  }

  deleteItem = key => {
    ...
  }
  ...

Либо куда-нибудь сохранить в БД/сессию ссылку на изображение, а оттуда выдавать (т.к. request на каждый новый запрос будет чистый, старого file там точно уже не будет), либо передавать её параметром GET-запроса, а оттуда смотреть и выводить. Можно через request.flash передать, он использует сессию.

INSERT INTO MyTABLE (Name, CapitalCity, LargestCity, Admission, Population)
select Name, CapitalCity, LargestCity, Admission, Population from OpenJson('
[
  {
    "name": "Alabama",
    "capitalCity": "Montgomery",
    "largestCity": "Birmingham",
    "admission": "Dec 14, 1819",
    "population": "4,903,185"
  }, ...
')
with (
  Name nvarchar(20) '$.name',
  CapitalCity nvarchar(30) '$.capitalCity',
  LargestCity nvarchar(20) '$.largestCity',
  Admission nvarchar(20) '$.admission',
  Population nvarchar(20) '$.population'
)

.parent {
grid-template-columns : repeat(6, 1fr)
... }
.child { /*всем*/
grid-column-end: span 2
... }
.child { /*последним двум*/
grid-column-end: span 3
... }

Но вообще grid пока еще не совместимы с ослом. Я бы воздержался их использовать, если ты не клал болт на поддержку IE.

1.

const browserSync = require('browser-sync').create();

https://browsersync.io/docs/gulp

2. https://gulpjs.com/docs/en/getting-started/async-c... - нужно в задачах возвращать stream return gulp.src... или вызывать в конце callback

3. что у вас делает таск html? если нужно отслеживать изменения в html и делать reload страницы, то

gulp.watch("app/*.html").on("change", browserSync.reload);

в watch вместо html task.

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();

gulp.task('sass', () => {
    return gulp.src('app/styles/sass/**/*.sass')
        .pipe(sass({ outputStyle: 'expanded'}))
        .pipe(gulp.dest('app/styles/css'))
        .pipe(browserSync.stream());
});

gulp.task('browser-sync', (cb) => {
    browserSync.init({
        server: {
            baseDir: 'app/'
        }
    });
    cb();
});

gulp.task('watch', (cb) => {
    gulp.watch('app/styles/sass/**/*.sass', gulp.parallel('sass'));
    gulp.watch('app/*.html').on('change', browserSync.reload);
    cb();
});

gulp.task('default', gulp.parallel('browser-sync', 'watch'));

value "5dd050dd54b4a11fe4e2724adelete"
выглядит, что это лишнее delete к айдишнику добавляется уже в req.params.id?

Основной посыл использования RESTful API - применение основной идеи Паутины для взаимодействия автоматических агентов (приложений), а не только людей.
Основная идея Паутины - построение распределенной информационной системы путем публикации неких абстрактных ресурсов, выдачи им идентификаторов (в сегодняшнем вебе - иерархических), определения ряда простых и широко известных операций над ними, не зависящих от содержимого ресурса (те самые GET, POST, PUT и т.д.), и связывания этих ресурсов ссылками (это называется гипермедиа, и в частности, гипертекст, если речь идет о текстовой информации).
Как люди с появления Веба публикуют информацию в нем для потребления другими людьми, так и RESTful веб-сервисы публикуют иерархически структурированные ресурсы для потребления клиентами. Разница только в представлении - для людей это plaintext/HTML, для автоматических агентов - это JSON/XML/прочие форматы, которые удобно обрабатывать.
Таким образом, если вы хотите какую-то информацию опубликовать как RESTful API, вам необходимо представить ее как набор ресурсов, а все операции над этой информацией выразить через набор предопределенных операций. Фишка в том, что во многих задачах этих предпопределенных операций вполне достаточно, главное правильно определить ресурсы.
Важно понимать, что "ресурс" это обычно некоторая сущность, "существительное". Как правильно заметил Антон Жуков , ресурс /getItems хоть и может существовать в принципе, говорит о неудачно спроектированном API (действие представлено как ресурс).

Есть и другие подходы к архитектуре распределенных приложений, например архитектуры, основанные на RPC (удаленный вызов процедур). Информация в таких архитектурах также представлена в виде некоторого набора сущностей, однако операции над ними определяются конкретной задачей, и для каждой сущности будет свой набор. Это больше соотвествует классическому ООП-подходу. Таким образом, RESTful следует подходу много сущностей (ресурсов) - мало операций (и эти операции известны заранее), а RPC - немного сущностей, но много операций над ними.

Также важной чертой REST является отсутствие состояния, сохраняемого между запросами к ресурсам. Это очень важно для масштабирования системы.

Сама архитектура REST не привязана к конкретным технологиям и протоколам, но в реалиях современного Веб, построение RESTful API почти всегда подразумевает использование HTTP и каких-либо распространенных форматов представления ресурсов, например JSON, или, менее популярного сегодня, XML.

Смысл использования REST в том, что принципы, хорошо показавшие себя в "человеческом" веб и позволившие построить самую большую распределенную ИС, применяют и для "веба машин".

Ответ длинноват, но как короче объяснить, чтобы не исказить понимание, не представляю. Если что непонятно - спрашивайте.

потому что хотел попрактиковаться

Стоит ли делать такое на ReactJS, а потом какое же на Angular?

Чтобы попрактиковаться - стоит.

Или же есть альтернатива всему этого?

Альтернатива - взять CMS и не париться.

А {props.firstword} сработает?

this уберите, он там не нужен

.block > img.block-img
.block::after - создаешь большой блок с белим фоном. transform: skewX(25deg);
Как то так

Или мне вес код написать?

Также, только не разделяйте название свойств дефисом или подчеркиванием.

<script type="text/babel">
            var TeamCard = React.createClass({
                render: function () {
                    return  (
                        <article className="open hidden">
                            <img className="article-img" src={this.props.imagePath} alt={this.props.name} />
                                <h1 className="article-title">
                                    <a href="">{this.props.name}</a>
                                </h1>
                        </article>
                    )
                }
            })

            ReactDOM.render(
                <div>
                    <TeamCard imagePath="svg/charlotte-hornets.svg" name="Charlotte Hornets"/>
                    <TeamCard imagePath="svg/charlotte-hornets.svg" name="Charlotte Hornets"/>
                </div>,
                document.getElementById("cards")
            )
        </script>

PS: вместо class пишите className, такая особенность jsx

public void EnterMatrix() {
        Console.Write("Enter the numbers of matrix columns: ");
        COLUMN = int.Parse(Console.ReadLine());
        Console.Write("Enter the numbers of matrix rows: ");
        ROW = int.Parse(Console.ReadLine());

        ARRAY = new int[COLUMN, ROW];
        
        for (int col = 0; col < COLUMN; col++) {
            for (int row = 0; row < ROW; row++) {
                Console.Write("Enter the element of matrix cell[" + (col + 1) + ":" + (row + 1) + "]: ");
                ARRAY [ col , row ] = int.Parse(Console.ReadLine()); // тута ошибка
            }
        }
    }

Вы значение вводите, но нигде не сохраняете.