O que é react?

React é uma biblioteca que auxilia na construção de interfaces.

Só isso?

E por que todo esse boom em volta do react?

Vantagens

• Fácil de aprender
• Reaproveitamento de código
• Comunidade ativa
• Sintaxe amigável na construção de componentes (HTML)
• Grandes empresas utilizando
• É rápido

Muito rápido

JQuery

A manipulação do DOM (operação custosa) fica nas mãos do desenvolvedor

Toda modificação dispara uma alteração no DOM

React

Otimiza a manipulação do DOM, alterando somente o necessário

Alterações são enviadas em lote, minimizando impacto no DOM

Sintaxe

A sintaxe mais utilizada para a criação de componentes em React é JSX

JSX é uma extensão da sintaxe do JavaScript que lembra XML

Exemplo Sem JSX

                            

  
Bem vindo ao react!

                        

                                const element = React.createElement(
  "div",
  null,
  React.createElement(
    "p",
    null,
    "Bem vindo ao react!"
  )
);
                                
                            

Exemplo Com JSX

                            

  
Bem vindo ao react!

                                const element = (
  

    
Bem vindo ao react!
  
);
                                
                            

Existem 2 tipos de componentes

• Stateless
• Stateful

Stateless component

                            function Componente({nome}) {
  return (

Bem vindo {nome}!
);                                                         
}
                            
                        

Stateful component

                            class Componente extends React.Component {
  constructor() {
      //...
  }

  render() {
    return (

        
Bem vindo {this.store.nome}!
      
);                                                         
    }      
  }
}
                            
                        

Flux

Arquitetura

Mobx

Facilita a implementação de flux

Mobx

                            import React from 'react';
import { observer } from 'mobx-react';

import ExemploStore from '../stores/ExemploStore';

@observer
class Exemplo extends React.Component {
  constructor(props) {
    super(props);
    this.store = ExemploStore;
  }

  render() {
    return (
{this.store.exemplo}
);
  }
}   
                            
                        

                            import { observable, action } from 'mobx';

class ExemploStore {
  @observable exemplo = 'Teste';

  @action
  fazAlgumaCoisa() {
    this.exemplo = 'React!';
  }
}

export default new ExemploStore();
                                
                            

E o que eu preciso pra usar isso?

Dependências

• nodejs (jdk)
plataforma base
• yarn / npm (gradle / maven) npm duplicava dependencias (corrigido na versão 5)
• nvm
(Node Version Manager)
• babel

Organização do projeto