approximate solution

Надо качать навык гугления:

Разница между export {name}, export default {name}?

Как создать универсальный компонент кнопку, если визуально она более менее похожа на остальные кнопки, но при клике делает разный функционал?
Как это сделать если нельзя ставить обработчик событий на компонент?

Во первых инлайнить стили - моветон, вам это должны были сказать. Хотите сделать разный дизайн кнопок - используйте clsx и передавайте стили через className внутри компонента через пропс

<Button className="button-any">Какой-то текст</Button>

И внутри Button принимает className куда вы пропсом его передаете, внутренности кнопки у вас {children}

Как это сделать если нельзя ставить обработчик событий на компонент?

Кто сказал? По принципам SOLID, у вас компонент не должен знать о сложной логикике, поэтому вы внутри компонента создаете onClickHandler, в которой пропсом спускаете функцию из родительского, которая уже выполняет логику.

Что бы более понятно было как создавать компоненты - вот вполне неплохая статья - https://habr.com/ru/company/yandex/blog/560194/

Emmet прекрасно работает в реакт и jsx.
+ если хотите писать код еще быстрее, попробуйте сверху "намазать" kite https://www.kite.com/

стоит ли тратить свое время на изучение всех 3 частей

Однозначно да.

есть определенная база, которой будет достаточно, чтобы начать заниматься Реактом?

Есть, и она намного больше чем описанная база на learn.js, а именно:

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

Переходить к Реакту стоит - когда вы свободно плаваете в js, отлично манипулируете методами, умеете в ассинхронность и не падаете в обморок от колбэков. Иначе в реакте вам ничего не светит.

https://learnvanillajs.com/roadmap/

Первая же ссылка
https://github.com/OWIII/test-frontend

Имея базовые знания стоит сразу перейти к изучению React либо все же прочитать пару книг и попрактиковаться на чистом JS

Углубленный JS - понятие растяжимое.
Я бы посоветовал бы Вам идти по пути добора знаний через гугление, книги Вам в этом плане не помощники, только практика(теорию вы доберете из блогов, гугла). Читать в начале карьерного пути книгу "Вы не знаете JS" - тоже самое что только научившись водить, пытаться брать уроки в лиге Наскар.

Как делал я - берете условный ToDo Лист, пишите его на чистом JS. В это время у вас будет куча гуглений, ошибок и тд. После того как вы написали тудушку, перепишите её на реакт. У вас в голове начнется понимание процессов, какие реакт решает задачи, насколько убыстряет процесс и тд.

Далее сделайте мини приложение на JS, допустим планировщик заданий, аналог google keep, либо другой продукт который вы видели, и можете украсть визуальную составляющую, или логику функционала. Как сделали - пишите его на реакт. После таких двух пет проектов - одного маленького, и второго большого, я бы преступал к углубленному изучению уже реакта, и скорее бы шёл на собес. Так как вы все равно в соло не научитесь многим фишкам компаний, а в среде других разработчиков рост новичка растет по экспоненте.

Новички считают что React это панацея от всех бед, и пихают его даже туда, где обычного JS было бы достаточно. Вот такая вот проф. деформация.