Criando o Layout de uma aplicação Web React

Anderson Irias - 13/03/2021

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 (

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

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

(adsbygoogle = window.adsbygoogle || []).push({});

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 (

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 (

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 (

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

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

(adsbygoogle = window.adsbygoogle || []).push({});

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 (