Introdução React.js

React.js
Construindo aplicações reativas em JavaScript

Quem sou eu?
Henrique Soares
Programador desde 2009 (antes era PHP e não conta
:D)
Instituto Atlântico desde 2012
Entusiasta de JavaScript
BrazilJS 2011
JSConfBR 2013 e 2014
Comunidade CEJS (eventos, hackatons, etc)

Como começou o JavaScript
JavaScript was created in 10 days in May 1995 by
Brendan Eich (Netscape)
https://en.wikipedia.org/wiki/JavaScript#History

var person = prompt("Please enter your name");
if (person != null) {
document.write("Hello " + person + "!");
}

Coisas Da vida
1995 Netscape cria o JavaScript
1996 ECMA padroniza
1997 ES1
1998 ES2
1999 ES3 regex, try/catch
2005
Jesse James Garrett cunhou o termo Ajax (Prototype,
jQuery, Dojo and Mootools)
2008 ES4 (abandonado)
2009 ES5 strict, JSON, Reflect
2015 ES6 class, arrows
2016 ES7 / ES2016 exponentiation operator (**)
2017 ES2017 async/await

Templates
EJS, Jade, Mustache.js, Microtemplating etc
<ul>
<% for(var i=0; i<supplies.length; i++) {%>
<li><%= supplies[i] %></li>
<% } %>
</ul>
{{#stooges}}
<b>{{name}}</b>
{{/stooges}}

Sobre o uso de templates
Vantagens Problemas
Mudanças dinâmicas no
HTML
Acoplamento
Interage com objetos e
varáveis JS de view
Pode ficar difícil manter
Renderização no client
side
Delay de renderização (compilação
em runtime)
Reuso
Renderiza mas a página ainda é
"burra" – não tem binds
Reuso (sim, reuso) – pré
carregamento = mais uma requisição

jQuery e DOM
Seletores, Eventos, Binds e Callbacks
$("input[name=age]").on("change", function() {
    if ($(this).val() > 15) {
        console.log("Velhote");
    }
});
$("form").submit(function() {
    $.post("/users", $("form").serialize());
    return false;
});

Sobre o uso de jQuery e binds
Vantagens Problemas
Separação
JS/HTML
Lidar com seletores e callbacks pode deixar
seu código bagunçado
Plugins
Se o designer alterar o HTML / DOM, o
código quebra
Compatibilidade
multibrowser
Só olhando o código HTML não se sabe os
binds e ações dos elementos
Extensível Baixo reuso e alta acoplação

Precisamos de modelos para as views

Frameworks
Backbone.js (um dos primeiros, poucos usam hoje)
Knockout.js (Microsoft adotou)
Angular.js (Google)
React.js (Facebook)

E o React.js, onde entra?
React components implement a render() method that takes
input data and returns what to display. This example uses an
XMLlike syntax called JSX. Input data that is passed into the
component can be accessed by render() via this.props.

Na prática...
class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }
  tick() {
    this.setState(prevState => ({
      seconds: prevState.seconds + 1
    }));
  }
  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }
  componentWillUnmount() {
    clearInterval(this.interval);
  }
  render() {
    return (
      <div>
        Seconds: {this.state.seconds}
      </div>
    );
  }
}
ReactDOM.render(<Timer />, document.getElementById('container'));

Virtual DOM
No React, para cada objeto DOM, existe um "objeto DOM virtual"
correspondente. Um objeto DOM virtual é a representação de um
objeto DOM, como uma cópia em memória.
Um objeto DOM virtual tem as mesmas propriedades do DOM real
mas diferenças quando algo é alterado e sua representação na
tela.
Manipular DOM é lento. Manipular o DOM virtual é muito mais
rápido por que não mexe com nada desenhado na tela. Imagine
que manipular um DOM virtual é como editar uma planta baixa ao
invés de mover as salas de uma casa construída.

Ciclo de vida dos componentes

Muito parecido com qualquer
tecnologia que use componentes

Componentes usam componentes
import React, { Component } from 'react';
import {Drawer, List, ListItem, ListItemIcon, ListItemText} from 'materialui';
import {Inbox as InboxIcon, Drafts as DraftsIcon} from 'materialuiicons';
export default class SidebarMenu extends Component {
  constructor(props) {
    super(props);
    this.state = {open: false};
  }

  closeMenu = () => {
    this.setState({open: false});
  }

  render() {
    return (
      <Drawer open={this.state.open} onRequestClose={this.closeMenu} classes={{paper: classes.menu}}>
        <List>
          <Link to='/home' onClick={this.closeMenu}>
            <ListItem button>
              <ListItemIcon>
                <InboxIcon />
              </ListItemIcon>
              <ListItemText primary='Home' />
            </ListItem>
          </Link>
          <Link to='/about' onClick={this.closeMenu}>
            <ListItem button>
              <ListItemIcon>
                <DraftsIcon />
              </ListItemIcon>
              <ListItemText primary='About' />
            </ListItem>
          </Link>
        </List>
      </Drawer>
    );
  }
}

Comunicação entre componentes

Props
Props são a maneira mais simples de transferir informações entre
os componentes. Com props você pode enviar dados do pai para o
filho.
Props são uma feature central do React.
<MeuComponente propriedadeQueDefini="Valor dado" />
class MeuComponente extends Component {
  render() {
    return (
      <div>{this.props.propriedadeQueDefini}</div>
    );
  }
}

Métodos de instância
Métodos de instância no componente filho podem ser chamados
pelo pai usando refs.
class TheChild extends React.Component {
  myFunc() {
    return 'hello';
  }
}
class TheParent extends React.Component {
  render() {
    return (
      <TheChild ref={(foo) => { this.foo = foo; }} />
    );
  }

  componentDidMount() {
    var x = this.foo.myFunc();
    // x is now 'hello'
  }
}

Outras maneiras
https://www.andrewhfarmer.com/componentcommunication/
Dependendo da complexidade / tamanho da aplicação, é
necessário alguma estratégia de gerir essa comunicação entre os
componentes, e fazer com que um ou mais componente reaja a
uma ação de outro.
Nesse cenário o mais recomendado e comum na comunidade é
utilizar o Flux (pattern criado pelo Facebook), mais propriamente a
sua implementação Redux.

...mas não iremos abordar isso hoje.

Criando uma aplicação do zero
a.k.a deixa de blá blá blá e me mostre o código

(Colazinha básica)
npm install g createreactapp
createreactapp myapp
https://github.com/henriquegogo/reactstart

Ecossistema React.js
Redux (Implementação do pattern Flux)
reactrouter
materialui
Webpack

Introdução React.js

Mais conteúdo relacionado

Mais procurados (20)

Semelhante a Introdução React.js (20)

Mais de Henrique Gogó (9)

Último (19)

Introdução React.js