Curso ReactJS Completo

Curso de ReactJS
Gustavo 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: gudominguete@gmail.com
● Twitter: @gudominguete
● Github: gudominguete
● Facebook: gustavo.lopes.501

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

Aula 1
Configurando 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

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.

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.

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:
https://github.com/gudominguete/cursoreactjs

Aula 3
Utilizando várias classes

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

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

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.

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

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 .

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.

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

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.

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.

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.

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 9
Trabalhando com Fluxbone

Requisitos
● Webpack
● Editor de Texto
● Browser de sua preferência
● Servidor de sua preferência
● Um webservice RESTfull

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

Curso ReactJS Completo

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Curso ReactJS Completo

Semelhante a Curso ReactJS Completo (20)

Curso ReactJS Completo