React

React was created by Facebook to solve issues with scaling high performance web applications. It uses a Virtual DOM to reduce the number of browser DOM re-renders to improve performance and simplify data bindings.

React is primarily comprised of React Classes - objects which can render themselves and accept both properties and state. Everything in a React app is a React Class, from the app itself, to the pages, to individual components like an Avatar or Button.

For Example

A simple React component might look like this:

import React from 'react';

export default class Logo extends React.Component {

  propTypes: {
    size: React.PropTypes.string
  }

  getDefaultProps () {
    return {
      size: 'medium',
    };
  }

  render () {
    var logoPath = `/assets/images/logo-${ this.props.size }.png`; 
    return (
      <img src={ logoPath } />
    );
  }
}

This Logo component accepts an optional property size which has a default value of medium and renders an image tag with the appropriate logo png file.

Creating a component for a Logo which embeds a single image tag may seem unnecessary, but it allows us to abstract the details of rendering a logo from the parent element who just would like to render a logo and should not need to know anything more about the logo itself.

The Logo component can then be used both in a header and footer area on a Homepage component.

import React from 'react';
import Logo from './logo.jsx';

export default class Homepage extends React.Component {

  render () {
    <div>
      <header>
        <Logo />
        <a href='/home'>Home</a>
      </header>
      <h1>Welcome</h1>
      <p>My Content</p>
      <footer>
        Copyright 2015 My Company.
        <Logo size='small' />
      </footer>
    </div>
  }

}

From here we'll go into more detail on what exactly React components can do, how to create them, and so on.