Criando o Layout de uma aplicação Web React

No artigo de hoje, vamos dar continuidade a série de artigos sobre o React. No artigo anterior vimos como integrar o Bootstrap com o React, utilizando o react-bootstrap. https://irias.com.br/blog/react-bootstrap-criando-aplicacao-react/. Agora vamos organizar nossa interface, separando os elementos em componentes e definindo o Layout base.

Estrutura do projeto React

Nosso primeiro passo, será criar um diretório específico para nossos componentes. Dentro da pasta src crie a pasta components. Após isso, vamos também criar a estrutura para nossos 4 componentes principais: header, profile, content e footer. Então crie uma pasta para cada um dos componentes na pasta components, e dentro de cada pasta de componente adicione os arquivos: index.js e styles.css. Estes serão os arquivos onde colocaremos o código de nossos componentes e a estilização CSS.

Nosso projeto ficará com a seguinte estrutura:

Esboço da tela

Realizei o desenho de como nossa aplicação irá ficar. Este desenho é só um esboço, realizar a criação de protótipos no papel ajuda bastante a planejar e realizar o desenvolvimento de interfaces.

Criando o Layout da aplicação

Visto a divisão do Layout que realizamos anteriormente, nossa aplicação Web está primariamente dividida em: header, profile, content e footer. Vamos agora ver como fica cada um destes componentes.

Header

Nosso cabeçalho se divide em duas colunas, onde no lado esquerdo temos um card para o nome e no direito temos a divisão de três cards para: função, projetos e blog.

Inicialmente vamos usar o componente Card, do React Bootstrap para criar todo o Layout. Nos próximos artigos, vamos aprofundar na criação de cada elemento visual. Como vimos no artigo passado, vamos continuar utilizando os componentes Row e Col para a organização do Layout na tela.Agora dentro do diretório src/header abra o arquivo index.js e adicione o seguinte conteúdo nele.

import { React, Component } from 'react';
import { Row, Col, Card } from 'react-bootstrap';
import './styles.css';

class Header extends Component {
  render() {
    return (
      <Row className="header pt-4">
        <Col md={4}>
          <Card className="header-card mx-4 p-2">
            Nome
          </Card>
        </Col>
        <Col md={8}>
          <Row className="justify-content-md-center text-center">
            <Col md={4}>
              <Card className="header-card mx-4 p-2">
                Função
              </Card>
            </Col>
            <Col md={4}>
              <Card className="header-card mx-4 p-2">
                Projetos
              </Card>
            </Col>
            <Col md={4}>
              <Card className="header-card mx-4 p-2">
                Blog
              </Card>
            </Col>
          </Row>
        </Col>
      </Row>
    );
  }
}

export default Header;

Adicione também a estilização CSS do componente no arquivo src/header/styles.css.

.header {
  min-height: 10vh;
}

.header-card {
  min-height: 70%;
}

Profile

O nosso perfil é o local onde ficam as informações pessoais básicas. Nele também vamos utilizar os componentes: Col e Card do React Bootstrap. No arquivo src/profile/index.js adicione o conteúdo.

import { React, Component } from 'react';
import { Col, Card } from 'react-bootstrap';
import './styles.css';

class Profile extends Component {
  render() {
    return (
      <Col md={4}>
        <Card className="mx-4 p-2 profile-card">
          <Card.Body>
            Perfil
          </Card.Body>
        </Card>
      </Col>
    );
  }
}

export default Profile;

O CSS  deste componente fica em src/profile/styles.css.

.profile-card {
  top: 10%;
  min-height: 80%;
}

Content

O componente conteúdo é onde será apresentado as informações, conforme a opção selecionada pelos botões presentes no  portfólio. O arquivo src/content/index.js ficará da seguinte maneira.

import { React, Component } from 'react';
import { Col, Card } from 'react-bootstrap';
import './styles.css';

class Content extends Component {
  render() {
    return (
      <Col md={8}>
        <Card className="mx-4 p-2 content-card">
          <Card.Body>
            Conteúdo.
          </Card.Body>
        </Card>
      </Col>
    );
  }
}

export default Content;

O arquivo CSS src/content/styles.css ficará assim.

.content-card {
  top: 10%;
  min-height: 80%;
}

Footer

O rodapé é a área onde estarão os botões de navegação no portfólio. Este componente será semelhante ao nosso header. Nele cada botão ficará em uma coluna.

Adicione o código abaixo no arquivo src/footer/index.js.

import { React, Component } from 'react';
import { Row, Col, Card } from 'react-bootstrap';
import './styles.css';

class Footer extends Component {
  render() {
    return (
      <Row className="footer justify-content-md-center text-center pb-4">
        <Col md={2}>
          <Card className="footer-card mx-4 p-2">
            Sobre
          </Card>
        </Col>
        <Col md={2}>
          <Card className="footer-card  mx-4 p-2">
            Graduação
          </Card>
        </Col>
        <Col md={2}>
          <Card className="footer-card  mx-4 p-2">
            Experiência
          </Card>
        </Col>
        <Col md={2}>
          <Card className="footer-card  mx-4 p-2">
            Habilidades
          </Card>
        </Col>
        <Col md={2}>
          <Card className="footer-card  mx-4 p-2">
            Extra
          </Card>
        </Col>
      </Row>
    );
  }
}

export default Footer;

Também adicione o CSS no arquivo src/footer/styles.css

.footer {
  min-height: 10vh;
}

.footer-card {
  min-height: 70%;
}

App

Por fim, vamos editar nosso App.js. Antes todo o código da aplicação estava diretamente neste arquivo. Agora que realizamos a divisão dos componentes, nosso App.js ficará da seguinte maneira.

import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import { Container, Row } from 'react-bootstrap';
import Header from './components/header';
import Profile from './components/profile';
import Content from './components/content';
import Footer from './components/footer';

function App() {
  return (
    <Container fluid>
      <Header />
      <Row className="body">
        <Profile />
        <Content />
      </Row>
      <Footer />
    </Container>
  );
}

export default App;

E nosso App.css ficará assim.

.body {
  min-height: 80vh;
}

Conclusão

Ao terminar nosso portfólio estará do seguinte modo.

Assim já criamos todo o layout conforme está no desenho. Cada elemento da nossa interface Web, já está em seu devido lugar organizado na tela. No próximo artigo, vamos prosseguir criando todos os elementos estáticos da interface e adicionando a estilização CSS. O projeto está disponível em meu GitHub: https://github.com/andersonirias/portifolio.

Um comentário em “Criando o Layout de uma aplicação Web React”

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *