How to reactjs

Will Klein

What is React

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

Core Concepts

JSX

props & state

lifecycle methods, i.e. render, shouldComponentUpdate

no callback spaghetti when done right

JSX

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 */ } />

Props

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;

State

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;

Live Code!

Picks

Docs:

http://facebook.github.io/react/docs/getting-started.html

Podcast:

http://devchat.tv/js-jabber/073-jsj-react-with-pete-hunt-and-jordan-walke

Thanks!

@willslab

http://willkle.in