Proposta de melhoria de componentes

[raffaeldantass]

Refatorando seus componentes

Sei que talvez seja muito cedo no seu processo de aprendizado, especialmente vindo de uma lib como o Vue, mas vou trazer aqui uma proposta de como você pode tornar seu projeto mais simples com Styled Components e Stateless Components (Substituindo os componentes de classe - que são mais complexos)

Por conta do React Hooks, a gente consegue fazer as mesmas coisas que um Class Component usando um Stateless Component

Pra isso, vamos usar um dos seus componentes e refatorar pra usar Styled Components e Stateless

Pra esse caso, vou usar o AppHeader pra facilitar.

Primeira coisa, precisamos usar o Styled Components pra substituir pelo SASS, só com essa substituição é possível usar o Scoped Styles.

import React from 'react';
import styled from 'styled-components'

const StyledHeader = styled.header`
   font-family: "Montserrat"
   background-image: url('../assets/dark-header-bg.jpg')
   background-size: cover
   height: 100%
   width: 40%
   min-height: 100vh
   display: flex
   align-items: center
   justify-content: center
   overflow: hidden

   @media screen and (max-width: 700px)
     width: 100%
     min-height: unset
     height: unset
`

const StyledAnchor = styled.a`
    text-decoration: none
    max-width: 100%
    padding: 27vh 0
    background-image: url('../assets/gradient-header-circle.png')
    background-size: contain
    background-repeat: no-repeat
    background-position: right -50px center

    @media screen and (max-width: 700px)
      padding: 5vh
      background-size: 100%
      background-position: center center
`

const StyledTitle = styled.h1`
    max-width: 100%
    display: flex
    align-items: center
    flex-wrap: nowrap
`

const StyledSpan = styled.span`
    color: #ffffff
    line-height: 1
    font-weight: bolder
    font-size: 11.6vw
    margin-right: 10px
`

const StyledImg = styled.img`
     width: 110px

    @media screen and (max-width: 700px)
      width: 55px
`

/* Neste caso estou usando os () diretamente sem o return pq não há nenhuma função ou hooke sendo usado */
const AppHeader = ({logo}) => (
 <StyledHeader>
    <StyledAnchor href="/">
       <StyledTitle>
          <StyledSpan>LABS</StyledSpan>
          <StyledImg src={logo} alt="" />
       </StyledTitle>
    </StyledAnchor>
 </StyledHeader>
)

export default AppHeader;

Observações importantes: você pode separar os seus estilos e seu componente, igual você faz com o SASS. Algo do tipo:

• AppHeader.js
• AppHeader.styles.js

Essa é apenas a sintaxe básica pra utilização do styled components, é possível fazer muita coisa, misturar SASS com styled, deixar tudo com styled, etc. Varia pro que encaixar melhor com o que você precisar.

Essa é a sintaxe mais simples e que geralmente funciona, se precisar de ajuda, só falar.
É noissss! Valeu!

[ricardogouveia3]

@raffaeldantass muito obrigado pela ajuda!

Mudei a sintaxe de todos os componentes pra stateless seguindo seu exemplo. Só não consegui mudar o AppMain porque ele usa o hook componentDidMount para alterar um state. Esse ficou como ClassComponent mesmo (é necessário? não sei).

Coloquei todo o estilo em styled components. Como é pouca coisa, deixei no mesmo arquivo, não ficou ruim na minha opinião.

[marcelodasilva]

Fala @ricardogouveia3

  componentDidMount() {
    fetch(API_LABS_ENDPOINT)
      .then((response) => response.json())
      .then((data) => this.setState({ labItems: data }));
  }

poderia ser reescrito usando os hooks useEffect e useState

ficando similar a

import React, { useEffect, useState } from 'react'

const [labItems, setLabItems] = useState([])

useEffect(()=>{
fetch(API_LABS_ENDPOINT)
      .then((response) => response.json())
      .then((data) => setLabItems(data));
},[ ])

os métodos de ciclo de vida do React podem ser controlados por meio do hook useEffect, mais detalhes aqui

[raffaeldantass]

@ricardogouveia3 perdão, eu acabei não vendo sua mensagem anteriormente, mas é como @marcelodasilva sugeriu, se tiver alguma duvida, a gente vai tentando ajudar.
E, de fato, Hooks é sempre mais bacana pra usar haha

[ricardogouveia3]

@marcelodasilva @raffaeldantass espera, o componentDidMount não é um hook do React Hooks?

eu pensei que fosse, já que o Angular e o Vue tem lifecycle hooks parecidos... mas acho que eles não tem algo parecido com useEffect e useState...

vou dar uma lida na documentação desses hooks, apesar de acho que entendi mais ou menos como ocorre a ativação deles aí...

[ricardogouveia3]

Obrigado @marcelodasilva @raffaeldantass
implementei as mudanças convertendo o AppMain pra um function component