Iliya V. Soldatkin

Ключ должен быть естественным, например Id сущности (в вашем случае комментария) из БД. Если его нет, то не мучайтесь и используйте порядковый номер элемента, как у вас и написано.
Удалять элемент (removeCommentItem) можно и по индексу.

Во-первых, использовать порядковый номер в массиве в качестве key, особенно тогда, когда вы собираетесь этот массив изменять - плохая идея. Ключ должен быть жёстко привязан к конкретному элементу, индексы в массиве этого не обеспечивают.

Во-вторых, компонент CommentItem, вызывающий в какой-то момент переданную в него функцию removeItem(), должен в неё передавать тот самый идентификатор, по которому вы будете удалять элемент.

Примерный код:

{comments.map((comment) => (
  <CommentItem
    key={comment.id}
    id={comment.id}
    userName={comment.userName}
    commentText={comment.commentText}
    currentDate={comment.currentDate}
    currentTime={comment.currentTime}
    removeItem={removeCommentItem}
  />
)}

CommentItem = (id, removeItem) => {
   return (
    <button onClick={() => removeItem(id)}>Удалить</button>
  )
};

CSS и JS:
К примеру, у вас имеется большое количество (Х штук) css или js файлов, которое вы подключаете на своих страницах посредством тэгов <link> и <src>.
При загрузке страницы, браузер клиента будет отправлять X запросов к вашему серверу, а ваш сервер должен будет ответить на X запросов.
Это:

1. Тормозит загрузку страницы - будете ждать ответа от сервера
   
2. Загружает ваш сервер
   

С помощью сборщиков фронтэнда вы можете "склеить" все файлы в один - main.css и main.js, которые будут отдаваться 2 запросами с сервера. Также, вы сможете минифицировать CSS и JS. Под минификацией подразумевается уменьшение размеров файла на диске. Естественно, более легкий файлы будет быстрее прогружаться + минимальное количество запросов к серверу.

IMG:
К примеру, у вас имеется Х изображений размером 700 Кбайт. Клиенту надо будет загрузить 700 * X Кбайт. Если вы пропустите свои изображения через Gulp, то вы получите изображения с меньшим размером на диске и такого же качества, т.е. клиенту придется прогрузить примерно (500-600) * X Кбайт.

Делаем метод:

onMouseDown(e) {
  e.preventDefault();
}

И добавляем его кнопке удаления значения в качестве обработчика соответствующего события:

onMouseDown={this.onMouseDown}

1. Берем шииииииирокую железную линейку и фигачим себе по пальцам, до тех пор пока не научимся разбивать большой код на части еще на этапе написания.
2. Открываем "Мартин Фаулер. Рефакторинг. Улучшение существующего кода". Читаем от корки до корки.
3. Закрываем книгу.
4. Рефакторим код.
5. Читаем предыдущий ответ (про webpack, browserify+commonjs, requirejs) очень очень внимательно

в цикле for принято использовать "встроенную" переменную для итерации, но с тем же успехом можно пользовать и объявленную вне

читай

<ul>
  <li class="js-cardPrice">Hello world</li>
  <li class="js-cardPrice">Hello universe</li>
  <li class="js-cardPrice">Hello Iliya</li>
</ul>

$(".js-cardPrice").on("click", function() {
    var a = $(this).text(); // например, получим текст текущего элемента
    console.log(a);
    alert(a);
});