flux javascript react

Calculadora em javascript com react e flux

Compartilhe os ensinamentos do mestre

React + Flux = Um aplicação arretada

Há alguns dias eu escrevi uma breve introdução sobre o react , se você ainda não leu e quer dar uma olhada na cara de um hello world com react clica aqui: Iniciando com react js em 2017. Hoje para te levar ainda mais fundo nesse mundo de aventuras do React vou mostrar como fazer uma calculadora em javascript com react e flux.

Mas antes de criarmos nossa calculadora em javascript, vou explicar algumas coisas.

O que é o flux?

Diferente do que você pode estar pensando o flux não é um framework e sim uma arquitetura. Um dos problemas que ele tenta resolver é a dificuldade de manter os modelos sincronizados através da aplicação. Mesmo em aplicações com two way databinding, atualizações nos models(ou view models) podem iniciar reações em cadeia difíceis de debugar, especialmente quando há mais de um desenvolvedor mexendo no código.

Eu concordo com você que todos esse problemas podem ser evitados com planejamento prévio do projeto mas sabemos que no mundo real as coisas nem sempre são assim. A idéia do flux é que o fluxo de dados seja unidirecional ou seja ele vai em uma direção apenas.

Vou mostrar um diagrama de como isso funciona e em seguida explicar cada um dos conceitos:

Diagrama da estrutura do flux

 

Vou explicar o que na prática o que é cada um desses componentes. Mas antes disso precisamos criar o projeto.

 

Criando projeto

execute o comando:

npm install -g react-webpack-cli

essa comando vai instalar um utilitário para criarmos nosso app mais facilmante.

em seguida digite:

react calculadora

após a execução desse comando você vai ter uma diretório com a seguinte estrutura:

 

Estrutura do projeto da calculadora em javascript

Criando as views da nossa calculadora em javascript

Vamos começar criando 4 components react, dois serão containers e dois serão componentes base segue a lista de componentes que vamos criar dentro do diretório src/components:

  • Calculadora.js
  • Visor.js
  • Botao.js
  • Teclado.js

A calculadora será composta de um visor e um teclado e o teclado será composto por botões(veja só que coisa linda é a composição).

Segue o conteúdo desses arquivos abaixo:

Botão.js:

import React from 'react'

export default class Botao extends React.Component{
    render(){
        return (
            <div className="botao">
                <p>{this.props.valor}</p>
            </div>
        )
    }
}

Repare que esse arquivo usa um objeto chamado props, esse objeto contém valores de propriedades passados ao componente durante a utilização. A seguinte chamada:

<Botao xpto=”1″ />

fará com que a o objeto props contenha a propriedade xpto com valor 1. É possível passar objetos inteiros dentro de uma propriedade.

Em breve farei um post com mais detalhes sobre as possibilidades das ‘props’

Teclado.js:

import React from 'react'
import Botao from './Botao'

export default class Teclado extends React.Component{
    render(){
        return(
            <div id="teclado">
                <Botao valor="c"/>
                <Botao valor="+/-"/>
                <Botao valor="%"/>
                <Botao valor="/"/>
                <Botao valor="7"/>
                <Botao valor="8"/>
                <Botao valor="9"/>
                <Botao valor="*"/>
                <Botao valor="4"/>
                <Botao valor="5"/>
                <Botao valor="6"/>
                <Botao valor="+"/>
                <Botao valor="4"/>
                <Botao valor="5"/>
                <Botao valor="6"/>
                <Botao valor="-"/>
                <Botao valor="0"/>
                <Botao valor="."/>
                <Botao valor="pi"/>
                <Botao valor="="/>
            </div>
        )
    }
}

 

O teclado é composto de vários botões, assim estamos criando um componente através da composição de vários outros componentes.

Visor.js:

import React from 'react'

export default class Visor extends React.Component{
    render(){
        return (
            <div id="visor">
                <h1>0</h1>
            </div>
        )
    }
}

O visor é composto apenas de tags html simples, na próxima parte deste tutorial iremos utilizar os stores do flux para carregar dinamicamente o valor do visor de acordo com o que foi digitado no teclado.

Calculadora.js:

import React from 'react'
import Visor from './Visor'
import Teclado from './Teclado'

export default class Calculadora extends React.Component{
    render(){
        return (
            <div id="calculadora">
                <Visor/>
                <Teclado/>
            </div>
        )
    }
}

 

A calculadora é o componente principal da nossa calculadora em javascript, ele será composto pelo visor e pelo teclado.

Index.js:

import React from 'react'
import ReactDOM from 'react-dom'
import Calculadora from './components/Calculadora'


ReactDOM.render(<Calculadora></Calculadora>, document.getElementById('main'))


O index.js é o ponto de entrada da nossa aplicação react, nele vamos indicar o componente raíz a ser renderizado.

 

Agora na pasta Calculadora crie o arquivo estilo.css  para darmos uma cara um pouco melhor para a nossa calculadora.

Estilo.css:

body{
    font-family: sans-serif;
}

#visor h1{
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: right;
    font-size: 31px;
    margin: 0;
    margin-right:5px;
}

#calculadora{
    width: 360px;
    background: #999999;
    margin: auto;
}

.botao:nth-of-type(4n){
    background:#e89748;
}

.botao {
    float: left;
    width: 24.4%;
    text-align: center;
    background: #d6d6d6;
    border: solid 1px #8e8e8e;
    cursor: pointer;
}

 

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>NODE - REACT - WEBPACK</title>
    <link rel="stylesheet" href="estilo.css"/>
  </head>
  <body>
    <div id="main"></div>

    <script src="./bundles/app.js"></script>
  </body>
</html>

agora abra seu console e digite os comandos para rodar a aplicação:

npm install
npm start

se você acessar http://localhost:8080/ você irá obter o seguinte resultado:

a cara da nossa calculadora em javascript

Agora que você já tem o setup do projeto você pode ir para a parte 2 clicando aqui.

  • Alexandre Vilela

    Segui os passos mas apresenta o erro abaixo:

    ERROR in ./src/components/Component.js
    Module parse failed: C:REACTCalculadoracalculadorasrccomponentsComponent.js Unexpected token (6:6)
    You may need an appropriate loader to handle this file type.
    SyntaxError: Unexpected token (6:6)
    at Parser.pp$4.raise (C:REACTCalculadoracalculadoranode_modulesacorndistacorn.js:2221:15)
    at Parser.pp.unexpected (C:REACTCalculadoracalculadoranode_modulesacorndistacorn.js:603:10)