How to reactjs

Will Klein

What is React

A JavaScript library for building user interfaces 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


props & state

lifecycle methods, i.e. render, shouldComponentUpdate

no callback spaghetti when done right




inversion of traditional templates


optional, but ultimately preferrable

  <SomeComponent text="Some value here!" />

  <p>This is regular HTML.</p>

    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 */
    formattedDate: this._getformmattedDate()

  /* read state */
  var formattedDate = this.state.formattedDate;

Live Code!




How to ReactJS

By Will Klein

How to ReactJS

HTML5 Denver, Feb 16, 2015 & HartfordJS, Mar 5, 2015

  • 4,868