React.JS

Uma biblioteca JavaScript para criar interfaces de usuário

1

Desenvolvedores começaram a ter problemas com manutenção.

2

Equipe crescendo e processos de novas versões atrasadas.

3

Aplicação complexa e com muitas versões em cascata.

5

React criado com a finalidade de otimizar a atualização do feed de notícias da rede social.

4

Um desenvolvedor sugere criar uma biblioteca em JavaScript.

6

Em 2013, o React teve sua biblioteca de códigos aberta à comunidade.

# REACT.JS

História

2011

2013

1. Conjunto de linhas de código JavaScript pré-prontos criadas pela comunidade

2. Podem ser utilizadas em diversos projetos, desde interfaces mais simples até mais complexas

3. No caso do React, não foi diferente, se trata de uma biblioteca open-source.

# REACT.JS

Biblioteca?

Antes de falar sobre o React, precisamos entender o que é uma biblioteca JavaScript:

Popular

É a biblioteca mais popular do JavaScript e é usada para construir uma interface de usuário.

1.

2.

Performance

Ela oferece uma resposta excelente para o usuário, usando um novo método de renderizar sites.

3.

Simples

Permite dividir uma página inteira em partes, chamadas de componentes.

# REACT.JS

O que é React?

# REACT.JS

Quem usa React?

# REACT.JS

Sintaxe

JSX

(JavaScript Syntax Extension)

1. Sintaxe de fácil aprendizado, além de facilitar o desenvolvimento e o entendimento das funcionalidades do código.

 

2. Oferece algumas funcionalidades a mais e permite escrever de forma simples JavaScript e HTML no mesmo código.

 

3. Para interpretado pelo navegador ele deve passar por um transpilador de código, chamado Babel.

 

// A variável em JavaScript recebe um elemento HTML
const header = <div>Seminário de desenvolvimento web</div>;

ReactDOM.render(header, document.getElementById('root'));
# REACT.JS

No código da página HTML:

 

<div id="header"></div>
# REACT.JS

Exemplo básico

# REACT.JS
# REACT.JS

Componentes

2. São blocos de códigos reutilizáveis que agregam funcionalidades e que retornam ao código HTML após a renderização pelo navegador.

 

1. Podem ser dinâmicos, quando seus dados são alterados, ou estáticos, que mantêm seu conteúdo inalterado.

 

# REACT.JS
# REACT.JS

Componentes

4. Assim, nos reutilizamos os blocos de códigos escritos, ficando mais fácil para manutenção e novas versões.

 

3. Percebe-se que mesmo criando uma outra página, nos mantemos o mesmos componentes.

1. São características passadas para o componente dinâmico. E o mesmo renderiza com aquele valor. 

 

2. Elas funcionam igual os atributos do HTML, como por exemplo type, href, id e entre outros.

 

3. Essas propriedades podem ser valores fixos (string, number ou boolean), variáveis e até mesmo funções.

# REACT.JS
# REACT.JS

Propriedades

1. São características passadas para o componente dinâmico. E o mesmo renderiza com aquele valor. 

 

2. Elas funcionam igual os atributos do HTML, como por exemplo type, href, id e entre outros.

 

3. Essas propriedades podem ser valores fixos (string, number ou boolean), variáveis e até mesmo funções.

# REACT.JS
# REACT.JS

Propriedades

Componente: Retângulo

Propriedade

    Cor: Vermelho

Componente: Retângulo

Propriedade

    Cor: Amarelo

Componente: Retângulo

Propriedade

    Cor: Azul

// Reutilizando o componente Produto
function App() {
    return (
        <div>
            <Produto nome="Feijão" preco="R$ 4,22" />
            <Produto nome="Arroz" preco="R$ 3,29" />
            <Produto nome="Macarrão" preco="R$ 2,99" />
        </div>
    );
}
// Componente Produto
function Produto (props) {
	return
		<h2>Olá, você comprou o produto {props.nome},
            pelo preço de {props.preco}</h2>
}
# REACT.JS
# REACT.JS

Propriedades

1. Seria o estado da aplicação e, ele é gerenciado com as variáveis instanciadas no código, onde valores podem ser alterados mediante a ação do usuário.

2. O exemplo para esse caso seria um contador simples. Quando você clicar no botão "Add", ele vai somar o item inicial e alterar automaticamente na tela. 

 

# REACT.JS
# REACT.JS

Estados

Trocar cor

Componente: Retângulo

Estado

    Cor: Vermelho

Ação do usuário

1. Seria o estado da aplicação e, ele é gerenciado com as variáveis instanciadas no código, onde valores podem ser alterados mediante a ação do usuário.

2. O exemplo para esse caso seria um contador simples. Quando você clicar no botão "Add", ele vai somar o item inicial e alterar automaticamente na tela. 

 

# REACT.JS
# REACT.JS

Estados

Trocar cor

Componente: Retângulo

Estado

    Cor: Verde

Ação do usuário

Primeiro vamos revisar o que é o DOM:

 

# REACT.JS
# REACT.JS

Virtual DOM

Text

É uma representação estruturada de todos os elementos da página e é utilizado para facilitar as alterações nesses elementos.

window

document

html

head

body

Text

Formado por uma série de tags que representam cada elemento de um componente ou da página HTML.

Ele realiza uma cópia do DOM em memória, faz as alterações necessárias conforme a determinação das instruções programadas.

1.

2.

O virtual DOM é mantido em memória e sincronizada com o DOM “real” por uma biblioteca interna como o ReactDOM.

3.

Todo esse processo interno realizado pelo React, é chamado de

reconciliação.

# REACT.JS
# REACT.JS

Virtual DOM

# REACT.JS
# REACT.JS

Virtual DOM

Cópia do DOM Real

componente

componente

componente

componente

DOM

componente

componente

componente

componente

VDOM

# REACT.JS
# REACT.JS

Virtual DOM

componente

componente

componente

componente

Cópia do DOM Real

componente

componente

componente

componente

{

componente

Diferença

VDOM

DOM

# REACT.JS
# REACT.JS

Virtual DOM

Reconciliação

componente

componente

componente

componente

componente

componente

componente

componente

componente

componente

componente

componente

componente

componente

componente

componente

componente

componente

componente

componente

VDOM

DOM

# REACT.JS
# REACT.JS

Ciclo de vida

1. Todo componente no React possui um ciclo de vida, desde a inicialização até a desmontagem dele no DOM.

2. Cada passo do ciclo de vida de um componente conseguimos chamar métodos interceptando sua renderização tradicional.

 

3. O React sempre vai respeitar o ciclo de vida de todos os componentes, podem apenas fazer ações durante o ciclo.

 

1

Inicialização

2

Montagem

3

Atualização

4

Desmontagem

# REACT.JS
# REACT.JS

Ciclo de vida

Podem ter outros passos entre uma etapa principal e outra, porém em resumo temos o seguinte ciclo:

# REACT.JS
# REACT.JS

Exemplo

# REACT.JS
# REACT.JS

Conclusão

Uma biblioteca voltada exclusivamente para o desenvolvimento de interfaces de usuários. E por fim, porque usar React?

 

  • Fácil de usar
  • Fácil de escrever
  • Melhor desempenho com Virtual DOM
  • Amigável para SEO
  • Suporte à reusabilidade de componentes
  • Extensão JSX

 

Muito obrigado!

Maurício Salin

Gabriel Antonietti

Guilherme Barbosa

Henrique Kellip

 

Canoas, 04 de Outubro de 2022

# REACT.JS
# REACT.JS
# REACT.JS

Referências

  • https://kenzie.com.br/blog/react/
  • https://www.hostinger.com.br/tutoriais/o-que-e-react-javascript
  • https://pt-br.reactjs.org/
  • https://blog.betrybe.com/react/
  • https://blog.tecnospeed.com.br/o-que-e-react/

Além do conhecimento dos colegas, contamos com a ajuda de alguns conteúdos que recomendamos a leitura para quem deseja aprendar mais sobre a biblioteca!

Made with Slides.com