React

"A JavaScript library for building user interfaces."

Made by Facebook and Instagram

Just the UI

Makes no assumptions about the rest of the application.

It's the V in MVC.

Super simple

No overload of features to explore (and get lost in).

Fast to start using.

Virtual DOM

Used for efficient re-rendering of the DOM.

The DOM is only updated when the virtual DOM changes, and only the parts that change are updated.

Components

React is all about building components.

Components are not templates.

JSX

Components unify markup with its view logic.

(Yes, JavaScript and HTML in the same file. Yuck...)

Single responsibility

Components should be encapsulated and reusable.

Makes them easier to maintain.

Properties and state

A component's properties are changed by its parent.

The state is updated by the component itself or by external events.

It's all about state

When the state is updated, the view will re-render itself.

Components can be seen as state machines.

Update, render, repeat

Feels like game programming!

while(true) {
  processInput();
  update();
  render();
}

(From gameprogrammingpatterns.com)

How does it look like?

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

What about state?

var ClickCounter = React.createClass({
  getInitialState: function() {
    return { count: 0 };
  },
  increment: function() {
    this.setState({
      count: this.state.count + 1
    });
  },
  render: function() {
    return <div>
      Clicked {this.state.count} times.
      <button onClick={this.increment}></button>
    </div>;
  }
});

Put them together

var App = React.createClass({
  render: function() {
    return <div>
      <HelloMessage name="Maria Rosa"></HelloMessage>
      <ClickCounter></ClickCounter>
    </div>;
  }
});

Component methods and lifecycle

The object passed to React.createClass() specifies the component's methods, including lifecycle methods.

render()

Must return a single DOM element, that can be another React component or a native DOM element (like a <div>)

The render method is required.

getDefaultProps()

Values in the returned object will be set on this.props if that prop is not specified by the parent component.

Invoked once and cached when the class is created.

getInitialState()

The return value will be used as the initial value of this.state.

Invoked before a component is mounted.

setState(nextState, [callback])

Merges nextState into the current state.

replaceState(nextState, [callback])

Clears the component's state and sets it to nextState.

Lifecycle methods

void componentWillMount()

void componentDidMount()

void componentWillReceiveProps(object nextProps)

boolean shouldComponentUpdate(object nextProps, object nextState)

void componentWillUpdate(object nextProps, object nextState)

void componentDidUpdate(object prevProps, object prevState)

void componentWillUnmount()

Flux

"Application Architecture for Building User Interfaces."

Complements React's composable view components by utilizing a unidirectional data flow.

Structure and Data Flow

A Single Dispatcher

The dispatcher is the central hub that manages all data flow.

Receives actions from views and external sources and sends them to the stores.

Stores

Contain the application state and logic.

Actions result in updates to the state of the store.

After the stores are updated, they broadcast an event declaring that their state has changed.

Views

Views listen for events that are broadcasted by the stores.

When an event is received, the view requests the new state via the stores's public getters.

Redux

"Predictable state container for JavaScript applications."

React Native

"A framework for building native apps using React."

Android example

var App = React.createClass({
  render: function() {
    return <DrawerLayoutAndroid renderNavigationView={this.nav}>
      <ProgressBarAndroid />
    </DrawerLayoutAndroid>;
  },
  nav: function() {
    return <Text>
      React Native
    </Text>;
  }
});

Touch Handling

var TouchDemo = React.createClass({
  render: function() {
    return <ScrollView>
      <TouchableHighlight onPress={this.touched}>
        <Text>Proper Touch Handling</Text>
      </TouchableHighlight>
    </ScrollView>;
  },
  touched: function() {
    console.log('touched!');
  }
});

Styling

Uses CSS-like syntax and supports flexbox natively.

var styles = StyleSheet.create({
  image: {
    width: 40,
    height: 40,
    marginRight: 10
  },
  title: {
    fontSize: 11,
    fontWeight: 'bold'
  },
  text: {
    flex: 1,
    justifyContent: 'center'
  }
});

Asynchronous execution

All operations between the JavaScript application code and the native platform are performed asynchronously.

Polyfills

Provides polyfils for most browser APIs, like XMLHttpRequest.

There are also many packages on npm that polyfil other browser APIs, like WebRTC.

Extensibility

React Native is designed to be easily extended with custom native views and modules.

public class MyCustomModule extends ReactContextBaseJavaModule {
    @ReactMethod
    public void processString(String input, Callback callback) {
        callback.invoke(input.replace("Goodbye", "Hello"));
    }
}

No webviews used

Uses a JavaScript runtime, but the UI is not HTML.

Provides a native-level performance and look and feel.