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

Thanks!

@willslab

http://willkle.in

How to ReactJS

By Will Klein

How to ReactJS

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

  • 5,004