Javascript

Tutorial ReactJs (Parte 2) : Configurando o Sass no React.

5 Minutos de Leitura
Logo do react e do Sass
Logo do react e do Sass
Logo do react e do Sass

Dando prosseguimento a nossa série de tutoriais React JS do Zero, hoje vamos te ensinar como configurar e utilizar o Sass no REACT JS.

O que é o Sass ?

O Sass é um pré processador de CSS, que nos permite fazer muitas coisas além das que estamos habituados a fazer quando o assunto é estilização do nosso projeto.

Com ele, podemos separar o nosso estilo em módulos, criar funções, implementar lógica de programação, e muito mais. Se você não ainda não conhece o Sass, chegou a hora de aprender como integrar o Sass no REACT JS.

O Programadores Brasil em parceria com o canal Speak Up Tech, preparou uma série de tutorias onde você irá acompanhar a criação de um contador de inscritos do canal todo desenvolvido em React Js e estilizado com o Sass.

Veja também: [+] Livros de ReactJS para iniciantes com super desconto na Amazon.

Se você ainda não fez a parte inicial de criação da aplicação React, organização de diretórios e inicialização de componentes, da uma conferida no nosso primeiro tutorial da série, o Tutorial ReactJS do Zero: Criando um contador de inscritos do Youtube e depois volta aqui pra seguir com Tutorial ReactJs: Configurando o Sass.

Antes de começar, não se esqueça de ir lá no canal do Speak Up Tech no Youtube e inscreva-se ! Clique aqui e acesse.

Confira o vídeo completo e abaixo o conteúdo em texto, com os códigos:

Seguindo…

Tutorial ReactJs: Configurando o Sass no React JS

O Sass, por ser um pré processador de CSS, precisa ser “transpilado” para a linguagem original, o CSS.

Com isso, é necessário utilizar um compilador para integrar o Sass no React JS. Para tal, devemos então instalar, pelo terminal, a biblioteca node-sass em nosso projeto, através do comando abaixo:

npm install node-sass

Enquanto nossa biblioteca está sendo instalada, vamos relembrar como está a estrutura de pastas e arquivos do nosso projeto?

Estrutura de arquivos do projeto.

No tutorial anterior já criamos os arquivos “styles.scss” de cada componente, como podemos ver na imagem.

Contudo, agora, para utilizar o Sass no React, vamos criar um arquivo chamado “global.scss” e outro “_conf.scss” dentro do caminho ./src/assests/scss/.

Nestes arquivos iremos criar algumas configurações inicias para as nossas aplicações e alguns estilos globais.

No arquivo “_conf.scss” iremos inserir o esquema de cores da aplicação, os “breakpoints” e os “mixins”.

A propósito, Breakpoints são pontos de quebra onde o layout será ajustado para atender diferentes resoluções. A partir destes pontos é possível estabelecer comandos CSS para que o site se comporte de forma adequada visualmente para cada dispositivo.

E Mixins são estruturas do Sass que permitem definir estilos que podem ser reutilizados em qualquer parte do projeto, sem a necessidade de recorrer a classes não semânticas. Mixins podem também conter regras completas de CSS e quaisquer outras coisas permitidas em um documento Sass.

Iniciando as variáveis e breakpoints (Tutorial Sass no React)

Inicialmente no arquivo “_conf.scss” vamos criar então variáveis com as cores principais do projeto:

/*|---------------| App Color Schema|---------------*/
$BLUE: #00376C;
$PINK: #B51942;
$GRAY: #707070;

Em seguida vamos também configurar os breakpoints logo abaixo das variáveis:

/*|---------------| App Color Schema|---------------*/
$BLUE: #00376C;
$PINK: #B51942;
$GRAY: #707070;

/*|---------------| BREAKPOINTS|---------------*/

// Usage example:  @media #{$BREAKPOINT-DESK}

$BREAKPOINT-DESK: "only screen and (min-width: 1280px)";
$BREAKPOINT-TABLET-LAND: "only screen and (min-width: 975px)";
$BREAKPOINT-TABLET: "only screen and (min-width: 600px)";
$BREAKPOINT-MOBILE-LAND: "only screen and (min-width: 480px)";

Por último, vamos criar um Mixin para configurar uma margem padrão para a nossa aplicação:

/*|---------------|App Color Schema|---------------*/
$BLUE: #00376C;
$PINK: #B51942;
$GRAY: #707070;

/*|---------------|BREAKPOINTS|---------------*/

// Usage example:  @media #{$BREAKPOINT-DESK}

$BREAKPOINT-DESK: "only screen and (min-width: 1280px)";
$BREAKPOINT-TABLET-LAND: "only screen and (min-width: 975px)";
$BREAKPOINT-TABLET: "only screen and (min-width: 600px)";
$BREAKPOINT-MOBILE-LAND: "only screen and (min-width: 480px)";

/*|---------------|MIXINS|---------------*/

@mixin margin-page {
  width: calc(100% - 40px);
  margin: 0 auto;

  @media #{$BREAKPOINT-DESK} {
    max-width: 1000px;
  }
}

Iniciando os estilos globais

Agora que temos algumas configurações inicias necessárias já preparadas vamos inicializar alguns estilos globais, ou seja, estilos que devem influenciar toda nossa aplicação, estruturas principais do projeto, independente dos componentes.

Uma configuração legal de fazermos inicialmente como estilo global é remover todas as margens, pois em grande parte dos navegadores algumas Tags principais do HTML como o <body>, quando não estilizadas já inicializam com margens pré configuradas.

Veja também: [+] Livros de ReactJS para iniciantes com super desconto na Amazon.

Por isso, dentro do nosso arquivo “global.scss” vamos inserir então o seguinte estilo:

* { 
 margin: 0; 
 padding: 0; 
 outline: 0; 
 -webkit-box-sizing: border-box; 
 -moz-box-sizing: border-box; 
 box-sizing: border-box;
}

Em seguida podemos também configurar nossa fonte utilizada no projeto. Para isso, vamos pegar os estilos de fonte Roboto Regular e Roboto Black no Google Fontes e importar no nosso “global.scss” da seguinte forma:

@import url('https://fonts.googleapis.com/css2?family=Roboto:[email protected];900&display=swap');

* { 
 margin: 0; 
 padding: 0; 
 outline: 0; 
 -webkit-box-sizing: border-box; 
 -moz-box-sizing: border-box; 
 box-sizing: border-box;
}

Seguindo a configuração da fonte vamos então indicar que todo nosso projeto irá utilizar a fonte desejada e a cor da fonte através do código abaixo:

@import url('https://fonts.googleapis.com/css2?family=Roboto:[email protected];900&display=swap');

* { 
 margin: 0; 
 padding: 0; 
 outline: 0; 
 -webkit-box-sizing: border-box; 
 -moz-box-sizing: border-box; 
 box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  color: $GRAY;
}

Por fim, vamos estilizar nossa classe principal do projeto para utilizar a margem padrão que criamos para a aplicação:

@import url('https://fonts.googleapis.com/css2?family=Roboto:[email protected];900&display=swap');

* {
  margin: 0;
  padding: 0;
  outline: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  color: $GRAY;
}

.App {
  @include margin-page;
}

Refletindo nossos estilos na aplicação

Para inicializar nossos estilos e fazer eles refletirem na aplicação vamos criar um arquivo principal que irá importar todos os estilos que temos na aplicação e depois então iremos importar esse arquivo principal no “index.js” que fica localizado na raís do projeto.

Portanto, vamos criar o nosso arquivo principal de estilos dentro do caminho ./assets/scss/ e chamá-lo de “Main.scss”. Depois de criá-lo vamos importar então todos nossos estilos da seguinte forma:

//general conf and vars
@import "./_conf";
@import "./global";

//components
@import "../../components/Header/styles.scss";
@import "../../components/Progress/styles.scss";
@import "../../components/Footer/styles.scss";

//pages
@import "../../pages/Home/styles.scss";

Por fim, vamos no nosso “index.js” na pasta ./src e importar o nosso “Main.scss”:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import "./assets/scss/Main.scss"

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Pronto, agora nossos estilos inicias do Tutorial ReactJs: Configurando o Sass está concluída e você poderá seguir para as próximas fases da série como o desenvolvimento da Home page e o desenvolvimento dos componentes do nosso contador de inscritos.

Veja também: [+] Livros de ReactJS para iniciantes com super desconto na Amazon.

Veremos nos próximos textos este prosseguimento. Portanto, siga nosso Twitter (prog_brasil)

Curtiu? O Speak Up Tech preparou um vídeo passando por todo esse processo.

Entra lá e se inscreve no canal que você poderá acompanhar a configuração e inicialização dos estilos Sass na prática, além de poder acompanhar todos os próximos passos desta série de dicas.


Siga o Programadores Brasil no Google Notícias e Receba Notícias de Tecnologia -> CLIQUE AQUI e Confira.


Mais Lidas da Semana

Veja o ranking das linguagens de programação mais utilizadas no 3º trimestre de 2021

Javascript Online: Top 5 Melhores Sites para programar

[Iniciantes] Aprenda a Como Fazer ForEach em Javascript

Next.js: Conheça o Framework para ReactJS

[Iniciantes] Java e JavaScript - Entenda as diferenças

No.js - Conheça a Biblioteca que te ajuda "a fugir" do Javascript

Tutorial ReactJS (Parte Final): Desenvolvendo o Footer

ReactJs (Parte 5): Criando o Header responsivo do contador de Inscritos

Tutorial React (Parte 4): Progress Bar CSS

Tutorial React (Parte 3) : Desenvolvendo a Página Principal

Deixe o seu comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *