Criando o Layout de uma aplicação Web React – Irias Lab
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.
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.
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 { Row, Col, Card } from 'react-bootstrap';
<Row className="header pt-4">
<Card className="header-card mx-4 p-2">
<Row className="justify-content-md-center text-center">
Adicione também a estilização CSS do componente no arquivo src/header/styles.css.
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 { Col, Card } from 'react-bootstrap';
<Card className="mx-4 p-2 profile-card">
O CSS deste componente fica em src/profile/styles.css.
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.
<Card className="mx-4 p-2 content-card">
O arquivo CSS src/content/styles.css ficará assim.
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.
<Row className="footer justify-content-md-center text-center pb-4">
<Card className="footer-card mx-4 p-2">
<Card className="footer-card  mx-4 p-2">
Também adicione o CSS no arquivo src/footer/styles.css
.footer-card {
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.
E nosso App.css ficará assim.
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.
Autor Anderson IriasPublicado em 13 de março de 2021 14 de março de 2021 Categorias React, React Tutorial, SiteTags Criar site, React