React

A Javascript library

for building user interfaces

Virtual DOM

Thinking in React

logoComponent

searchComponent

actionsComponent

ownerInternetComponent

*Nice lecture:  

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

DEMO

DEMO + THINKING IN REACT

PROPS

*There are two types of "model" data: Pete Hunt

- Immutable

- They are passed from the parent

- To pass event handlers

- Better performance

STATE

- Mutable

- Change and render again

- Dangerous

- Worse performance

- Great Grandfather

PROPS VS STATE

Image: http://stackoverflow.com/questions/23481061/reactjs-state-vs-prop@mrvol

Component Lifecycle

Mounting

Updating

Unmounting

componentWillMountcomponentDidMount

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

componentWillUnmount

Vanilla React Component

"use strict";

var showName = React.createClass({
  
  getInitialState: function getInitialState() {
    return { lastname: '' };
  },
  
  handler: function () {
    this.setState({ lastname: 'Jaimes' });
  },

  render: function render() {
    return React.createElement(
      'div',
      {className: 'Show'},
      'Hello ',
      this.props.name
    );
  }
});

ReactDOM.render(
    React.createElement(showName, { name: 'David' }), 
    document.getElementById('container')
);

React Component JSX

var ShowName = React.createClass({
  
  getInitialState: function() {
    return { lastname: '' };
  },

  handler: function() {
    this.setState({ lastname: 'Jaimes' });
  },

  render: function() {
    return (
      <div onClick={this.handler}>Hello { this.props.name }</div>
    );
  }
});

ReactDOM.render(<ShowName name="David" />, document.getElementById('container'));

*Necessary: Babel -  transpiler CLI and React preset.

 Or starter Pack -  https://facebook.github.io/react/docs/getting-started.html

Event System

(SyntheticEvent)

onFocus onBlur onChange onInput onSubmit onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp onSelect onTouchCancel onTouchEnd onTouchMove onTouchStart onScroll onWheel onLoad onError

*Your event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browser's native event.

React Component ES2015

import React, { Component } from 'react';
import { render } from 'react-dom';

class ShowName extends Component {

    constructor(props) {
        super(props);
        this.state = { lastname:'' }
    }

    handler = () => {
      this.setState({ lastname:'Jaimes' })
    }

    render() {
      return (
        <div onClick={this.handler}> { `Hello ${this.props.name} ${this.state.lastname}` }</div> 
      )
    }

}

render(<ShowName name='David'/>, document.getElementById('container'));
               

scripts tags

module bundler

<script src="/myapp.js"></script>
<script src="/react.js"></script>
<script src="/react-dom.js"></script>
<script src="/onemore.js"></script>
<script src="/thelast.js"></script>
<script src="/reallythelast.js"></script>
<script src="/infinitoymasalla.js"></script>

// app.js

import React from 'react'
import { render } from 'react-dom'

// package.json

{
  "name": "myApp",
  "version": "1.0.0",
  "description": "Miau!",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "react": "^15.2.1",
    "react-dom": "^",
    "webpack": "^",
  }
 
}

REACT DEEP

- React Router

- Redux

- ImmutableJS

- Server rendering

- React native

And more...