tiny jsx

Tinyjsx

Tinyjsx - это легкая библиотека JavaScript UI JavaScript для разработки пользовательских интерфейсов с использованием функциональных компонентов.

Размеры пакетов Gzip

Brotli Packages размеры

---

Использование

Tinyjsx выставляет API, который имитирует недавнюю реализацию React Hooks, но действительно невелик.

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:

• Часы
• Тодос
• Маршрутизатор

Начиная

Установить

При использовании Nodejs с yarn или npm

$ 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 преобразует компоненты JSX в виртуальные элементы DOM (как описано здесь) . Чтобы отобразить виртуальные элементы DOM в браузере, TinyJSX обеспечивает функцию render() , которая создает соответствующее дерево DOM и превращает ее в элемент из существующего дерева DOM.

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

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