remount

새말

어디서나 React 구성요소를 사용하세요.
웹 구성요소(사용자 정의 요소)로서의 HTML.

데모 ⚡ 문서
2kb gzip'd · 종속성 없음 · IE 지원

설치

다시 마운트는 npm 패키지 저장소를 통해 가능합니다. 리액트 18이 필요합니다.

 # npm
npm install remount react react-dom
# yarn
yarn add remount react react-dom

• 원사를 통해: yarn add remount
• 또는 npm: npm install remount

용법

React 구성 요소부터 시작해 보겠습니다. 다음은 하나입니다.

 const Greeter = ( { name } ) => {
  return < div > Hello, { name } ! < / div >
}

사용자 정의 요소를 정의하려면 정의()를 사용하세요. <x-greeter> 요소를 정의해 보겠습니다.

 import { define } from 'remount'

define ( { 'x-greeter' : Greeter } )

이제 HTML의 어느 곳에서나 사용할 수 있습니다! ?

 < x-greeter props-json =' {"name":"John"} ' > </ x-greeter >

⚡ API 문서 →

사용 사례

프로젝트에 다시 마운트를 고려해야 하는 이유에 대한 몇 가지 아이디어:

	SPA가 아닌 앱에 React 추가하기 "일반" HTML 사이트의 모든 페이지에서 React 구성 요소를 사용할 수 있습니다. Rails 또는 Phoenix를 기반으로 구축된 앱에 React를 추가하는 데 적합합니다.
	? 다른 프레임워크와의 상호 운용성 Remount를 사용하면 다른 HTML 요소와 마찬가지로 React 구성 요소를 사용할 수 있습니다. 이는 Vue, Angular 또는 기타 DOM 라이브러리/프레임워크와 함께 React를 사용할 수 있음을 의미합니다.

더 많은 기능

• JSON 소품(예: <x-greeter props-json="{...}"> )(문서)
• 명명된 속성(예: <x-greeter name="John"> )(문서)
• Custom Elements API 사용(사용 가능한 경우)
• 다른 브라우저와 호환되는 API로 대체
• Shadow DOM 모드(사용 가능한 경우)

브라우저 지원

Remount는 React 18이 지원하는 모든 브라우저를 지원합니다.

Custom Elements API ^# ("웹 구성 요소")는 사용 가능한 경우(Chrome/67+) 사용되며 그렇지 않은 경우 호환되는 API로 대체됩니다.

⚡ 브라우저 지원 문서 →

선적 서류 비치

• API 문서
• 빌드 — ES2015+ 및 ES 모듈 빌드도 제공됩니다.
• FAQ 및 문제 해결 — 문제가 발견되면 여기에서 시작하세요.
• 대안과의 비교
• 브라우저 지원

감사해요

다시 마운트 © 2022, Rico Sta. 크루즈. MIT 라이센스에 따라 출시되었습니다.
Rico Sta가 작성하고 유지 관리합니다. 기여자의 도움을 받은 Cruz(목록)

ricostacruz.com · GitHub @rstacruz · 트위터 @rstacruz