React

Jefferson Mariano de Souza

O que é React?

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

Comparando com um modelo MVC, React é o V, responsável apenas pela View.

Só isso?

E por que todo esse boom em volta dessa biblioteca?

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

Por que é Rápido?

Virtual DOM

O que é DOM?

Virtual DOM

Comparando React com JQuery

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

Objetivo

                

  
Bem vindo ao React!

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!

  

);

JSX é a sintaxe mais usada para criar componentes

React é baseado em componentes

O que é um componente?

Exemplo: Spotify

Design pattern

Usando Composite

                React.createElement(
  element, //div, p, h1, h2, span, header, main, etc
  props, //id, class, data attributes
  children // elementos filhos
);
                
            
const element = React.createElement(
  "div",
  null,
  React.createElement(
    "p",
    null,
    "Bem vindo ao React!"
  )
);

Tipos de Componentes

Existem 2 tipos de componentes

  • Stateless
  • Stateful

Stateless Component

                            function Componente(nome) {
  return (
    

      
Bem vindo {nome}!

    

  );                                                         
}

Propriedades

Stateful Component

                            class Componente extends React.Component {
  constructor() {
    this.state = { nome: ''}
  }

  render() {
    return (
        

          
Bem vindo {this.state.nome}!

        

      );                                                         
    }      
  }
}

Estado

Característica

React way

Mudança de Estado Altera DOM

E o que eu preciso para usar?

Dependências

  • nodejs (jdk)
    • plataforma base
  • yarn / npm (gradle / maven)
  • babel

Exemplo de Código

HTML


<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <title>React App</title>
  </head>

  <body>
    <div id="app"></div>
  </body>
</html>

JS (Setup)


import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

const divApp = document.getElementById('app');

ReactDOM.render(<App />, divApp);

JS (Diversão)


import React from 'react';

function App() {
  return (
    <div className="full-width">
      <button onClick={() => alert('Oi!')}>Hello!</button>
    </div>
  );
}

export default App;

E o React Native?