Forem: Gabriel Bittencourt

React router V6: Some of the new changes

Gabriel Bittencourt — Fri, 19 Nov 2021 04:11:54 +0000

So not too long ago the library React Router has updated to version 6 and with that it came with some interesting changes that I notice and see people talking about, so I'm gonna describe some of them.

If you want to upgrade the version from 5 to 6 you can by seeing this link Upgrading React Router V5 to V6

First what is React Router?

React Router is a package for routing in React.js, as the documentation said "React Router is a fully-featured client and server-side routing library for React, a JavaScript library for building user interfaces. React Router runs anywhere React runs; on the web, on the server with node.js, and on React Native."

So now that we know the basics of it, let's talk about some new changes it had.

Replacing Switch component with Routes

If you have ever used React Router you know that we need to wrap our routes into this Switch component that makes sure that only one of these routes is loaded at the same time, instead of all matching routes. Something like this



export function App() {
  return (
    <div>
      <Switch>
        <Route path="/about">
          <AboutPage />
        </Route>
        <Route exact path="/profile">
          <ProfilePage />
        </Route>
        <Route path="/profile/:id">
          <ProfileUserPage />
        </Route>
      </Switch>
    </div>
  )
}

Now with V6 we changed the name from Switch to Routes and now the Routes component has a new prop called element, where you pass the component it needs to render inside this component and be like this



export function App() {
  return (
    <div>
      <Routes>
        <Route path="/about" element={<AboutPage />} />
        <Route exact path="/profile" element={<ProfilePage />} />
        <Route path="/profile/:id" element={<ProfileUserPage />} />
      </Routes>
    </div>
  )
}

Internal changes & path evaluation (no more needed exact prop)

So with this new version some internal changes were made and the evaluation that React Router does for these paths and then picking a route to load changed. For V5 we needed to put the exact prop on the component to go for that specific route we want, like this in the Profile path below



export function App() {
  return (
    <div>
      <Routes>
        <Route path="/about" element={<AboutPage />} />
        <Route exact path="/profile" element={<ProfilePage />} />
        <Route path="/profile/:id" element={<ProfileUserPage />} />
      </Routes>
    </div>
  )
}

If we not put that exact prop it will render the path that starts with that path we pass and that's not what we wanted, now with V6 we don't need this prop anymore because React Router will always look for the exact path we pass, being like this



export function App() {
  return (
    <div>
      <Routes>
        <Route path="/about" element={<AboutPage />} />
        <Route path="/profile" element={<ProfilePage />} />
        <Route path="/profile/:id" element={<ProfileUserPage />} />
      </Routes>
    </div>
  )
}

Now let's talk about the Link component that we have, that still is on V6

NavLink activeClassName prop does not exists anymore

With that prop you could pass a class for that specific Link to be modified with some CSS to show that it's became active, like this



export function Header() {
  return (
    <header>
      <ul>
        <li>
          <NavLink activeClassName="active" to="/about" />
        </li>
        <li>
          <NavLink activeClassName="active" to="/profile" />
        </li>
      </ul>
    </header>
  )
}

With V6 you have to manually do that and you can by passing a function to the className prop we have on React, like this



export function Header() {
  return (
    <header>
      <ul>
        <li>
          <NavLink className={(navData) => navData.isActive ? "active" : "" } to="/about" />
        </li>
        <li>
          <NavLink className={(navData) => navData.isActive ? "active" : "" } to="/profile" />
        </li>
      </ul>
    </header>
  )
}

Note that the React Router provides you the navData argument and it's an object and inside has the isActive property that will be true if the route is active in that moment

The useParams hook

This hook from V5 has not changed from V6, you can still use it the same way, passing parameters to match a specific URL you're trying to match.

Well these are some of the changes React Router had, if you wanna see more of these changes you can see this video from Academind where he talks about it Here or by reading the documentation Here. I see you next time, thanks!

Loading animation with React.js + styled-components

Gabriel Bittencourt — Fri, 08 Oct 2021 23:25:06 +0000

So here we are with another post and today I'm going to show you all a way to make a loading animation for your application with styled-components. So let's jump right to it!

Creating a React app

1- First of all we are going to create a project with react and install styled-components.

# Comand to create a react app
yarn create react-app my-app
# Go to the folder you created
## And then install styled-components
yarn add styled-components

2- Second of all we create a loading component and make 2 styled elements, a LoadingWrapper and a Dot.
(I like to create a folder for the component and create 2 files a index file with the logic and a style file. That's the way I'm going to be doing)

import { Dot, LoadingWrapper } from './styles'

export default function Loading() {
  return (
    <LoadingWrapper>
      <h3>Loading</h3>
      <Dot />
      <Dot />
      <Dot />
    </LoadingWrapper>
  )
}

3- Okay now we got our Loading component, so let's go to the styles we are going to be using and import then into our file.

import styled from 'styled-components'

export const LoadingWrapper = styled.div`
  display: flex;
  align-items: flex-end;
  justify-content: center;
`

export const Dot = styled.div`
  background-color: black;
  border-radius: 50%;
  width: 0.75rem;
  height: 0.75rem;
  margin: 0 0.25rem;
`

4- So what we have until now, just the word "Loading" with 3 dots on the side. Now we are going to be making the animation itself. (You can make the animation on the same file of the style for the Loading component or create a file separated)

export const BounceAnimation = keyframes`
  0% { 
    margin-bottom: 0; 
  }

  50% { 
    margin-bottom: 1rem;
  }

  100% { 
    margin-bottom: 0;
  }
`

5- With the animation in hands we need to add it on the Loading styles and we can make something that's pretty cool with styled-components and that is passing props to the component. So let's go to it.

// If you made the animation in a different folder
// you need to import it
import { BounceAnimation } from ''

export const Dot = styled.div`
  background-color: black;
  border-radius: 50%;
  width: 0.75rem;
  height: 0.75rem;
  margin: 0 0.25rem;
  /*Animation*/
  animation: ${BounceAnimation} 0.5s linear infinite;
  animation-delay: ${(props) => props.delay};
`

6- And last but not least add the delay prop to the Dot component in the Loading folder.

import { Dot, LoadingWrapper } from './styles'

export default function Loading() {
  return (
    <LoadingWrapper>
      <h3>Loading</h3>
      <Dot delay="0s" />
      <Dot delay="0.1s" />
      <Dot delay="0.2s" />
    </LoadingWrapper>
  )
}

And TADA 🎉 you have a animated Loading component just like this:

mine is styled a little bit different but the animation is just like that
Now I'm leaving...

And you have a animated Loading component to use through out your applications and go crazy with it, you can use this with Typescript too if y'all want I can make another post about it, See you next time, peace!

Axios: My experience with the library.

Gabriel Bittencourt — Fri, 08 Oct 2021 04:23:17 +0000

Hey everyone and today I'm going to talk about my experience with the library axios, that makes the life off all developers, easier.

But wait, what is 'axios'??? Well from what I know and see others say axios is a promise based HTTP library, that makes api calls, like fetch, and gives you the response data direct, without all those .then(), basically it does that. Now I'm gonna show some ways I learned to use it.

First way I learned to use it

From the start the way you fetch data is simpler and direct, like the code below:

import axios from 'axios'

function Foo() {
  useEffect(() => {
    async function handleAPI() {
      const response = await axios.get('URL-YOU-WANT-TO-GET-DATA')
// From this variable you can store it on some state 
// and you're good to go
    }
  })

This is some way you can use it, but there is some better ways to do it

Second approach, and the way I use

After using this library some times I started to see others use it and from what I could see, and the way it better fits me, is creating a folder and using it's create method, like below:

import axios from 'axios'

const api = axios.create({
// This baseURL is the domain URL from the api
  baseURL: 'THE-DOMAIN-URL-FROM-THE-API',
})

export default api

And that's it you can import the file api from where you need, and just pass like this:

async function handleApiCall() {
  const response = await api.get('Here you can pass the route you want')
  setSomeStateHere(response.data)
}

And from here I say goodbye to you all

I'm gonna leave the link below for the docs of the axios and you can feel free to see my github, you can see some projects that use axios!
Github Profile
Axios Docs

Meu primeiro hackathon!

Gabriel Bittencourt — Thu, 07 Oct 2021 00:45:19 +0000

Salve devs, hoje eu venho falar da minha experiência em ter participado do meu primeiro hackathon feito pelo Grupo FCamara como parte do programa de formação deles.

Foi uma oportunidade muito boa para mim já que ainda não tenho contato com o mercado de trabalho de tecnologia e estou em transição de carreira, e com certeza me ajudou a entender como o trabalho de um programador é, tendo uma equipe de devs, designers e metodologias ágeis como SCRUM.

Assim eu lhes apresento nosso projeto, o Orange Space!!!

Este foi o nome dado ao nosso projeto e ele é um sistema de agendamento para a volta do trabalho presencial nas empresas mas de forma organizada e respeitando os cuidados necessários contra a COVID-19.
Ele consiste em um sistema de login/cadastro, uma dashboard e também uma tela de primeiro acesso.

Tela de Login/Cadastro

Tela de Primeiro acesso

Tela da Dashboard

E aqui no final eu me despeço de vocês 👋🏽!

e deixo alguns links para vocês acessarem a aplicação que está na Vercel, o link do repositório no Github e nosso artigo que foi publicado no Medium
Link para a aplicação
Link para o repositório
Link para o artigo

Técnica para você mudar de pixels(px) para rem!

Gabriel Bittencourt — Tue, 06 Jul 2021 13:25:41 +0000

Hoje eu vim falar um pouco de uma técnica que achei super importante e prática para o dia a dia, mas primeiro o que seria rem?

Bem para trazer uma breve explicação, rem significa "The root element's font-size", ou em português, "O tamanho de fonte raiz do elemento".
Tá, mas o que isso quer dizer???

Muito simples! Essa medida se refere ao tamanho do elemento raiz, o root, e ele pode ser alterado via CSS dessa maneira:

:root {
    font-size: 100%; // 100% = 16px
}

Agora vem o truque que vai facilitar sua vida!!!

Como nos podemos alterar esse valor, e 100% é igual a 16px, seria muito mais fácil trabalhar com essa unidade se fosse por exemplo, 10px e a gente pode alterar pra ser 10px! E eu mostro pra você como fazer isso: (Porém cuidado ao usar, pois ela é afetada diretamente pelo zoom e pelas configurações do usuário)

// Se usarmos uma simples regra de 3 podemos fazer esse calculo
//16px - 100%
//10px - ?
// E o resultado disso é...
:root {
    font-size: 62.5%; // 62.5% = 10px
}
// Utilizando dessa maneira
body {
    margin: 1.2rem .8rem; // Que seriam 12px e 8px, respectivamente 
}

Considerações finais

Eu posso dizer que esse método é muito bom até porque a unidade rem acaba sendo responsiva o que é mais um ponto forte para a sua utilização, e se você tem alguma outra maneira ou alguma "gambiarra" conta ai pra mim! 🤭

Uma saída para a adição de Dark Mode.

Gabriel Bittencourt — Mon, 05 Jul 2021 04:22:42 +0000

Minha recém experiência com dark mode

Em meu ultimo projeto que fiz que pode ser encontrado aqui.
Eu me coloquei na situação de utilizar e construir um dark mode para a minha aplicação, sendo essa minha primeira vez e vi que existem diversas maneiras de fazer isso, então resolvi mostrar a que eu achei, e achei deveras 'fácil' de implementar:

Passo a passo desta utilização

Primeira etapa

Pegar o elemento que irá causar o evento de troca de temas para o js (DOM)
// Pode ser um input de toggle ou um botão, o que você achar melhor xD
const alteraTema = document.querySelector('nomeDoSeuAlterador')

// Então vamos adicionar um evento à ele
alteraTema.addEventListener('change', () => {})

Segunda etapa

Primeiro vamos criar uma função assim
const darkMode = () => {} // Podendo ser arrow function ou não, vai da sua escolha

Terceira etapa

Depois vamos criar uma variável e pagar o elemento body da aplicação
const darkMode = () => {
    var element = document.body // O nome da variável pode ser qualquer um da sua escolha
}

Quarta e ultima etapa

Vamos adicionar uma classe para o body da nossa aplicação podendo assim estilizar ela com o tema dark e usar o um botão para a troca de temas
const darkMode = () => {
    var element = document.body
    element.classList.toggle("dark-mode")
}

Considerações finais

Em minha opinião achei bem simples de fazer essa parte da aplicação e deixo aqui pra vocês trazerem mais meios de fazer essa adição do tema dark, quais métodos vocês usam?