Лучший способ добавить CSS в JSX реагировать сценарий?

Question

Я хочу добавить скрипт (компонент реагирования) для сайта, который создан не на основе ReactJS, а с использованием html и dom. Я хочу сделать это с реакцией, поскольку компонент будет работать с некоторой логикой, а также будет иметь какое-то состояние. Я никогда не создавал функцию реагирования для веб-сайта, который не работает с полностью реагировать. Как вы думаете, добавление функции реагирования в существующее приложение - это вообще хорошая идея? И если это так, какой лучший способ добавить какой-либо стиль к этой функции сценария?

https://reactjs.org/docs/add-react-to-a-website.html В нем рассказывается, как решить эту проблему с помощью babel, но как насчет стилей и CSS?

Answer 1

Что касается хорошей идеи, мы получаем ее в соответствии с официальными документами React:

React был разработан с самого начала для постепенного принятия, и вы можете использовать столько React, сколько вам нужно. Возможно, вы просто хотите добавить некоторые «брызги интерактивности» на существующую страницу. Реактивные компоненты - отличный способ сделать это.

Вот их подход к добавлению ограниченной функциональности React к не-React-страницам без каких-либо инструментов для сборки, просто чистый HTML DOM.

Что касается личного мнения, которое выходит за рамки темы, я только сделал полные страницы в React, прикрепленные к сторонним веб-сайтам. Хотя те, которые работали хорошо, Мосе Рагуццини может быть прав в том, что это слишком много хлопот / накладных расходов, если он может быть обработан с ванильным JS.

Answer 2

Вы можете импортировать стили несколькими способами:

• обычный CSS, встроенный в HTML, как обычно, и className на теге реакции
• импорт CSS с правильным плагином веб-пакета
• стилевые компоненты
• встроенные стили
• CSS-модули

Обратите внимание, что если вывы не переходите на API или вам не нужны функции реагирования, поэтому рефакторинг из vanilla javascript для реакции может оказаться бесполезной болью.