Will Klein
A JavaScript library for building user interfaces
...you program these modular components
and they encapsulate everything
your component needs to worry about...
...then, at the end of a component event loop,
what comes out of it is this set of mutations
that need to be applied to the DOM or
some backing tree structure.
- Jordan Walke, JavaScript Jabber 146
JSX
props & state
lifecycle methods, i.e. render, shouldComponentUpdate
no callback spaghetti when done right
XML-like
inversion of traditional templates
optional, but ultimately preferrable
<SomeComponent text="Some value here!" />
<p>This is regular HTML.</p>
<AnotherComponent
size={ size /* JS expression here */ } />similar to attributes on an HTML element
provide an API to configure the component
read-only to the component
/* some JSX in the parent component */
<SomeComponent text="Some value here!" />
/* some code in the component */
var text = this.props.text;internal state
can setState() within the component
typically affects render output
/* set state */
this.setState({
formattedDate: this._getformmattedDate()
});
/* read state */
var formattedDate = this.state.formattedDate;@willslab
http://willkle.in