DEV Community: Rilton Bispo

Axios em React: como fazer requisições HTTP de forma fácil

Rilton Bispo — Fri, 31 Mar 2023 02:19:05 +0000

AXIOS

Axios é uma biblioteca de requisições HTTP no React. Para usá-la, primeiro você precisa instalá-la com o seguinte comando:
npm install axios
Em seguida, você pode importá-la no seu projeto:
import axios from ‘axios’;

Para fazer uma requisição GET, utilize o seguinte código:

getAllPosts: async () => {
  let response = await axios.get(`${BASE}`)
  return response.data
}

Para fazer uma requisição POST, utilize o seguinte código:

addNewPost = async (title, body, userId) => {
  let response = await axios.post(`${BASE}/posts`, {
    title,
    body,
    userId
  })
  return response.data
}

É possível criar instâncias personalizadas do Axios com configurações específicas:

const http = axios.create({
  baseURL: ‘https://jsonplaceholder.typicode.com’
})

Para fazer uma requisição GET utilizando a instância personalizada, utilize o seguinte código:

getAllPosts: async () => {
  let response = await http.get(`/posts`)
  return response.data
}

Simplificando a navegação em React com rotas

Rilton Bispo — Fri, 31 Mar 2023 02:18:01 +0000

React Router

Geralmente fazemos as configurações dentro do index.tsx, para ter acesso aos recursos de rotas precisamos encapsular tudo dentro doBrowserRouter

Route

No Route colocamos um atributo path="/", que é o endereço da rota apos o endereço da pagina. E tambem colocamos o element={}.

404

Para criar rota de 404 colocamos path'*' ao final de todas as rotas

Link

Para uma navegação melhor dentro do site utilizamos o componente Link para direcionar as paginas, colocamos a propriedade to:'/'.

Rota Dinamica

Podemos ter uma rota dinamica como camos ':' antes da variavel dinamica, isso é chamado de parametro. Ex: path: '/album/:albumId'.

Podemos capturar esse parametro usando o Hook useParams

const { albumId } = useParams<{ albumId: string }>();

É recomendado uar o ? antes do parameto pois isso ja fara uma verificação.

useNavigate

É um hook usado geralmente quando queremos voltar uma pagina.

const navigate = useNavigate()

const handleBackButton = () =>{
 navigate(-1)
}

<button onClick={handleBackButton}>voltar</button>

Query String ?

Query string é uma parte de uma URL que contém dados que são enviados do cliente.
https://www.example.com/search?q=apple&category=fruits
Para capturar os queryString usamos o hook useSearchParams,
searchParams.get('q')

Rotas privadas

Para criar uma autentificação nas rotas privadas, primeiro criamos um componente que fara esse autentificação, e colocamos o componente que vai ser renderizado como um children, se a validação passar retornamos o children se nao retornamos um null.
element={<Autentificacao><Componente /></Autentificacao>}

Aprenda a usar hooks em React em poucos minutos

Rilton Bispo — Fri, 31 Mar 2023 02:15:55 +0000

HOOKS

Hooks são códigos prontos que simplificam o desenvolvimento. O estado é uma informação que o componente usa.

useState

O useState é um hook do React que permite manipular o estado de um componente de maneira fácil.

State Lift

useEfects

O hook useEffect é usado para monitorar as alterações em um elemento. Ele recebe como parâmetro uma função e um array. A função contém o código que será executado quando o elemento for atualizado ou criado, e o array inclui o elemento que será monitorado. Se houver alguma mudança, o hook useEffect irá reagir e executar a função correspondente.

useEffect(() => {
  document.title = `Você clicou ${count} vezes`;
}, [count]);

useReducer

O Reducer é uma alternativa ao useState, é recomendado usar quando vamos manipular listas, objetos...
const [state, dispatch] = useReducer(reducer, initialState)

state:

é aonde temos acesso as informações

dispatch:

é uma função, que quando executada recebe como parametro um objeto com um type, que indica a ação a ser feita dentro do reducer
<button onClick={() => dispatch({type: 'ADD'})}>

useReducer:

receber como parametro 1 função e os valores iniciais

reducer:

sempre vai receber 2 parametros, 1° o valor atual do reducer(state); 2° a função que vai executar(action)
const reducer = (state, action) => {}
a função reducer faz as alterações com base no action, e no final retorna o novo state.

para fazer as alterações utilizamos o switch da seguinte forma:

switch(action.type){
 case: 'ADD':
  return ... 
 break
}

podemos organizar nossos reducers em aquivos diferentres, para fazer isso criamos um hook proprio aonde neel é criado o useReducer e todas as configurações, ao final damos um:
return useReducer(reducer, initialState)
para usa-lo basta importar dentro do seu componente e usar:
const [state, dispatch] = useCriado()

Payload:

Usamos qunado quremos enviar dados para o action

Transforme seu projeto React com os estilos certos

Rilton Bispo — Fri, 31 Mar 2023 02:14:11 +0000

ESTILOS

No React, o CSS pode ser adicionado globalmente na aplicação através do arquivo index.css. Para estilizar componentes individualmente, pode-se usar o CSSModules, incluindo o CSS dentro do componente.

Style Components

Style Components é uma biblioteca de estilo para componentes React. Ele permite a você escrever estilos CSS diretamente dentro dos seus componentes, tornando mais fácil manter a coesão entre estilo e lógica de componentes. Ao invés de escrever estilos em arquivos CSS separados, você pode definir estilos diretamente em suas classes de componentes e aplicá-los aos elementos renderizados. Style Components oferece uma sintaxe semelhante ao CSS, bem como recursos adicionais como variáveis, herança de estilo e animações.

npm install styled-components
npm install -D @types/styled-components para Ts

importação styled components:
import styled from 'styled-components'

usando styled components:

const container = styled.div`
 color: red
`

<Container> Meu texto </Container>

Uma das maneiras de usar o Styled Components é criando um arquivo TypeScript com todos os estilos e importando-o em qualquer lugar que você deseja usá-los. Por exemplo:
import * as C from './AppStyles'.

podemos passar props para o styled
<Button small > Meu botão </Button>

export const Button = styled.button`
  /* ele verifica se o elemento tem a prop small  */
 font-size: ${(props)=> props.small ? '15px' : '30px' }
`

no TypeScript precisamos definir os tipos:

type ButtonProps = {
 bg: string
 small?: boolean
}

export const Button = styled.button<ButtonProps>`...`

Design Thinking: Pensando fora da caixa

Rilton Bispo — Fri, 24 Mar 2023 21:51:35 +0000

UX e UI

Antes de falar sobre Design Thinking, é necessário explicar o que é UX e UI.

UX (User Experience)

UX (User Experience) é um estudo que se concentra na experiência do usuário com um produto ou serviço, desde quando ele começa a pensar em adquirir até depois de consumir. O UX designer é responsável por garantir a melhor experiência possível, trazendo valores importantes para o produto ou serviço. É fundamental garantir uma experiência positiva para o usuário, o que pode aumentar a satisfação e a fidelização do cliente.

UI (User Interface)

UI (User Interface) se concentra em como o usuário interage com a interface do produto ou serviço, incluindo design gráfico, layout, tipografia e cores.

As 10 Heurísticas de Usabilidade de Interface de Jakob Nielsen

O que é usabilidade? Usabilidade é uma medida de uso de um produto para alcançar determinado objetivo com certa eficácia e eficiência.

Heurísticas
1° Sempre informar os usuários sobre o que está acontecendo
2° Falar o dialeto do seu usuário
3° Dar controle e liberdade ao usuário
4° Manter a consistência/padrão
5° Eliminar as chances de erro
6° Não contar com a memória dos usuários
7° Atender aos iniciantes e aos avançados
8° Só apresentar o que é importante
9° Ajudar usuários a se recuperar de erros
10° Oferecer ajuda

Metodologias de Design

Duplo diamante:

Fase de descoberta, onde reunimos o máximo de informações possíveis.
Fase de definição de ideias.
Fase de desenvolvimento.
Fase de entrega.

IDEO.org:

Fase de inspiração, onde pesquisamos.
Fase de ideação.
Fase de implementação.

Design Thinking:

Empatia: É a fase em que pesquisamos as dores dos usuários, bem como informações sobre concorrentes e o mercado.

Definição: É quando definimos claramente os problemas a serem tratados.

Ideação: É a fase em que criamos e desenvolvemos ideias.

Prototipação: É a fase em que criamos um protótipo com base nas principais ideias geradas.

Implementação: É quando testamos o protótipo com usuários reais.

Por que aplicar Design Thinking? Grandes empresas de tecnologia no Brasil e no mundo utilizam o Design Thinking por trazer uma ampla gama de informações, atividades e reduzir o tempo de produção, além de proporcionar uma interação com toda a equipe e ajudar a compreender melhor o público-alvo.

Design Sprint:

O Design Sprint é uma metodologia desenvolvida pelo Google, criada para testar e aplicar ideias em apenas cinco dias, com base no Design Thinking.

No geral, as metodologias têm como objetivo entender o problema, capturar informações, captar ideias, testar, repetir e é muito importante ter um time dinâmico.

Aprendendo React

Rilton Bispo — Sat, 04 Feb 2023 19:16:58 +0000

React é uma biblioteca amplamente utilizada para criação de interfaces, especialmente para construção de aplicações de única página (SPAs). Ele se baseia em componentes e usa JSX para renderizar HTML. É possível adicionar React a projetos já existentes.

JSX:

JSX permite escrever HTML dentro do JavaScript e executar funções dentro dele. Valores podem ser inseridos em atributos de tags de forma dinâmica. No entanto, o retorno deve conter apenas um elemento-pai.

COMPONENTES:

Os componentes permitem dividir a aplicação em partes distintas e são arquivos JSX. Por convenção, eles são adicionados a uma pasta chamada "components" e usam PascalCase como padrão de nomenclatura. Componentes também podem ser importados dentro de outros componentes.

para usar imagens no seu componente ele precisa ser importado

Ciclo de vida

O ciclo de vida de um componente começa quando é criado na memória. Durante a renderização, o componente está "vivo". A cada alteração feita nele, um novo ciclo é iniciado. Por fim, o componente é removido quando o seu ciclo de vida chega ao fim.

INSTALAÇÃO COM VITE:

A instalação com Vite cria um projeto React já configurado. É necessário ter o Node e o NPM instalados. Para criar o projeto, execute npm create vite@latest depois rodamos o npm i, para rodar a aplicação: npm run dev. O ponto de partida da aplicação é o arquivo index.html, que contém o elemento raiz (id: root).

PROPS:

As props são valores passados para os componentes e tornam-nos dinâmicos. Elas podem ser passadas como atributos HTML e, para componentes com múltiplas propriedades, é possível passar um objeto como parâmetro (por exemplo, {nome, idade, profissão}).

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Os tipos das props também podem ser definidos (para validações durante o desenvolvimento) através de um objeto propTypes dentro do componente. Valores padrão e a obrigatoriedade de uma propriedade também podem ser definidos.

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

Como fazer a conexão de um filho para o pai?

Você pode também transmitir métodos através de props. Dessa forma, um componente filho pode invocar um método do componente pai. Isto é realizado através de um evento, com a mesma sintaxe de props normais. Além disso, um componente pai pode ter vários métodos.

  function meuEvento(){
    console.log(`Evento ativado`)
  }

  function segundoEvento(){
    console.log(`Evento desativado`)
  }

  <Button event={meuEvento} text="Ligar evento" />
  <Button event={segundoEvento} text="Desativar evento" />

function Button(props){
  return <button onClick={props.event} >{props.text}</button>
}

Para passar informações de um componente filho para um componente pai no React, usamos parâmetros. Primeiro, definimos uma função no componente pai que irá manipular essas informações. Em seguida, chamamos essa função no componente filho e passamos os dados desejados como argumento. Dessa forma, conseguimos transmitir informações de forma precisa e controlada entre os componentes.

pai:

const nomeFuncao = ( txt: string ) =>{
 alert(txt)
}

<Filho clickFn={ nomeFuncao } />

filho:

type Props = {
 clickFn: ( txt: string ) => void 
}

export const Filho = ({ clickFn }: Props) => {
 const outraFuncao() =>{
  clickFn('meu parametro')
 }

 // nao colocamos a função clickFn diretamente aqui porque 
 ela seria executada antes do evento acontecer
 <Button onClick={outraFuncao} />
}

Prop Children

define aonde os elementos filhos que estão encapsulados no componente irão ficar

function Container(props) {
  return (
    <div>
      {props.children}
    </div>
  );
}

FRAGMENTES

Os Fragmentos permitem criar componentes sem um elemento-pai, simplificando os nós do DOM. Eles são usados com uma tag vazia <> </>.

EVENTOS NO REACT

Eventos em React são semelhantes aos eventos do DOM, por exemplo o evento "click". Eles são vinculados a uma tag e uma lógica é atribuída ao evento através de um método criado no componente. É importante utilizar o método preventDefault() sempre que se usa o evento submit, pois ele impede que a execução padrão do evento seja executada e permite que o código logo abaixo seja executado.

O toggle é um termo usado quando uma ação pode ter resultados opostos ao ser executada. Por exemplo, ao clicar em um botão, ele pode alternar entre "ligado" e "desligado". A ideia é que a mesma ação gere resultados diferentes de acordo com o estado anterior. O toggle é amplamente utilizado em interfaces de usuário para alternar entre opções e configurações.

RENDERIZAÇÃO

Renderização por condição

A renderização permite que você exiba um conteúdo baseado em uma condição, como um if e else. Para fazer isso, é preciso envolver o código com chaves {}. O código dentro dessas chaves é executado como JavaScript. Além disso, é possível usar o estate para criar as condições na renderização.

Uma maneira mais simplificada de fazer condição no REACT é usando:

{seuState &&(
  <div>
    <p>Sua renderização</p>
  </div>
)}

ele vai renderizar seu codigo caso o valor do state seja true

Renderização de listas

Em React, para renderizar listas, geralmente usamos um array de objetos e o método map para percorrê-los. É possível também combinar operadores condicionais com a renderização de listas, para exibir diferentes elementos de acordo com as condições.

{seuArray.length > 0 ? 
/* caso a condição for true: */ 
 (
  seuArray.map((item, index) => <p key={index}>{item}</p>)
 ) :
/* caso a condição for false: */ 
 (
  <p>nao tem item na lista</p>
 )
}

Ao trabalhar com o método map em React, é necessário que cada elemento tenha uma key única para identificá-lo. Akey serve para que o React possa gerenciar cada elemento de forma eficiente e evitar erros. Ela deve ser uma string ou número que seja única entre todos os elementos da lista.

O operador && é usado para avaliar duas expressões e retornar a primeira expressão se ela for verdadeira, e null caso contrário. Não há suporte para um bloco else quando se usa o operador &&.
Já o operador ternário (condition ? expressionIfTrue : expressionIfFalse), que é outra forma de escrever condições em JavaScript, sempre exige a presença de uma expressão para o bloco else após o :. O que vem após o : será avaliado como a expressão para o bloco else.

REACT ROUTER

O React Router permite criar rotas personalizadas para as páginas do seu aplicativo React. Cada página é representada por um componente único. Ao usar o React Router, é possível navegar entre as páginas sem recarregar toda a página, mantendo assim uma experiência de navegação fluida para o usuário. Além disso, o React Router permite mudar tanto partes do layout quanto toda a página, de acordo com suas necessidades.

Estrutura de pastas

Para criar um aplicativo com várias rotas de página, vamos primeiro começar com a estrutura do arquivo.

Dentro da pasta src, criaremos uma pasta pages com vários arquivos:

src\pages:

Layout.js
Home.js
Blogs.js
Contact.js
NoPage.js

Cada arquivo conterá um componente React muito básico.

https://www.devmedia.com.br/react-js-criando-rotas-com-react-router-dom/42901

REACT ICONS

São um pacote de ícones externos que podem ser adicionados ao seu projeto através do NPM. Eles permitem adicionar ícones ao projeto com uma sintaxe intuitiva e semelhante a de um componente:
<FaIcone />