React: gerenciamento de estados globais com Redux

Desenvolva no Create React App - Apresentação

Olá, seja bem-vindo ao curso de Redux. Meu nome é Luiz Fernando, eu sou instrutor aqui na Alura. Neste curso vamos fazer o Trato Thec, que é um projeto em que conseguimos adicionar itens de categorias diferentes no carrinho, conseguimos filtrar esses itens para conseguirmos ver o que queremos, mudar a quantidade deles, favoritar ou não.

Neste curso, vamos utilizar o Redux, teremos um reducer de categorias, você vai aprender o que é um store, um reducer, actions, dispatch, o que é o type do action, o que é o payload do action, tem várias nomenclaturas que você vai entender. Você vai entender porque o Redux utiliza imutabilidade, porque ele utiliza o immer para fazer isso.

E, se você clicar em uma categoria, você consegue ver vários itens dessa categoria, nós vamos aprender, na verdade, aqui são dois reducers, é reducer de categorias e um reducer de itens, filtrando por essa categoria, tem o próprio reducer da busca aqui. Se filtrarmos por tablet, por exemplo, conseguimos ver só o tablet nessa página.

Se formos para o carrinho, por exemplo, o filtro, ele é apagado. Se quisermos escrever outra coisa aqui, conseguimos filtrar dentro do próprio carrinho os itens dentro deste carrinho. Ele é bem funcional, porque é o mesmo input funcionando em duas telas diferentes. Então conseguimos fazer tudo isso com Redux. Conseguimos mudar a quantidade, favoritar ou desfavoritar, e eles são reaproveitados de página em página.

Com isso você vai aprender a como utilizar o Redux da melhor forma possível, aproveitando das melhores práticas, e você conseguirá entrar no mercado de trabalho com uma ferramenta muito potente, que é o Redux, que foi a primeira ferramenta que foi utilizada para controle de estado global no React. Eu te vejo no curso.

Desenvolva no Create React App - Create React App

Você encontra os pacotes, arquivos e orientações para continuar o curso na atividade de "Preparando o Ambiente" neste link.

Para começar, precisamos criar o nosso projeto. Eu vou criar o projeto com o Yarn, você precisa ter o Yarn e o Node instalados. Aqui eu já estou com o meu terminal aberto, você pode estar com qualquer terminal da sua preferência, eu estou utilizando o Git Bash, que é do próprio Git, e eu vou escrever o comando yarn create react-app, porque ele é um pouco diferente do NPM.

O NPM é create-react-app tudo com traço, esse é create react-app. Eu vou chamar o nosso projeto de yarn create react-app trato-tec. Eu não vou utilizar nenhum template, tipo TypeScript ou qualquer outra coisa, porque queremos ver isso na prática, queremos ver isso começando a funcionar.

Então ele vai criar com o JavaScript mesmo, existe até um template para Redux, mas como queremos começar do zero, queremos ver isso funcionando, vamos fazer dessa forma, que vai nos desafiar um pouco mais. Assim que acabar a instalação nós voltamos. Já instalou aqui todos os nossos pacotes, já criou o nosso projeto.

Se pensarmos, ele já está até dizendo aqui, ele sugere entrarmos na pasta "trato-tec", que ele criou, e depois executarmos yarn start. Eu vou fazer isso, só que um pouco diferente. Primeiro eu vou entrar na pasta, cd trato-tec. Aqui eu vou escrever code ., para abrir com o VSCode, isso nós já estamos acostumados.

Agora eu vou executar yarn start, que ele já vai executar o projeto para nós automaticamente, que é isso que o create app faz. Ele já iniciou, está com aquela página padrão do React. Agora vamos limpar o projeto, o que também já estamos nos acostumando a fazer.

Vou voltar para o VSCode, eu vou abrir a pasta "src > index.js", no menu lateral. Aqui eu já vou remover algumas coisas. Eu vou remover o reportWebVitals, eu vou remover o componente <App />. Eu vou excluir as importações. O import './index.css'; pode deixar. No <React.StrictMode> eu vou criar uma <div> e vou escrever Hello world, para não perdermos o costume.

Eu vou excluir o "setupTests.js", que tem na root da aplicação, o "reportWebVitals", o "logo.svg", que não vamos utilizar mais, o "App.js", o "App.Test.js" e o "App.css". Vamos voltar para ver se ainda está funcionando. O nosso "Hello world" está aparecendo na tela, deixa eu até dar um zoom para você poder ver.

Agora vamos voltar e limpar a pasta "public" também, que tem várias coisas que não vamos utilizar. Não vamos utilizar esse "favicon.ico", teremos outro no futuro. Não vamos utilizar essas duas logos, então eu vou excluir também. Não vamos precisar desse "manifest.json" também e não vamos precisar desse "robots.txt" também.

No "index.html" eu vou remover esse link que tem o manifest e que tem o logo, então da linha 12 até a linha 26. Esse favicon vamos utilizar no futuro, então vamos deixar. Vou remover esse comentário da linha 18 até a linha 26. E ao invés de React App eu vou escrever Trato Tech.

Vou voltar para o navegador, já está escrito "tratotech", já tem o nosso "Hello world", agora ele já está bem condensado, já está, exatamente, só com o que precisamos. Agora, nos próximos vídeos, vamos começar a criar o nosso Trato Tech, o nosso projeto, eu te vejo lá.

Desenvolva no Create React App - Criando o navbar

Trechos de códigos mencionados durante o vídeo, compartilhados via GitHub para serem inseridos nos arquivos index.css - consulte aqui,_breakpoints.scss - consulte aqui e Navbar.modules.scss - consulte aqui

A primeira parte do projeto, que vemos quando entramos na página, é o navbar, então é isso o que vamos começar a fazer. Vamos abrir o código, eu vou abrir a pasta "src". Como o navbar, ele aparece em várias partes do projeto, eu vou criar uma pasta "components". Dentro da pasta " components" eu vou criar uma nova pasta, chamada "Navbar", que será o nosso navbar, com N maiúsculo.

Eu vou criar um novo arquivo, dentro deste "Navbar", chamado "index.js". Aqui dentro eu vou escrever export default function Navbar(), com N maiúsculo, igual criamos no nome da pasta. Eu vou dar um return( em uma tag <nav>. Aqui eu vou escrever navbar por enquanto, só para vermos aparecendo.

Dentro do "index.js" do root, "src > index.js", ao invés de Hello world, eu vou tirar essa <div> Hello world</div> e eu vou escrever <Navbar />. Ele já vai importar automático para mim de ".\components\Navbar". Eu vou auto fechar ele e vou voltar para o navegador, para ver funcionando. Está escrito "navbar", então já criamos o nosso componente.

Agora precisamos estilizar o nosso navbar. Para isso eu vou utilizar o sass aqui dentro. A primeira coisa que eu vou fazer é instalar os pacotes que vamos utilizar neste projeto. Por enquanto eu só vou instalar dois. Eu vou apertar "Ctrl + ' ", e aqui eu vou escrever yarn add, que é a mesma coisa do npm install só que com o Yarn é yarn add. Eu vou instalar o yarn add sass classnames.

Por que eu vou instalar o classnames também? Porque como vamos utilizar o sass, o sass precisa utilizar o classname do React para poder funcionar. Só que também teremos classes condicionais, e para não precisar utilizar aqueles templates strings feios, vamos utilizar desta forma.

Já instalou, eu vou apertar "Ctrl + ' " para fechar o terminal. Agora eu vou, antes de começar a estilizar o navbar, eu vou abrir o "index.css", que é o CSS do root e eu vou copiar algumas coisas aqui, para não ficarmos perdendo tempo. Eu vou colar, isso vai ficar na descrição. A única coisa que eu fiz aqui foi colocar um box-sizing: border-box em tudo, eu coloquei o background-color no body, para ele não ficar aquele branco muito forte.

Coloquei a font-family: 'Montserrat', normal, tirei o border do input, que não vamos precisar, e tirei o overflow, aquele scroll que fica horizontal se acontecer alguma coisa. Vou fechar o "index.css", já está funcionando. Agora eu vou criar uma pasta em "src", chamada "styles".

Então "src", criei uma pasta "styles" e eu vou copiar e vou colar um arquivo aqui, que eu também vou deixar na descrição, que é um arquivo de "breakpoints". Ele nada mais faz do que criar duas variáveis de breakpoints, que vamos utilizar durante o nosso CSS. Eu só coloquei uma de tablet e uma de mobile pequeno, para termos a lista da responsividade, tudo isso funcionando.

Então já está criado. Agora eu vou voltar para "components\Navbar > index.js” e aqui dentro eu vou criar um novo arquivo, chamado "Navbar.module.css". Vou copiar também o CSS daqui. Eu estou importando o breakpoints que acabamos de pegar. E aqui eu estou fazendo algumas coisas.

Primeiro eu tenho uma classe .nav, que eu utilizo o grid, porque quando ele for responsivo eu quero que em vez de aparecer primeiro a logo, depois os links que vamos utilizar, depois a busca, depois os ícones, queremos colocar a logo em cima, o link e os ícones no meio e a busca embaixo, para ficar bonito.

Nós estamos utilizando o mobile-sm, estamos utilizando o tablet, que são aqueles breakpoints que nós criamos, e alguns outros estilos. Não vou entrar muito em detalhes. Agora eu vou voltar em "Navbar" e começaremos a colocar a estilização aqui dentro. Dentro do <nav eu vou criar um <nav classname=()>.

Teremos que importar o nosso styles, então na linha 1 eu dei dois espaços e vou escrever import styles from './Navbar.module.scss';. No <nav classname={}> eu vou colocar {styles.nav}, que se eu voltar em "Navbar.module.css", é esse .nav, porque estamos utilizando o scss modules, o sass module.

Aqui, a primeira coisa que teremos é a nossa logo, só que ainda não temos a nossa logo importada. Então dentro de "src" eu vou criar uma nova pasta, chamada "assets" e eu também vou pegar a logo que eu já tenho, que eu também vou deixar na descrição. É só você pegar a logo e importar que ele vai funcionar.

A logo está aqui, é só você baixar e colocar dentro do "assets". Nós vamos utilizar o SVGR do próprio create react app para poder importar essa logo. Vou colocar import { ReactComponent as Logo} from '../../assets/logo.svg';. Dentro do <nav eu vou colar essa logo, que nós importamos o React Component como um componente chamado Logo, então é assim que utilizamos.

Dentro dele teremos um <Logo className={styles.logo} />. Até aqui tudo certo, vamos ver se está funcionando, vou voltar no navegador. Ele está dando alguns problemas, vamos ver. Ele está dizendo que ele não consegue encontrar o import do styles/breakpoints. Por que isso? Porque utilizamos o import absoluto e não o import relativo.

Por que ele não está funcionando com o import absoluto? Porque não avisamos para o create react app que estamos fazendo o import absoluto e onde ele deve considerar o começo desse import absoluto. Então vamos fazer isso, eu vou criar um novo arquivo no root.

Na verdade, antes do "src", onde tem "package.json", "yarn.lock", onde tem esses arquivos antes do "src", eu vou criar um arquivo chamado "jsconfig.json". Eu vou colar essas informações aqui. O que ele faz? Ele está dizendo aqui que as opções de compilador, teremos uma URL base, que é o "src" e vamos incluir o "src" no "jsconfig.json" para ele poder reconhecer.

Nisso ele já está dizendo que o nosso impor absoluto, quando colocamos sem um path, sem um "../../", ele vai considerar começando do "src", então isso já vai funcionar, já vai nos resolver. Vou voltar para o nosso navegador, vamos dar um "F5". Por enquanto ele não está funcionando, só que eu vou rodar o código de novo.

Eu vou voltar no nosso terminal, vou apertar "Ctrl + C" para fechar e vou escrever yarn start para começar de novo. Já começou, não dá para ver no navegador, porque ele ainda não está azul, só que já temos a logo aparecendo, já conseguimos ver o SVG. Deixa eu dar um zoom aqui. Ele não vai aparecer.

Deixa eu mudar o estilo do HTML, vou botar um "background-color" de cinza. Já está aparecendo a nossa logo ali. Então já temos o navbar e a logo. Agora, nos próximos vídeos, continuaremos estilizando o nosso navbar e depois nós vamos criar o nosso header para começarmos a fazer com que o nosso nav deixe tudo bonito. Eu te vejo lá.

Sobre o curso React: gerenciamento de estados globais com Redux

O curso React: gerenciamento de estados globais com Redux possui 187 minutos de vídeos, em um total de 52 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Desenvolva no Create React App
• Crie um Header
• Aplique o Redux
• Crie as Actions
• Crie o carrinho de compras
• Faça o cálculo total