Dojo React JS - by AFGOULART

React JS

by André Filipe Goulart

Vamos começar?

Uma biblioteca e
não um framework.

Single Page Applications

Facebook, Instagram,
Empresas e Devs
pelos mundo

Elementos React

Virtual DOM
(pseudo-DOM)

Componentes

Componente - Slide

Componente - SlideItem

Componente - SlideElements

JSX

        <h1>Oi</h1>

      React.createElement('h1', null, 'Oi');

      React.createClass({  render: function(){    return (<h1>Oi</h1>)  }});

Anatomia de uma aplicação React

Renderização

        React.render(  <h1>Hello World</h1>, document.body);

Javascript Reativo

Componente

        var Todo = React.createClass({  render: function() {    return (      <ul>        <li>item 1</li>      </ul>    )  }});React.render(<Todo />, document.body);

Props

        var Todo = React.createClass({  render: function() {    return (      <ul>        <li>{this.props.title} </li>      </ul>    )  }});React.render(<Todo title="My figure 1" />, document.body);

State

        var Todo = React.createClass({  getInicialState: function() {    return {      done: false    }  },  render: function() {    return (      <ul>        <li>          <input type="checkbox" checked={this.state.done}> {this.props.title}        </li>      </ul>    )  }});React.render(<Todo title="My figure 1" />, document.body);

Javascript Isomorfico
(Javascript Universal)

Data-biding

      var NoLink = React.createClass({  getInitialState: function() {    return {message: 'Hello!'};  },  handleChange: function(event) {    this.setState({message: event.target.value});  },  render: function() {    var message = this.state.message;    return (      <div>        <input type="text" value={message} onChange={this.handleChange} />;        <h2>{message}</h2>;      </div>    )  }});

Why React?

Não é um framework MVC.
Não usa templates.
Não exite watch events, podendo renderizar quando for necessário.
Reaproveitamento de código com a criação de componentes
Trabalha com o VirtualDOM, sendo mais rápido que o DOM nativo
Podemos rodar o React no lado do Servidor com Node, melhorando para o SEO e a performace. Veja (apresentação sobre React Isomorfico)