totes

Totes

React-ähnliche Webkomponenten. Angetrieben von Lit-html.

Unterstützung:

• setState
• machen
• componentDidmount
• Sollte Componentupdate
• GetNapshotbeforeupdate
• Komponente [tat] unmontal
• componentDidUpdate
• GetedivedStateFromProps
• this.Props.Children

Schnellstart (kopieren und einfügen)

 < script type =" module " >
  import { html , Component } from "https://unpkg.com/@aaronshaf/totes@1/index.js" ;

  class HelloWorld extends Component {
    render ( ) {
      return html ` < div > Hello, ${ this . props . name } </ div > ` ;
    }
  }

  customElements . define ( "hello-world" , HelloWorld ) ;
</ script >

< hello-world name =" Aaron " > </ hello-world >

Das war's. Kein Bauschritt.ber?

Beispiel: SetState- und Event -Handler

 export default class BasicExample extends Component {
  static get observedAttributes ( ) {
    return [ "message" ] ;
  }

  constructor ( ) {
    super ( ) ;
    this . state = {
      name : "Aaron" ,
      toggled : false
    } ;
  }

  handleInput ( event ) {
    this . setState ( { name : event . target . value || "Aaron" } ) ;
  }

  handleClick ( ) {
    this . setState ( { toggled : this . state . toggled === false } ) ;
  }

  render ( ) {
    return html ` < div >
      < div >
        < input
          type =" text "
          value =" Aaron "
          @input = ${ this . handleInput }
        / >
      </ div >

      < p > ${ this . props . message } ${ this . state . name } </ p >

      < button @click = ${ this . handleClick } >
        ${ this . state . toggled ? "On" : "Off" }
      </ button >
    </ div > ` ;
  }
}

customElements . define ( "basic-example" , BasicExample ) ; 

 < basic-example message =" Hello " > </ basic-example > 

Installieren Sie von NPM

 yarn add @aaronshaf/totes --prod

Probieren Sie es auf Panne

Totes-Exampe

Unterstützte Browser

• Chrom (ohne Polyfill)
• Firefox
• Safari
• Rand

Benutzerdefinierte Elemente / Schatten -DOM -Polyfill

 < script src =" https://unpkg.com/@webcomponents/[email protected]/webcomponents-loader.js " > </ script > 

Dev

git clone https://github.com/aaronshaf/totes.git

yarn global add serve

serve

Siehe auch

• HTML-Router-Drop-In-Router
• DEM - Download ECMascript -Module