Михаил Р.

CORS заголовки должны быть установлены на сервере, который отвечает на Ваш запрос (в данном случае, Google API), а не на Вашем клиенте. Это механизм безопасности браузеров, и заголовки CORS должны быть установлены на стороне сервера. Если сервер настроен так, чтобы не принимать запросы с Вашего домена или IP-адреса, то на клиенте (в Вашем React-приложении) эту проблему не решить.

Можно поднять свой локальный сервер, например на express.js и использовать его как прокси:

import express from 'express';
import cors from 'cors';
import axios from 'axios';

const app = express();

app.use(cors());

app.get('/getBooks', async (req, res) => {
  try {
    const result = await axios.get('https://www.googleapis.com/books/v1/users/1112223334445556677/bookshelves&key=myKeyApi');
    res.json(result.data);
  } catch (error) {
    console.error(error);
    res.status(500).send(error);
  }
});

app.listen(4000, () => {
  console.log('Proxy server running on http://localhost:4000');
});

Либо попробовать заюзать прокси на клиенте, указав его в package.json:
{"proxy": "https://www.googleapis.com"}

Failed to execute 'atob' on 'Window': The string to be decoded contains characters outside of the Latin1 range

В строке имеются символы, которые не поддерживаются в функции atob. Можно предварительно проверять строку на символы, либо можно попробовать так:

const d = (name, blob) => {
    const url = URL.createObjectURL(blob);
    // code
}

или все же стоит использовать
/audioList/audioList.tsx

Если не компонент:
audioList/audioList.tsx
Если компонент:
AudioList/AudioList.tsx

Какие вообще есть плюсы и минусы при использовании того или иного способа.

Когда все разработчики придерживаются единых стандартов именования, код становится более читаемым. Это упрощает процесс ревью кода и позволяет новым членам команды быстрее разобраться в проекте.

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

Мое мнение - если есть определенный стандарт, а у Вас нет острой необходимости его нарушать, то лучше его придерживаться.

1. Алиасы до папок.
2. Адрес до изображений (или чего угодно) на основе алиасов.

https://habr.com/ru/articles/738132/

Обработчики событий в React должны быть написаны с большой буквы.

Заменить:
<button onclick={this.handleclick} >
На:
<button onClick={this.handleclick} >

UPD: может все таки композиция, вместо классов?

От использования React Helmet без генератора статики Вы не получили особо прироста эффективности ранжирования Вашего сайта (хоть поисковики и сообщают, что они уже эффективно индексируют js-динамический контент). Т.к. Вы используете React, то оптимальным выбором будет сразу использовать NextJS.

Сразу пишите в jsx

Да.

Как подключаете less/sass?

Как css/sass modules.

Структура:
- Страница < компонент
- Страница < компонент < компонент

До "Страницы" желательно некий Middleware с управлением состояния и запросами на сервер.

app.use(
  session({
    secret: SESSION_SECRET,
    resave: false,
    saveUninitialized: true,
    cookie: {
      secure: false,
      maxAge: 360000,
      sameSite: 'strict',
      domain: 'localhost', // добавил домен
    },
  }),
);

Мой вопрос состоит в том, действительно он так хорош и не устарел ли он?

hh.ru посмотрите.

Знакомый посоветовал мне учить React.js по видео с YouTube канала IT-KAMASUTRA

вы мне посоветуете?

Для начала, лучше выбирать знакомых, а затем, не учиться по видео.