Componentes Estilizados
styled components
É uma biblioteca para React/React Native,
que permite o uso de estilos a nivel componentes.
É baseado em JavaScript com CSS.
Principais vantagens:
* Evita erros de nomes de classe.
* Exclussão mais fácil de CSS:
-> Se excluir um componente não usado, todos os seus estilos serão excluidos juntos.
* Há uma ferramenta para detectar se o componente está ou não sendo usado.
* Fácil manutenção.
* Documentação:
https://styled-components.com/docs
Principais Vantagens
Principais Vantagens
* Evita erros de nomes de classes, tem nomes exclusivo para cada estilo.
* Para excluir é muito mais fácil,...
* Fácil manutenção.
* Só injeta os estilos necessário, ou seja diminui a quantidade de código carregado.
-> isso quando o usuário abrir a página.
* Adaptação de estilo de um componente bem é simples e intuitivo,
sem precisar gerenciar vários lugares, dezenas de classes.
* Documentação:
https://styled-components.com/docs
Instalando Styled Components
Vamos instalar usando o Node.js, tem que está na versão acima da 9.
Verifique se você possui o Node.js e npm, instalado em seu computador.
No Vscode, abra uma pasta, depois abra o terminal do VScode e digite esses comandos:
Instalar usando o NPM
npm install create-react-app
dê enter e vai começar a instalar .
* Criação do Projeto, use um dos dois comandos para criar o projeto:
npm init react-app *meu-app
*nome do seu projeto.
npx create-react-app *meu-app
*nome do seu projeto.
* Instalando o styled components:
-> Importante verificar se você está dentro da pasta do seu projeto, que você acabou de criar.
npm install styled-components
* Para rodar/iniciar o projeto:
npm start
* Para Fechar a conexão, encerrar o projeto:
ctrl + c teclas control + C
Como usar o Styled Components
** Exemplo de uso:
// Para importa
import styled from 'styled-components';
// Declara a variável, será constante por que não terá alteração.
const Title = styled.h1`
_____color: red; => vai receber essa cor
`;
* lembre-se desses sinais, é -> `` e -> ;
// Na hora de usar, você vai usar ela como uma tag
< Title > Página 01 < /Title >
Vamos ver isso na prática com ajuda de imagens do código:
* Primeiro vamos importa o styled no arquivo App.js
* Criar um exemplo simples de uma página HTML:
Veja o exemplo na imagem abaixo:
Note que as tags possui nomes diferentes do que normalmente é colocado, serão variáveis.
Agora vamos declarar as variáveis, do tipo const constante.
Veja o exemplo na imagem abaixo:
Styled Components exemplo mais completo
Vamos criar outro projeto, com outras páginas e dá mais detalhes.
Criando projeto:
* No VScode, escolha uma pasta onde será criado, abra o Vscode nessa pasta.
* Agora abra o terminal e digite esses comandos:
npm install create-react-app
npm init react-app *meu-app *nome do seu projeto.
* Instalando o styled components:
-> Importante verificar se você está dentro da pasta do seu projeto, que você acabou de criar.
npm install styled-components
Veja o print do VScode, dos arquivos que foram criados:
Agora vamos criar dentro da pasta "src", uma pasta chamada components .
Dentro dela vamos criar os arquivos: footer.js e header.js
Veja na imagem como foi criado, o arquivo footer.js:
Agora veremos os detalhes:
Aqui será importado o React e o Styled para serem usados aqui.
variável "Rodape", vai receber a tag => "p" e as configurações CSS.
variável Footer, que será a tag "footer" e que vai receber a variável "Rodape"
Por fim você exporta tudo isso:
export default Footer;
Finalizamos a criação do arquivo "footer.js"
Para criar o arquivo "header.js" é praticamente igual, mudando algumas palavras.
Veja na imagem o print do código:
Criando as páginas
Agora dentro da pasta "src", iremos criar outra pasta com o nome "pages".
Dentro da pasta "pages", vamos criar 3 arquivos .js :
sobre.js
Veja na imagem o print do código:
As outras são praticamente iguais.
contato.js
Veja na imagem o print do código:
home.js
Veja na imagem o print do código:
Agora vamos criar o index.js, que é onde está definido as rotas de acesso.
Veja na imagem abaixo como fica o códgio:
Criaremos agora o App.js:
Veja na imagem abaixo como fica o códgio:
Neste trecho, estão sendo importados vários módulos necessários para o funcionamento do aplicativo, incluindo o React, estilos do PrimeReact, componentes personalizados (Header e Footer), componentes do PrimeReact (Menubar) e utilitários do React Router (withRouter) para fornecer as propriedades de roteamento para o componente.
2 parte do código:
Aqui, é definido um componente estilizado usando a biblioteca styled-components. Esse componente, chamado DivMain, é estilizado para ter uma cor de texto preta e um tamanho de fonte de 10px.
3 parte do código:
* Para rodar o programa: npm start .
Veja como fica a página depois de tudo que criamos:
