ricardogouveia3 / rcrd-labs Goto Github PK
View Code? Open in Web Editor NEWLista de experimentos web de minha autoria
Home Page: https://labs.rcrd.me
Lista de experimentos web de minha autoria
Home Page: https://labs.rcrd.me
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.