Curso de ReactJS

Curso de ReactJSGustavo Lopes Dominguete

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

Contato

● E-mail: [email protected]● Twitter: @gudominguete● Github: gudominguete● Facebook: gustavo.lopes.501

mailto:[email protected]

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.

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.

● 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.

● 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.

● 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.

Documentação

○ https://facebook.github.io/react/docs/getting-started.html

○ https://facebook.github.io/flux/docs/overview.html

https://facebook.github.io/react/docs/getting-started.html

https://facebook.github.io/react/docs/getting-started.html

https://facebook.github.io/flux/docs/overview.html

https://facebook.github.io/flux/docs/overview.html

Aula 1Configurando o ambiente

Requisitos

● Webpack

● Editor de Texto

● Browser de sua preferência

● Servidor de sua preferência

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

https://github.com/gudominguete/cursoreactjs


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

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

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.

Aula 2Hello World

Requisitos

● Webpack

● Editor de Texto



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.

Para o código!Hello World

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.

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.

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!!

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!!

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.

Resultado● O resultado é a classe sendo renderizada dentro da div.

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:




Aula 3Utilizando várias classes

Requisitos

● Webpack

● Editor de Texto



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.

Para o código!Utilizando várias classes

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.

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.

Resultado● O resultado é as classes sendo renderizadas dentro da classe bodyBox.

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.

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.

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.

Resumo

● O uso de classes permite ter um código mais organizado e fácil de manutenção.






Aula 4Propriedades em classes

Requisitos

● Webpack

● Editor de Texto



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” />

Para o código!Propriedades em classes

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.

title.jsx● Para utilizar o valor das

propriedades , basta abrir chaves e chamar o código this.props.nomeDaProprieadade .

● O código entre chaves representa que vai ser retornado algum valor de um código javascript. Assim é possivel realizar condicionais e loops.

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:

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.

Resumo

● As propriedades tornam o código mais dinâmico, podendo alterar propriedades de estilo e de conteúdo.






Aula 5React state

Requisitos

● Webpack

● Editor de Texto



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

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: []}; },

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 }); },

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 }); },

Para o código!React state

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.

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.

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)

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 .






Aula 6Formulários

Requisitos

● Webpack

● Editor de Texto



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.

Para o código!Formulários

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.

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.

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.

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

Aula 7Trabalhando com CSS

Requisitos

● Webpack

● Editor de Texto



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.

Para o código!Formulários

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.

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.

Aula 8Routes

Requisitos

● Webpack

● Editor de Texto



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.

Para o código!Routes

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.

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.

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 )

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.

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.

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 )






Aula 9Trabalhando com Fluxbone

Requisitos

● Webpack

● Editor de Texto



● Um webservice RESTfull

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.


● 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.


● 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 .


● Ações:○ CREATE - Criar um novo registro○ RETRIEVE - Selecionar todos os registros○ UPDATE - Alterar um registro○ DESTROY - Deletar um registro○ FIND - Buscar um registro


● 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.


● 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);

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.






Software

Curso de ReactJS