tiny jsx

tinyjsx

TinyJSXは、機能コンポーネントを使用してユーザーインターフェイスを開発するための軽量UI JavaScriptライブラリです。

GZIPパッケージサイズ

Brotliパッケージサイズ

---

使用法

TinyJSXは、最近のReactフックの実装を模倣しますが、本当に小さい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プラグマを宣言する代わりに、Babel構成ファイルに追加することでグローバルに使用できます

バベル5および以前の場合：

{ "jsxPragma" : " TinyJSX.createElement " }

Babel 6の場合：変換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トランスパイル関数は、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 ) ;