tiny jsx

Tinyjsx

TinyJSX ist eine leichte UI -JavaScript -Bibliothek für die Entwicklung von Benutzeroberflächen mithilfe funktionaler Komponenten.

Gzip -Pakete Größen

Brotli -Pakete Größen

---

Verwendung

TinyJSX enthält eine API, die die jüngste React Hooks -Implementierung nachahmt, aber wirklich klein ist.

TinyJSX unterstützt nur funktionale Komponenten.

 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 ) ;

Für kleinere Bündelgrößen werden alle Haken alleine exportiert. Sie können die Haken aus dem obigen Beispiel wie folgt noch importieren:

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

Beispiele

Einige einfache Beispiele finden Sie im Beispielverzeichnis. Sie können die Bibliothek auch mit den UMD -Builds hier in Aktion sehen:

• Uhr
• Todos
• Router

Erste Schritte

Installieren

Bei Verwendung von NodeJs mit yarn oder npm

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

oder im Browser

 < 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 >

Import

Die tiny-jsx Bibliothek ermöglicht die Verwendung genannter und Standardexporte.

Benannte Importe:

 import { createElement } from 'tiny-jsx' ;

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

Standardimporte:

 import TinyJSX from 'tiny-jsx' ;

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

Anstatt das @jsx Pragma zu deklarieren, können Sie sie global verwenden, indem Sie sie Ihrer Babel -Konfigurationsdatei hinzufügen

Für Babel 5 und Prior:

{ "jsxPragma" : " TinyJSX.createElement " }

Für Babel 6: Installieren Sie das Transformation-React-JSX-Plugin und fügen Sie es der Konfigurationsdatei hinzu:

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

Für Babel 7: Installieren Sie das Plugin @babel/plugin-transform-react-jsx und fügen Sie es der Konfigurationsdatei hinzu:

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

Für Typscript zu tsconfig.json hinzufügen:

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

Rendering

Die TinyJSX -Transpile -Funktion wandelt JSX -Komponenten in virtuelle DOM -Elemente um (wie hier beschrieben) . Um die virtuellen DOM -Elemente in einem Browser zu rendern, bietet TinyJSX eine render() -Funktion, die den entsprechenden DOM -Baum erstellt und sie aus dem vorhandenen DOM -Baum in ein Element verwandelt.

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

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