REACTJS - Aplicação de Página �nica - #2 Esboço do Layout

Fala turma! Neste vídeo-tutorial iremos abordar a estruturação da nossa aplicação, criando os diretórios e componentes necessários para o seu funcionamento.

Esboço do Layout

Desenvolvemos o esboço do layout apresentando todos os componentes e sub-componentes conforme foto abaixo:

Criando componentes e subcomponentes

Nesse primeiro momento iremos apenas criar o esqueleto dos nossos componentes. Basicamente todos eles terão a seguinte estrutura:

import React from 'react';

export default class NomedoMeuComponente extends React.Component {

    render(){
        return(
            null
        );
    }
}

Já criamos nesta vídeo-aula o componente Header:

import React from 'react';
import Nav from "./header/Nav";
import ButtonMob from "./header/ButtonMob";
import Logo from "./header/Logo";
import Address from "./header/Address";

export default class Header extends React.Component {

    render(){
        return(
            <div className="header">
                <Nav/>
                <ButtonMob/>
                <Logo/>
                <Address/>
            </div>
        );
    }
}

E o componente main:

import React from 'react';
import Slide from "./main/Slide";
import Information from "./main/Information";
import Contact from "./main/Contact";
import Maps from "./main/Maps";

export default class Main extends React.Component {

    render(){
        return(
            <div className="main">
                <Slide/>
                <Information/>
                <Contact/>
                <Maps/>
            </div>
        );
    }
}

Na próxima aula continuamos com o desenvolvimento e estilizações.

Sucesso nos códigos e na vida!