tiny jsx

Tinyjsx

TinyJSX est une bibliothèque JavaScript UI légère pour développer des interfaces utilisateur à l'aide de composants fonctionnels.

Tailles de packages gzip

Tailles de packages brotli

---

Usage

TinyJSX expose une API qui imite la récente implémentation React Hooks mais est vraiment petite.

Tinyjsx prend en charge uniquement les composants fonctionnels.

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

Pour les petites tailles de faisceaux, tous les crochets sont exportés par eux-mêmes. Vous pouvez toujours importer les crochets à partir de l'exemple ci-dessus comme celui-ci:

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

Exemples

Quelques exemples simples peuvent être trouvés dans le répertoire des exemples. Vous pouvez également voir la bibliothèque en action en utilisant les builds UMD ici:

• Horloge
• Todos
• Routeur

Commencer

Installer

Lorsque vous utilisez des nodejs avec yarn ou npm

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

ou dans le navigateur

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

Importer

La bibliothèque tiny-jsx permet d'utiliser des exportations nommées et par défaut.

Importations nommées:

 import { createElement } from 'tiny-jsx' ;

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

Importations par défaut:

 import TinyJSX from 'tiny-jsx' ;

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

Au lieu de déclarer le @jsx pragma, vous pouvez l'utiliser à l'échelle mondiale en l'ajoutant à votre fichier de configuration Babel

Pour Babel 5 et Prior:

{ "jsxPragma" : " TinyJSX.createElement " }

Pour Babel 6: Installez le plugin Transform-React-JSX et ajoutez-le au fichier de configuration:

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

Pour Babel 7: installez le plugin @ babel / plugin-transform-react-jsx et ajoutez-le au fichier de configuration:

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

Pour TypeScript Ajouter à tsconfig.json :

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

Rendu

La fonction Tinyjsx Transpile convertit les composants JSX en éléments DOM virtuels (comme décrit ici) . Afin de rendre les éléments DOM virtuels dans un navigateur, TinyJSX fournit une fonction render() qui crée l'arbre Dom correspondant et le rend dans un élément de l'arbre Dom existant.

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

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