React 앱에 HTML/CSS/JS 테마를 적용하는 올바른 방법

Question

필자가 themeforest.net에서 구입 한 템플릿을 React 웹 앱에 적용하려고 시도했습니다. 템플릿의 HTML/CSS 부분을 React 구성 요소로 변환하는 것은 비교적 쉽지만, jQuery 부분을 작동시키는 것이 어렵다는 것을 알았다.

템플릿은 mmenu, magnific-popup과 같이 여러 jQuery 플러그인을 사용합니다. index.html 샘플에는 body 태그 끝에 custom.js가 포함되어 있습니다. 이 custom.js (코드 1000 줄 이상)를 훑어 보면 기본적으로 jQuery 선택기를 사용하여 특정 DOM 노드를 선택한 다음 jQuery 플러그인 함수 나 추가 CSS 클래스를 선택한 노드에 적용하는 것으로 나타났습니다. 나에게이 custom.js는 부엌 싱크대이다.

정적 데모 HTML 페이지에서 잘 작동합니다. custom.js가 HTML 페이지의 끝 부분으로로드되기 때문에 모든 노드가 그 순간에 표시되고 선택자가 선택할 수 있습니다.

그러나 단일 페이지 응용 프로그램 인 React apps는 페이지를 새로 고침하지 않고 DOM 요소를 동적으로 업데이트합니다. 여러 곳에서 jQuery 플러그인이 라우트가 변경된 후 DOM 노드에 대한 제어를 잃거나 소품이 업데이트되었음을 ​​발견했습니다.

내가 생각할 수있는 우아하지만 느린 접근 방식은 jQuery 플러그인을 기능적으로 동일한 React 구성 요소로 대체하는 것이다.

다른 해결책은 루트 변경이나 구성 요소 내용 업데이트가있을 때마다 kitchen sink custom.js를 다시 실행하는 가설적인 힘입니다. 그러나 내 직감은 내가 거기 가고 싶지 않다는 것을 말해 준다.

이전에이 작업을 해본 사람이라면 누구나 쉽게 알 수 있습니다. 현재로서는 semantic-ui-react을 사용하여 내 앱의 스타일을 지정합니다.

내가 신청하려고했던 테마는 themeforest에 Listeo입니다.

추신 : 나는 https://reactjs.org/docs/integrating-with-other-libraries.html을 읽었지만 빠른 해결책을 찾지 못했습니다.

Answer 1

HTML 테마를 반응시키기에 까다로운 부분입니다. DOM을 조작하기 위해 jquery를 사용한다면 반응의 핵심 원리를 무시하게됩니다. 나는 몇 번 같은 상황을 겪어왔다. 내가 언급 한 custom.js 메서드를 시도했습니다. 내 경험에 비추어 볼 때 많은 어려움을 겪고 결국 도서관의 절반을 쓰게 될만한 가치가 없습니다. 그리고 프로덕션에서 시작하게하지 마라. 처음부터 모든것을 다시 쓰고 싶을 것이다.

동일한 반응 성분을 사용하시기 바랍니다. 나중에 프로젝트를 유지하는 것이 훨씬 쉬울 것입니다.