React Bootstrap

React: A javascript script library for building user interfaces

Open Source and written by Facebook

Component-based

Just the UI

"React is the V in MVC"

Unopinionated.

It's easy to sprinkle in React Components into your technology stack or existing applicaiton.

Virtual DOM

React will map the DOM to a javascript object.

When state changes, it will compute diffs in js, and only update parts of the DOM that require re-render.

What about AngularJS?

Doing things "The Angular Way"

If React is a fast car...

...then Angular is a fast car, with a different engine, that can drive to the grocery store or go off-roading. It also would require seatbelts and helmets, and months of driving school.

React does one thing and it does it well

Angular is a much more robust and opinionated MVC

ES6 Components

Yay for new javascripts!

Start learning the new features that can make it easier and more fun than ever to write js.

Guide for React on ES6+

Import Modules

Easily re-use functionality across files

ES5 Way:

/* Requires Node or CommonJS */
var React = require('react');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var IndexLink = require('react-router').IndexLink;

ES6 Way:

/* ES6 Standard */						
import React from 'react';
import {Router, Route, IndexLink} from 'react-router';
						

Class Definition Syntax

JS Classes with inheritance and clean syntax

ES5 Way:

var Photo = React.createClass({
  handleDoubleTap: function(e) { … },
  render: function() { … },
});							

modules.export.Photo = Photo;
						

ES6 Way:

export default class Photo extends React.Component {
  handleDoubleTap(e) { … }
  render() { … }
}
						

Fat Arrow Functions

no more that = this; *the crowd goes wild*

ES5 Way:

this.update().bind(this,state);
						

update : function(state){
	this…
},
						

ES6 Way:

this.update(state);
						

update = (state) => {
	this…
}