tiny jsx

tinyjsx

TinyJSX เป็นไลบรารี UI JavaScript ที่มีน้ำหนักเบาสำหรับการพัฒนาส่วนต่อประสานผู้ใช้โดยใช้ส่วนประกอบที่ใช้งานได้

ขนาดแพ็คเกจ GZIP

ขนาดแพ็คเกจ Brotli

---

การใช้งาน

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 Builds ที่นี่:

• นาฬิกา
• โทดอส
• เราเตอร์

เริ่มต้น

ติดตั้ง

เมื่อใช้ 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 คุณสามารถใช้งานได้ทั่วโลกโดยเพิ่มลงในไฟล์ config babel ของคุณ

สำหรับ 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 ให้ฟังก์ชั่น render() ที่สร้างทรี DOM ที่สอดคล้องกันและแสดงผลเป็นองค์ประกอบจากต้นไม้ DOM ที่มีอยู่

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

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