React

Conceitos

&

Componentes

POO

Componentes

Props

Herança e Hierarquia

State

Component Lifecycle

DOM & Virtual DOM

POO

Props

Herança e Hierarquia

State

Component Lifecycle

DOM & Virtual DOM

UI

Pedaço

Pedaço

Pedaço

Componente

Componente

Componente

Independentes

Reutilizáveis

Isolados

Componentes

Funções

Conceitualmente

Estruturalmente

Objetos

Pais e Filhos

Herança

Composição

Propriedades

Características

Métodos

Ações

Lifecycle

POO

Props

Herança e Hierarquia

State

Component Lifecycle

DOM & Virtual DOM

Componentes

P

O

O

rogramação

rientada a

bjetos

Paradigma

Visão

Estruturação

Execução

Estruturado

Dados 'globais'

Procedimentos

POO

Objetos

Propriedades

Métodos

C

Java

JS

C#

SmallTalk

4 Pilares

Abstração

Encapsulamento

Poliformismo

Herança

Abstração

Transformar aspectos da vida real em objetos

Animal

nome

altura

largura

cor

espécie

...

altura

largura

cor

espécie

...

Classes

"Moldes"

Definem as propriedades e métodos dos objetos

class Animal {




}
constructor(nome){

}
 this.nome = nome;
const meuAnimal = new Animal("rex");
console.log(meuAnimal.nome);
// "Não Faca Isso"

Encapsulamento

O que está dentro do objeto só pode ser acessado por ele

O objeto só pode acessar o que está dentro dele

class Animal {












}
constructor(nome){

}
 this.nome = nome;
const meuAnimal = new Animal("Rex");
getNome(){

}
return this.nome;
setNome(novoNome){

}
this.nome = novoNome;
console.log(meuAnimal.getNome());
// "Rex"
meuAnimal.setNome("Fofucho")
console.log(meuAnimal.getNome());
// "Fofucho"

Cachorro

É um Animal

fala

rola

Herança

Objetos Pais passam propriedades e métodos para Objetos Filhos

Objetos Filhos herdam propriedades e métodos

class Cachorro                 {
    
    constructor(nome){
    
    }








}
extends Animal
super(nome);
falar() {
    console.log("Au Au")
}
rolar() {
    console.log("*rolando*")
}
const meuCachorro = new Cachorro("Rex");
console.log(meuCachorro.getNome());
// "Rex"
meuCachorro.falar();
// "Au Au"

Gato

É um Animal

raça

fala

class Gato                 {
    
    constructor(nome, raca){
    

    }








}
extends Animal
super(nome);
falar() {
    console.log("Miau")
}
const meuGato = new Gato("Mingau", "Siames");
console.log(meuGato.getRaca());
// "Siames"
meuGato.falar();
// "Miau"
this.raca = raca;
getRaca() {
    return this.raca
}

Animal

nome

getNome()

setNome()

Cachorro

Gato

nome

getNome()

setNome()

nome

getNome()

setNome()

falar()
rolar()

raca

getRaca()

falar()

POO

Props

Herança e Hierarquia

State

Component Lifecycle

DOM & Virtual DOM

Componentes

Componentes

Pai

Filho

Filho

Filho

Pai

C-1

C-2

C-3

C-4

C-0

filho
filhos

Herança

<div>
    <HeaderComponent />
    <NavBar />
    <FooterComponent />
</div>
<div>
    <NavIcon />
    <NavIcon />
    <NavIcon />
    <NavIcon />
</div>
App {
    HeaderComponent

    NavBar {
        NavIcon
        NavIcon
        NavIcon
    }
    
    FooterComponent
}

App.js

NavBar.js

Estrutura

Composição

Herança

=/=

Componentes compõem ou são compostos por outros componentes 

Stateful Components herdam de React.Component

Como os elementos Pai passam atributos para elementos Filhos?

POO

Props

Herança e Hierarquia

State

Component Lifecycle

DOM & Virtual DOM

Componentes

Props

NavBar.js

render(){
    return(
        <div>
            <NavIcon nome="Google" link="www.google.com"/>
            <NavIcon nome="Face" link="www.fb.com"/>  
        </div>
    );
}

NavIcon.js

class NavIcon extends Component {
    render(){




 
    }
}
return(
    <div>
        <a href={this.props.link}>{this.props.name}</a>
    </div>
);

1° NavIcon:

this.props = {
    name: "Google",
    link: "www.google.com"
}
this.props = {
    name: "Face",
    link: "www.facebook.com"
}

2° NavIcon:

class NavIcon extends Component {
    render(){
        return(
            <div>
                <a href={this.props.link}>{this.props.name}</a>
            </div>
        );
    }
}
const navIcon = (props) => {





}

Stateful

Stateless

return(
    <div>
        <a href={props.link}>{props.name}</a>
    </div>
);

Stateful Components são instancias de React.Component

Stateless são funções e recebem props como argumento

POO

Props

Herança e Hierarquia

State

Component Lifecycle

DOM & Virtual DOM

Componentes

Props X State

Props

Dados passados por Componentes Pais

State

Dados próprios que podem mudar com o decorrer da aplicação

State é um Objeto

Encapsulamento

Imutabilidade

Apenas o Componente tem acesso a seu State

States só devem ser alterados com setState()

class MeuComponente extends Component {




}

state = {


}
meuCampo: 'umValor',
outroCampo: 'outroValor',
this.setState(



);
{
    meuCampo: 'umValorDiferente'
}

state = {

}

meuCampo:

'umValor'

outroCampo:

'outroValor'

'umValorDiferente'

console.log(this.state.outroCampo);

... seu Componente

atualiza

Sempre que seu State

muda ...

POO

Props

Herança e Hierarquia

State

Component Lifecycle

DOM & Virtual DOM

Componentes

LifeCycle

Inicialização

Atualização

Destruição

Updating
UnMounting
Mounting

Inicialização

getDefaultProps
getInitialState
componentWillMount
render
componentDidMount
getDefaultProps
getInitialState
componentWillMount
render

Atualização

shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
shouldComponentUpdate
componentWillUpdate
render

Destruição

componentWillUnmount

POO

Props

Herança e Hierarquia

State

Component Lifecycle

DOM & Virtual DOM

Componentes

D

O

M

ocument

bject

odel

Representação

Acesso

Manipulação

Virtual DOM

Representação da UI

guardada na memória

Declarativo

ReactDOM

WorkShop React - 03 - Conceitos & Components

By João Batista

Made with Slides.com

WorkShop React - 03 - Conceitos & Components

  • 79

More from João Batista