tiny jsx

tinyjsx

TinyJSX는 기능 구성 요소를 사용하여 사용자 인터페이스를 개발하기위한 가벼운 UI JavaScript 라이브러리입니다.

GZIP 패키지 크기

브로 틀리 패키지 크기

---

용법

TinyJSX는 최근 React Hooks 구현을 모방하는 API를 노출하지만 실제로 작습니다.

tinyjsx는 기능 구성 요소 만 지원합니다.

 import TinyJSX from 'tiny-jsx' ;
import { render } from 'tiny-jsx/dom' ;
import useEffect from 'tiny-jsx/hooks/useEffect' ;
import useState from 'tiny-jsx/hooks/useState' ;

function Clock ( ) {
  const [ tick , setTick ] = useState ( 0 ) ;
  useEffect ( ( ) => {
    const interval = setInterval ( ( ) => {
      setTick ( tick + 1 ) ;
    } , 1000 ) ;
    return ( ) => clearInterval ( interval ) ;
  } , [ tick ] ) ;

  return (
    < div > Seconds: { tick } </ div >
  ) ;
}

render ( < Clock /> , document . body ) ;

더 작은 번들 크기의 경우 모든 후크가 자체적으로 내보내집니다. 위의 예에서 다음과 같은 후크를 가져올 수 있습니다.

 import { useState , useEffect } from 'tiny-jsx/hooks' ; 

예

몇 가지 간단한 예제는 예제 디렉토리에서 찾을 수 있습니다. UMD 빌드를 사용하여 라이브러리가 작동하는 것을 볼 수 있습니다.

• 시계
• 토 도스
• 라우터

시작하기

설치하다

yarn 또는 npm 과 함께 nodejs를 사용할 때

$ yarn add tiny-jsx
or
$ npm install --save tiny-jsx

또는 브라우저에서

 < script defer type =" text/javascript " src =" https://unpkg.com/tiny-jsx@latest/tiny-jsx.min.js " > </ script >
< script defer type =" text/javascript " src =" https://unpkg.com/tiny-jsx@latest/tiny-jsx-hooks.min.js " > </ script >
< script defer type =" text/javascript " src =" https://unpkg.com/tiny-jsx@latest/tiny-jsx-dom.min.js " > </ script >
< script defer type =" text/javascript " src =" https://unpkg.com/tiny-jsx@latest/tiny-jsx-router.min.js " > </ script >

수입

tiny-jsx 라이브러리를 사용하면 명명 및 기본 내보내기를 사용할 수 있습니다.

명명 된 수입 :

 import { createElement } from 'tiny-jsx' ;

// Tell Babel to transform JSX into createElement() calls:
/** @jsx createElement */ 

기본 가져 오기 :

 import TinyJSX from 'tiny-jsx' ;

// Tell Babel to transform JSX into TinyJSX.createElement() calls:
/** @jsx TinyJSX.createElement */

@jsx Pragma를 선언하는 대신 Babel 구성 파일에 추가하여 전 세계적으로 사용할 수 있습니다.

바벨 5 및 사전의 경우 :

{ "jsxPragma" : " TinyJSX.createElement " }

Babel 6의 경우 : Transform-React-JSX 플러그인을 설치하고 구성 파일에 추가하십시오.

{
  "plugins" : [
     [ " transform-react-jsx " , { "pragma" : " TinyJSX.createElement " }]
  ]
}

Babel 7 : @babel/plugin-transform-react-jsx 플러그인을 설치하고 구성 파일에 추가하십시오.

{
  "plugins" : [
    [ " @babel/plugin-transform-react-jsx " , { "pragma" : " TinyJSX.createElement " , "pragmaFrag" : " TinyJSX.Fragment " }]
  ]
}

typescript의 경우 tsconfig.json 에 추가하십시오.

{
  "jsx" : " react " ,
  "jsxFactory" : " TinyJSX.createElement "
}

표현

tinyjsx transpile 함수는 JSX 구성 요소를 가상 DOM 요소로 변환합니다 (여기에서 설명) . 브라우저에서 가상 DOM 요소를 렌더링하기 위해 TinyJSX는 해당 DOM 트리를 생성하고 기존 DOM 트리의 요소로 렌더링하는 render() 함수를 제공합니다.

 import TinyJSX from 'tiny-jsx' ;
import { render } from 'tiny-jsx/dom' ; 

render ( < div > Hello World! </ div > , document . body ) ;