O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Curso de ReactJS

2.344 visualizações

Publicada em

Curso introdutório de ReactJS.
ReactJS é uma ferramente de desenvolvimento Web criada pelo Facebook.
No curso abordaremos uma abordagem introdutória ao assunto, explorando o básico para desenvolver um site somente com front-end

Publicada em: Software
  • Entre para ver os comentários

Curso de ReactJS

  1. 1. Curso de ReactJS Gustavo Lopes Dominguete
  2. 2. Roteiro ● O que é ReactJS ● Aula 01 - Configuração do ambiente ● Aula 02 - Hello World ● Aula 03 - Utilizando várias classes ● Aula 04 - Propriedades em classes ● Aula 05 - React states ● Aula 06 - Formulários ● Aula 07 - CSS ● Aula 08 - Routes ● Aula 09 - Trabalhando com Fluxbone
  3. 3. Contato ● E-mail: gudominguete@gmail.com ● Twitter: @gudominguete ● Github: gudominguete ● Facebook: gustavo.lopes.501
  4. 4. O que é ReactJS ● ReactJS é um Framework javascript desenvolvido pelo Facebook. ● Sua estratégia é similar ao Angular JS, porém ele não utiliza o modelo MVC (Model View Control). ● React traz um novo modelo chamado de Flux. ● A webpage do Instagram está totalmente desenvolvida utilizando o React.
  5. 5. Por que utilizar ReactJS? ● React possui uma maneira simples de expressar como sua aplicação deve aparentar em qualquer momento de sua utilização. React gerencia automaticamente todas as atualizações de UI (User Interface). ● Quando dados são atualizados, o React automaticamente atualiza página para renderizar os componentes com os novos dados. ● A ferramenta possui uma curva de aprendizado muito rápida. ● React possui um VirtualDOM, o que possibilita utilizar de renderização dinâmica em suas páginas.
  6. 6. ● Flux é uma arquitetura desenvolvida pelo Facebook para construir aplicações no lado cliente. ● Flux possui três entidades, a Store, o Dispatcher e as Views. ● O Dispatcher é a entidade responsável por executar ações envolvendo os dados do servidor, operações de CRUD, entre outras. ● A Store contém o estado e a lógica dos modelos da aplicação. Elas são responsáveis por armazenar os dados obtidos através dos modelos do servidor. ● As Views são entidades responsáveis por renderizar as informações armazenadas na Store.
  7. 7. ● Flux é um modelo unidirecional, onde é passada uma ação para o Dispatcher, que a executa e armazena os dados obtidos na Store. A View busca os dados na Store e renderiza a página da maneira que foi programada.
  8. 8. ● Flux se torna ciclico para poder manter a integridade de um modelo unidirecional e ao mesmo tempo ele não acaba com o ciclo de vida do modelo.
  9. 9. Documentação ○ https://facebook.github.io/react/docs/getting-started.html ○ https://facebook.github.io/flux/docs/overview.html
  10. 10. Aula 1 Configurando o ambiente
  11. 11. Requisitos ● Webpack ● Editor de Texto ● Browser de sua preferência ● Servidor de sua preferência
  12. 12. Criando o arquivo de instalação de dependencias ● Baixe o código do arquivo “package.json” e o arquivo de configuração do webpack “webpack.config.js” no github da aula. Ambos estão localizados na primeira aula do curso. ● https://github.com/gudominguete/cursoreactjs
  13. 13. Instalando o Webpack e o React ● Com NodeJS instalado, abra o terminal de seu SO ● Saia do npm e digite: >npm install --save-dev ● Aceite todas as perguntas ● Digite o seguinte comando >npm install webpack -g ● Para verificar se ocorreu tudo certo, digite o seguinte comando: >webpack --watch --progresse
  14. 14. Instalando o Webpack e o React ● Ao realizar o teste, se aparecer uma mensagem igual a imagem abaixo, o webpack funcionou corretamente, caso ao contrário, será necessário verificar os arquivos de configuração e refazer o procedimento. ● Para adicionar mais alguma dependencia ao longo do projeto, vá até o arquivo package.json e, dentro de “dependencies” adicione o nome da dependencia e a versão necessária. ● Acione o comando npm install --save-dev
  15. 15. Resumo ● O npm é responsável por instalar todas as dependencias do projeto, assim o desenvolvedor não precisa perder seu tempo fazendo o download de bibliotecas a serem utilizadas. ● O webpack funciona como um compilador, ele fica monitorando constantemente os arquivos do projeto, e quando tem alguma modificação, ele faz a junção de todos eles gerando somente um arquivo *.js.
  16. 16. Aula 2 Hello World
  17. 17. Requisitos ● Webpack ● Editor de Texto ● Browser de sua preferência ● Servidor de sua preferência
  18. 18. Criando sua primeira aplicação ● Sempre que for trabalhar com sua aplicação, é necessário deixar o comando webpack --watch --progresse rodando. Esse comando realiza o build automáticamente toda vez que o código possuir alterações. ● O build só é realizado se o código estiver correto, caso ao contrario, o webpack exibe uma mensagem contendo o erro da aplicação.
  19. 19. Para o código! Hello World
  20. 20. index.html ● O código do index é um código simples, ele só cria uma div com o id content e faz a chamada do javascript gerado pelo webpack. ● É de suma importancia que a chamada do arquivo javascript aconteça após a declaração da div, caso ao contrário o React não consegue localizá-la.
  21. 21. app.js ● O códido do app.js serve para chamar os arquivos javascripts, css, entre outros. Note que os arquivos bootstrap e jquery não apresentam sua extensão. Isso acontece pois os dois arquivos são internos ao o npm e eles estão nas dependencias declaradas no arquivo package.json. ● Poxa, mas eu vou ter que realizar um require para cada arquivo que eu tenho? Não, não tem. No arquivo app.js, você chama somente o arquivo que corresponderia ao seu arquivo inicial. ● E o que seria esse arquivo *.jsx? O arquivo jsx, é um arquivo usado para escrever o código do React. O webpack análisa esse código e transforma ele em código javascritpt. O JSX é um arquivo de extensão do javascript, logo sua sintaxe lembra muito essa linguagem.
  22. 22. hello.jsx ● Inicialmente, um código React precisa fazer o import das bibliotecas React e ReactDOM. ● A biblioteca ReactDOM só é necessária caso o código utilizará o DOM da aplicação. ● A idéia do React é criar classes que virem tags e possam ser utilizadas como html. Esse principio ajuda muito em repetições e organização de código, pois você pode colocar classes dentro de outras classes. IMPORTANTE: o atributo class em react é chamado por className!!
  23. 23. hello.jsx ● Para declarar uma classe React, é utilizado a função React.createClass e dentro de seu parâmetro é enviado um objeto do javascript. A unica exigencia feita, é que toda classe deve possuir o atributo render. ● O atributo render recebe uma função que retorna um código html, o código não tem que estar entre aspas, mas deve seguir os padrões utilizados pelo React. ● No nosso código, colocamos uma div com o className igual a “commentBox” que possui o texto “Hello, world! I am a CommentBox.” IMPORTANTE: o atributo class em react é chamado por className!!
  24. 24. hello.jsx ● O ReactDOM.render é uma função que vai renderizar uma classe React. Ela leva dois parametros. O primeiro é a classe a ser renderizada, a classe é passada em formato de tag, e é necessário ter o fechamento dela na própria tag. O segundo parametro é o objeto onde ela será renderizada. No nosso caso, estamos procurando por um elemento html com o nome content, onde no nosso index.html existe uma div com esse nome, logo o react irá renderizar o conteúdo da classe.
  25. 25. Resultado ● O resultado é a classe sendo renderizada dentro da div.
  26. 26. Resumo ● Um dos beneficios de utilizar o ReactJS, é que todos os arquivos que possuem código html ou javascript, vão ficar em arquivos jsx, e por trabalhar com classes, o código acaba ficando mais legivel do que desenvolver somente com html e javascript. ● Futuramente será demonstrado como utilizar funcionalidades do javascript dentro do código html sem precisar abrir a tag <script>. Qualquer duvida só entrar em contato em um dos endereços passados acima. Todos os códigos se encontram no github: https://github.com/gudominguete/cursoreactjs
  27. 27. Aula 3 Utilizando várias classes
  28. 28. Requisitos ● Webpack ● Editor de Texto ● Browser de sua preferência ● Servidor de sua preferência
  29. 29. Trabalhando com várias classes ● Com a utilização de tags para representar uma classe do ReactJS, é possivel utilizar classes dentro de outras classes, assim o código fica mais organizado. ● Essa aula tem o intuito de mostrar como é a implementação de classes dentro de outras classes, sendo elas estando dentro ou fora do mesmo arquivo.
  30. 30. Para o código! Utilizando várias classes
  31. 31. Várias classes no mesmo arquivo ● Para esse método, só foram feitas alterações no arquivo hello.jsx . ● Foi criada uma classe chamada TitleBox que contém apenas uma tag <h1>. IMPORTANTE: toda classe deve possuir uma div antes de seu conteúdo.
  32. 32. Várias classes no mesmo arquivo ● Outra classe foi criada para englobar nossa classe da aula 2, e a classe da aula 3. Ela é a BodyBox. ● Preste atenção para o conteudo da função render, as tags são chamadas como se fossem um html comum. ● Outra modificação feita foi a troca da classe a ser chamada pelo ReactDOM. IMPORTANTE: toda classe deve possuir uma div antes de seu conteúdo.
  33. 33. Resultado ● O resultado é as classes sendo renderizadas dentro da classe bodyBox.
  34. 34. Trabalhando com várias classes em arquivos separados ● O mesmo procedimento pode acontecer quando as classes são declaradas em arquivos diferentes. A organização do projeto fica muito mais limpa, e auxiliar no processo de manutenção de código. ● Para realizar esse processo basta fazer pequenas modificações.
  35. 35. title.jsx ● Note que não precisamos importar o ReactDOM, uma vez que dentro desse arquivo não estamos trabalhando com o DOM diretamente. ● A declaração da classe continua da mesma maneira. ● No final do arquivo temos o codigo que possibilitará a importação dessa classe. No caso, ele exportará um objeto javascript com as classes passadas por suas propriedades.
  36. 36. hello.jsx ● No arquivo hello.jsx, nosso arquivo principal, vamos mudar somente algumas linhas. ● Vamos importar o arquivo do TitleBox, o import de um arquivo JSX funciona da seguinte maneira, o nome dado depois da palavra import será o nome a ser chamado no arquivo, e o caminho do arquivo é passado depois da palavra from. ● A string ‘./*’ significa que o arquivo é um arquivo local ao projeto.
  37. 37. Resumo ● O uso de classes permite ter um código mais organizado e fácil de manutenção. Qualquer duvida só entrar em contato em um dos endereços passados acima. Todos os códigos se encontram no github: https://github.com/gudominguete/cursoreactjs
  38. 38. Aula 4 Propriedades em classes
  39. 39. Requisitos ● Webpack ● Editor de Texto ● Browser de sua preferência ● Servidor de sua preferência
  40. 40. Propriedades em classes ● O React oferece a oportunidade de passar propriedades nas classes criadas. Essas propriedades vão funcionar igual as propriedades de uma tag html. ● No nosso exemplo temos a classe TitleBox. Se implementarmos a propriedade texto dentro dela, podemos fazer a seguinte declaração: <TitleBox texto=”Mensagem de Titulo” />
  41. 41. Para o código! Propriedades em classes
  42. 42. title.jsx ● Para trabalhar com propriedades, devemos fazer a declaração de suas propriedades. A declaração é feita na função getDefaultProps(). ● A função realiza apenas o retorno de um objeto em javascript com atributos que seriam as propriedades da classe.
  43. 43. title.jsx ● Para utilizar o valor das propriedades , basta abrir chaves e chamar o código this.props.nomeDaProprieadad e . ● O código entre chaves representa que vai ser retornado algum valor de um código javascript. Assim é possivel realizar condicionais e loops.
  44. 44. hello.jsx ● No arquivo hello.jsx foi realizada alterações somente na chamada da classe TitleBox. Assim o código ficou igual a imagem abaixo. ● E o resultado foi o seguinte:
  45. 45. hello.jsx e title.jsx ● Outra maneira de passar uma propriedade do tipo texto, é declarar o texto no meio da tag da classe, igual é utilizado na tag <div>. Assim é possível passar códigos dentro da propria tag. ● Essa informação é armazenada na propriedade children. Assim para acessá-la, é necessário utilizar o código this.props.children.
  46. 46. Resumo ● As propriedades tornam o código mais dinâmico, podendo alterar propriedades de estilo e de conteúdo. Qualquer duvida só entrar em contato em um dos endereços passados acima. Todos os códigos se encontram no github: https://github.com/gudominguete/cursoreactjs
  47. 47. Aula 5 React state
  48. 48. Requisitos ● Webpack ● Editor de Texto ● Browser de sua preferência ● Servidor de sua preferência
  49. 49. Estado em classes ● Além de propriedades, o react oferece os Estados de uma classe. ● Estados funcionam quase da mesma forma que as propriedades, porém elas não são passadas quando uma função é chamada. ● Outra diferença é que o valor dos estados podem ser mudados. ● A semelhança das duas estão em como elas são declaradas, ambas possuem uma função de inicialização de seus atributos, e também como são acessadas. No caso para acessar um estado é necessário digitar o seguinte código: this.state.nomedoestado
  50. 50. Estado em classes ● Um estado possui algumas funções especificas em seu uso. ● A primeira função é a getInitialState, ela é responsável por declarar o nome, valor inicial e o tipo dos estados. Ela é declarada igual a função getDefaultProps(), ou seja, como um atributo da classe. ● A segunda função é a this.setState, ela é responsável por alterar os valores dos estados da classe. Para executar a função, é necessário passar um objeto javascript contendo o atributo a ser modificado. this.setState({data: data}); getInitialState: function() { return {data: []}; },
  51. 51. Estado em classes ● A função componentDidMount é uma função chamada pelo React logo após a classe ter terminado de renderizar pela primeira vez. Ela é declarada como um atributo da classe, e dentro dela o desenvolvedor pode colocar as funcionalidades a ser realizadas quando a classe for renderizada. componentDidMount: function() { this.setState({ cor:”red”, fonte: 18 }); },
  52. 52. Estado em classes ● A função componentWillMount funciona da mesma maneira que o componentDidMount , porém o componentWillMount é executado no lado cliente e servidor, e o componentDidMount, somente no lado cliente. componentWillMount: function() { this.setState({ cor:”red”, fonte: 18 }); },
  53. 53. Para o código! React state
  54. 54. title.jsx ● Em nosso exemplo, foi criado somente um estado, no caso um booleano chamado hide. O estado foi criado na função getInitialState. ● Também foi criada uma função para trocar o valor da váriavel hide. Ela chama a função setState onde o atributo hide receberá o valor oposto que tinha antes.
  55. 55. title.jsx ● No código da função render foi adicionado um texto para mostrar o valor do estado hide. Importante observar que caso a váriavel seja um booleano, é necessário chamar a função toString. ● Também foi adicionado um botão que chama a função trocaValor. ● Ao rodar o código é possivel observar que o valor do hide que está sendo exibido na tela está mudando sem que a página precise ser recarregada.
  56. 56. title.jsx ● Agora vamos fazer uma alteração, vamos sumir com o código do h1 quando o valor de hide for igual a true. Para isso usamos a sintaxe de condicional simplificado. ● Então o código h1 somente será exibido quando o valor da codincional não for verdadeiro. A sintaxe segue o seguinte formato: condição ? (codigoCasoVerdadeiro):(codigoCasoFalso)
  57. 57. Resumo ● O uso de estados dentro da classe permite desenvolver páginas de conteúdo dinamico sem a necessidade de recarregar a página. Porém o valor do estado é resetado quando a página for recarregada. Uma maneira para corrigir esse erro, é colocar uma funcionalidade de busca do valor dentro da função componentDidMount . Qualquer duvida só entrar em contato em um dos endereços passados acima. Todos os códigos se encontram no github: https://github.com/gudominguete/cursoreactjs
  58. 58. Aula 6 Formulários
  59. 59. Requisitos ● Webpack ● Editor de Texto ● Browser de sua preferência ● Servidor de sua preferência
  60. 60. Formulários ● O uso de formulários dentro de React não muda muito em relação quando é usado com html e javascript puro. Porém temos a facilidade de manipular o valor dos componentes no mesmo arquivo e de forma dinâmica. ● Essa aula vamos ensinar como buscar os valores dentro do formulário, e logo em seguida vai ser apresentado uma forma de exibir os dados guardados dentro do estado. ● Nas aulas sobre o Flux será ensinado como mandar esses dados para algum servidor.
  61. 61. Para o código! Formulários
  62. 62. form.jsx ● Para trabalhar com o formulário, foi criado uma nova classe chamado Formulario. ● Colocamos dois input text, um para receber o valor do nome de um autor e outro para receber um comentario. ● Em baixo está imprimindo o valor do estado autor e texto.
  63. 63. form.jsx ● Também foram criadas duas funções para atualizar o estado dos inputs quando forem atualizados. É passado o input que foi atualizado como parametro, e a propriedade value busca o valor do input. Esse valor é passado para os estados através da função setState. ● Com esse código o autor e o texto vão mudar dinamicamente enquanto o usuário estiver digitando.
  64. 64. form.jsx ● Agora vamos armazenar os dados obtidos em uma lista e exibi-los. ● Primeiramente vamos criar uma função que será chamada quando o usuário clicar no botão de confirmação. ● A função é a handleButtonClick, e ela primeiramente monta um objeto do tipo comentario que vai possuir os valores do autor e texto como atributo. Esse comentario é concatenado ao vetor criado no estado chamado comentarios.
  65. 65. form.jsx ● Primeira alteração feita no código abaixo, foi vincular a função criada para quando o usuário criar no botão, o vinculo é feito através do atributo onClick. ● Em seguida, foi criado um algoritmo para exibir todos os elementos da lista comentarios. Foi utilizado a função map de javascript. A sintaxe do mapeamento segue o seguinte formato: elementos = [1,2,3]; elementos.map(elemento =>{ return( elemento +1) }) Onde a variável elemento vai receber o valor de cada elemento dentro do vetor elementos
  66. 66. Aula 7 Trabalhando com CSS
  67. 67. Requisitos ● Webpack ● Editor de Texto ● Browser de sua preferência ● Servidor de sua preferência
  68. 68. Trabalhando com CSS ● Trabalhar com CSS ou SASS é bem simples, a unica tarefa a ser feita, é a inclusão do arquivo dentro do arquivo onde declaramos nossos requires. ● Uma observação, é que o nome das classes CSS não é feita como html normal. Ao invés de class, o React usa className. ● O código css e sass continua do mesmo jeito.
  69. 69. Para o código! Formulários
  70. 70. app.js ● O arquivo app.js só terá uma modificação, é o acréscimo da linha require(“caminhodeseuarquivo”); ● Só para revisar, quando é colocado a string “./” antes do caminho, significa que o arquivo é local ao servidor, assim não é necessário passar o endereço completo.
  71. 71. app.js ● O arquivo app.js só terá uma modificação, é o acréscimo da linha require(“caminhodeseuarquivo”); ● Só para revisar, quando é colocado a string “./” antes do caminho, significa que o arquivo é local ao servidor, assim não é necessário passar o endereço completo.
  72. 72. Aula 8 Routes
  73. 73. Requisitos ● Webpack ● Editor de Texto ● Browser de sua preferência ● Servidor de sua preferência
  74. 74. Routes ● Routes é uma maneira de mapear o website, mostrando ao browser qual arquivo ele deverá acessar quando o usuário entrar com certo tipo de endereço. ● O uso de routes auxilia na segurança do sistema web, pois não irá possuir a informação do nome do arquivo utilizado no link da página. ● O react possui uma biblioteca chamada react-routes que já está disponivel dentro do npm, assim não precisamos fazer o download da biblioteca, só precisamos declarar no arquivo package.json dentro de dependencies. ● No arquivo package.json passado no github, já está declarado a dependencia da biblioteca.
  75. 75. Para o código! Routes
  76. 76. app.js ● Vamos criar um novo arquivo para poder configurar as rotas de nosso sistema. Vamos colocar o nome de AppSetup.jsx. O nome não precisa ser esse, só colocamos para lembrar que estamos configurando a aplicação. No arquivo app.js vamos trocar a linha que chamava o arquivo hello.jsx, pela linha que chame o AppSetup.jsx.
  77. 77. AppSetup.jsx ● O arquivo AppSetup será o arquivo onde vamos declarar as rotas. São necessárias três bibliotecas, a react, react-dom e a react-router. ● Após importar essas três bibliotecas, é necessário importar as páginas que vão ser roteadas. Note no código que não precisamos importar os arquivos que são somente componentes de páginas. ● Para realizar o roteamento, é necessário chamar a função render do ReactDOM e passar o código html <Router> para identificar que vai começar a mostrar os links que vão ser roteados, e <Route> onde será passado os links. ● O path ‘*’ siginifica que pode ser qualquer path, ele é utilizado para mostrar a página não encontrada, assim ela é a ultima página a ser roteada.
  78. 78. index.jsx ● Foi criado um novo arquivo chamado index.jsx. Esse arquivo será nossa página principal, ou seja, será acessada quando o usuário entrar na homepage do site. (Ex: www.meusite.com.br/ ). ● Primeira diferença que podemos notar é que não precisamos criar variáveis para receber a classe do React. Agora nós vamos exportar a classe para que o router consiga renderizar utilizando o arquivo AppSetup.jsx. ● Outra diferença é que não precisamos importar a biblioteca ReactDOM, pois o AppSetup.jsx que vai renderizar as classes. ● Ao passar um link do site, com excessão da homepage, temos que passar o caractere ‘#’ antes do nome da página, (Ex: www.meusite.com.br/#/teste )
  79. 79. hello.jsx ● Unica alteração feita no arquivo hello.jsx é trocar a linha da declaração da classe React, e trocar para exportar a classe.
  80. 80. notfound.jsx ● Também foi criado um arquivo chamado notfound.jsx para exibir uma mensagem quando o usuário tentar acessar uma rota que não foi definida pelos desenvolvedores. ● A página contém somente um header para exibir a mensagem de página não encontrada.
  81. 81. Resumo ● O uso de rotas mantém os links do site mais organizado, sem passar o nome do arquivo pelo link. Com essa opção é possível construir links intuitivos. ● Um problema encontrado no react-router é que todos os links com exceção da página principal possuem o caractere ‘#’ antes do resto do link. (Ex: www.meusite.com.br/#/help ) Qualquer duvida só entrar em contato em um dos endereços passados acima. Todos os códigos se encontram no github: https://github.com/gudominguete/cursoreactjs
  82. 82. Aula 9 Trabalhando com Fluxbone
  83. 83. Requisitos ● Webpack ● Editor de Texto ● Browser de sua preferência ● Servidor de sua preferência ● Um webservice RESTfull
  84. 84. Trabalhando com Fluxbone ● Para trabalhar com stores, vamos seguir o exemplo de fluxbone. O Fluxbone é uma classe que mistura a arquitetura Flux com a biblioteca backbone. ● A partir dessa aula vamos precisar de algum webservice RESTfull para poder realizar a requisição dos dados utilizando o Dispatcher. Como o foco do curso não é ensinar a desenvolver um webservice, vamo partir do pressuposto que você já possua um webservice. ● O webservice utilizado também será disponibilizado no Github.
  85. 85. Trabalhando com Fluxbone ● Fluxbone é uma classe genérica onde as Stores extende-las. A grande maioria das Stores possuem as mesmas funcionalidades, as funcionalidades básicas de um CRUD (Create, Read, Update and Delete), assim extender uma classe que já possua essas funções torna o código menos redundante. ● Ao extender uma classe, ainda é possível criar funcionalidades onde somente uma Store irá utilizar. O código de cada store fica muito mais simples com o encapsulamento.
  86. 86. Trabalhando com Fluxbone ● O dispatcher está localizado dentro da classe flux do React. Ele será o responsável por fazer a comunicação com o webservice. ● O dispatcher trabalha com disparadores de eventos, onde ele passa o tipo de ação e os dados a serem enviados para o servidor. ● O Fluxbone é possui algumas ações previamente cadastradas, elas são: CREATE, RETRIEVE, UPDATE, DESTROY e FIND. ● As ações possuem o formato ACTION_nomeDaAção .
  87. 87. Trabalhando com Fluxbone ● Ações: ○ CREATE - Criar um novo registro ○ RETRIEVE - Selecionar todos os registros ○ UPDATE - Alterar um registro ○ DESTROY - Deletar um registro ○ FIND - Buscar um registro
  88. 88. Trabalhando com Fluxbone ● As ações são implementadas dentro das Stores. ● Cada ação é associada a uma função, as ações padrões tem suas funções implementadas dentro do arquivo Fluxbone. ● Para associar uma função para ação, deve seguir o seguinte formato: ○ ACTION_NOMEDAAÇÃO : ‘nomedastore-nomedafuncao’ ● Caso seja necessario criar uma nova ação, a função de conexão com o servidor deve ser declarada dentro da classe store seguindo o mesmo formato.
  89. 89. Trabalhando com Fluxbone ● O código deve possuir um EventListener para quando uma ação for lançada pelo dispatcher. A declaração do EventListener é feita nas funções componentDidMount(), componentWillMount(), componentDidUnmount() ou componentWillUnmount(). ● A declaração segue o seguinte formato: ○ NomeDaStore.on(“nomedaacação”, resp=>{ codigos do EventListener}, this);
  90. 90. Resumo ● O Fluxbone é uma ferramenta implementada fora do React, logo é necessário a importação da biblioteca nos arquivos de configuração. ● O Fluxbone somente faz a conexão com o webservice, toda lógica por volta do armazenamento de dados deve ser feita no webservice. Qualquer duvida só entrar em contato em um dos endereços passados acima. Todos os códigos se encontram no github: https://github.com/gudominguete/cursoreactjs

×