Beginner's Guide to React.js

 

 

 


Christopher Bloom

Presentation: https://slides.com/illepic/pdxsass-intro-to-react-js

Demo: http://plnkr.co/gkHDuT

Demo (stream): http://plnkr.co/edit/?p=streamer&s=aNjEh1kRgwKGvYu6

/** @jsx React.DOM */
React.renderComponent(
  <h1>React is awesome!</h1>,
  document.getElementById('bloomPres')
);

TL,DR

React let's us build interfaces in ways we're already thinking about.

React is about "composing" apps

  • Build reusable UI widgets
  • Just the "V" in MVVC
  • Can be used with other frameworks (ie Angular, jQuery)
  • Components!
  • Crazy fast and efficient (Virtual DOM?!)
  • Can be part of a more encompassing framework: Flux (Hi, Tirdad!)

Components

Small, specific pieces are composed together to form more complex systems.

 

ie Pattern Lab

Approach

Old: "The page is a document, jQuery-snipe the DOM."

New: Apps are made up of smaller, functional pieces

 

http://facebook.github.io/react/docs/thinking-in-react.html

Virtual DOM: JSX

If Javascript and XML had a baby but it didn't turn out as evil as that sounds."

 

If a complex UI widget changes something about itself (ie a dropdown opening, quantities of products updating) instead of re-rendering the entire DOM for that markup (like jQuery and Angular do), React runs a "diffing algorithm" on only what needs updating and changes only that. Requires type="text/jsx" on script tag.

<script type="text/jsx" src="script.js"></script>

Components

var WidgetOne = React.createClass({
    render: function(){
        return (
            <h1>Hello, world!</h1>
        );
    }
});

Now to stick it on a page:

React.renderComponent(
    <WidgetOne/>,
    document.getElementById('widgetOne')
);

Props

var WidgetTwo = React.createClass({
  render: function(){
    return (
      <h1>Hello, {this.props.name}!</h1>
    );
  }
});

React.renderComponent(
  <WidgetTwo name="PDXSass" />,
  document.getElementById('widgetTwo')
);

In an HTML-y sort of way, pass dynamic data to components.

State

var WidgetState = React.createClass({
    getInitialState: function(){
        return {
            count: 5
        }
    },
    render: function(){
        return (
            <h1>{this.state.count}</h1>
        )
    }
});

React.renderComponent(
  <WidgetState name="PDXSass" />,
  document.getElementById('widgetState')
);

State is a biggie. Using setState() we trigger data changes and re-rendering of our Component.

Events

var WidgetEvents = React.createClass({
  incrementCount: function(){
    this.setState({
      count: this.state.count + 1
    });
  },
  getInitialState: function(){
    return {
      count: 0
    }
  },
  render: function(){
    return (
      <div class="event-demo">
        <h3>Count: {this.state.count}</h3>
        <button type="button" onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
});

React.renderComponent(
  <WidgetEvents/>,
  document.getElementById('widgetEvents')
);

Define a function on your component. Bind it with an onClick prop.

"Unidirectional Data Flow"?

Simple: Data flows from the SINGLE PARENT down to its child elements using "state". The various "props" on the child elements pick up this state.

..
  render: function(){
    return (
      <div className="bigParent">
        <input type="text" placeholder="Search" onChange={this.changeStuff}/>
        <PeopleList people={this.state.people}/>
      </div>
    );
  }
...

var PeopleList= React.createClass({
  render: function() {
    return (
      <ul className="people">
      {
        this.props.people.map(function(person) {
          return <li className="person" key={person}>{person}</li>
        })
       }
      </ul>
    )
  }
});

Flux?

The React.js ARCHITECTURE

 

https://scotch.io/tutorials/getting-to-know-flux-the-react-js-architecture

React Dev Tools

View at: http://run.plnkr.co/plunks/gkHDuT/

Chrome plugin that shows data, props, state, components, and all sorts of other React goodies.

Common patterns

Show cart, carousels, product switcher, big ass grid filters

Helpful Resources

A Big Deal™ : React Native

http://jlongster.com/First-Impressions-using-React-Native

Made with Slides.com