Why ReactJS

Front End Engineer

Twitter @tomrutka

 

Tom Rutka

Introduction

  • Currently at Credit Karma
  • Javascript, CSS, NodeJS, PHP
  • 10 years working on the web
  • Consulting work and Startup life
  • Department of State, DOD
  • USPS HQ

To React

or

Not To React

Interfaces for large applications

 

Benefits

Interfaces for large applications

Changing data overtime with state

 

Benefits

Interfaces for large applications

Changing data overtime with state

Composition of components with logic

 

Benefits

Interfaces for large applications

Changing data overtime with state

Composition of components with logic

One-way data flow

Benefits

Interfaces for large applications

Changing data overtime with state

Composition of components with logic

One-way data flow

Declarative Programming

Benefits

ReactJS Concepts 

&

Details

Syntax

Made of Components

Create:
var MyThing = React.createClass({ 
  render: function() { 
    return (<div>{this.props.mydata}</div>) 
  }
})

Usage:
<MyThing mydata={value} />

Syntax

Made of Components

<MyThing mydata={value} />

 

Values in expressions cannot be html

but can have html entities

Syntax

No raw html in data, Entities are okay

var value = '<div>React and Node</div>'; // NO
var value = 'React & amp Node'; // YES

<MyThing mydata={value} />

Syntax

Outputs

var value = '<div>React and Node</div>'; // NO
var value = 'React '&'amp Node'; // YES

<MyThing mydata={value} />

Renders:
<div>React & Node</div>

Careful!

dangerouslySetInnerHTML

<div dangerouslySetInnerHTML={{__html: '<div>React & amp; Node'</div>}} />

Composition

Create:
var Item = React.createClass({
  render: function() {
    return (<a href={this.props.link}>{this.props.linkName}</a>)
  };
});

var Menu = React.createClass({ 
  // assign data
  render: function() { 
    return (
      <nav>{this.props.mydata}
        <Item link={linkValue} linkName={linkName} />
      </nav>)
  } 
})

/* Item.jsx */
var Item = React.createClass({
  render: function() {
    return (<a href={this.props.link}>{this.props.link}</a>)
  };
});

/* Menu.jsx */
require('./Item.jsx');

var Menu = React.createClass({ 
  const {myTitle, link} = mydata; // es6 destructuring
  render: function() { 
    return (
      <nav>{myTitle}
        <Item link={linkValue} />
      </nav>)
  } 
})
/* Menu.jsx */
require('./Item.jsx');

var Menu = React.createClass({ 
  const {myTitle, link} = mydata; // es6 destructuring
  render: function() { 
    return (
      <nav>{myTitle}
        <Item link={linkValue} />
      </nav>)
  } 
})

Usage:
ReactDOM.render(
  <Menu mydata={myTitle: 'My App', link: 'https..."}/>,
  document.getElementBydId('example') 
);

ES5 or ES6

Declarative or Imperative

ES5 or ES6

Imperative tells how to do something

for (var i = 0; i < 100; i++;) {
  // loop over collection
}

ES5 or ES6

Declarative tells what to be done

var newCollection = collection.map( function(x) {
  return x+x;
})

ES5 or ES6

Auto-binding 'this' context

To specify the value for this

ES5 or ES6

ES6 Arrow Function

// ES5
foo.map( function(x) {
  return x+x;
});

// ES6
foo.map( (x) => {x*x} ); // has auto-binding

ES5 or ES6

/* JS Bind method */
this.setState({ loading: true });

fetch('/').then(function loaded() {
  this.setState({ loading: false });
}.bind(this));

ES5 or ES6


/* React Component Method Binding */
React.createClass({
  componentWillMount: function() {
    this.setState({ loading: true });

    fetch('/').then(this.loaded);
  },
  loaded: function loaded() {
    this.setState({ loading: false });
  }
});
  

JSX Transpiling

Transpiling !== Compiling

Pre-processing

Transpiling is source-to-source compiling

JSX Transpiling

Parsed by Acorn

https://github.com/ternjs/acorn

 

Abstract Syntax Tree (AST)

https://github.com/facebook/jsx

Syntax Tree

JSX Transpiling

Performance

http://esprima.org/test/compare.html

Immutability

Preferred coding and optimization

Immutability

/* Anti-pattern */
var myObj = {};
myObj.someProp = 9;
myObj.otherProp.push(2)

/ * Better */
var myObj = { someProp: 9 }
var newObj = extend(myObj, { otherProp: 2}

Immutability

Browser API has Object.freeze()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze

Immutability

Shortcut with react-addons-update or an existing library

var update = require('react-addons-update');

var newData = update(myData, {
  x: {y: {z: {$set: 7}}},
  a: {b: {$push: [9]}}
});

ReactJS Pre-requisites

Javascript (ES5)

Javascript (ES6) - BabelJS

Declarative (Functional Programming)

Immutability Concepts

 

Structure

Component

PropTypes

Prop

State

Common Usage

Structure

Component

PropTypes - type checking

Prop - for data flow

State - for UI changes

Common Usage

Structure

Component

PropTypes - type checking

Prop - for data flow

State - for UI changes

Common Usage

Lifecycle

getInitialState()

getDefaultProps()

componentWillMount()

componentDidMount()

render()

Structure

Component

PropTypes - type checking

Prop - for data flow

State - for UI changes

Common Usage

Lifecycle

getInitialState() 

getDefaultProps()

componentWillMount() - before render

componentDidMount() - after render

render() - required

Happy Learning!

Tom Rutka

Front End Engineer

Twitter @tomrutka

Why ReactJS

By Tom

Why ReactJS

  • 658