Introdução ao React

Aula 1

function App() {
  return (
  	<Pessoa
    	nome='Milena Emmert'
    	profissao='Instrutora e Desenvolvedora'
    	empresa='Alura'
    >
  )
}

1

O que é React e por que usá-lo?

2

Visão geral do ecossistema React

3

O que saber antes de aprender React

5

Abordagem conceitual dos componentes

4

Configuração do ambiente de desenvolvimento

6

Desafio

O que é o React

Biblioteca open source para a construção de UI
Baseada em componentes
Permite criar aplicações em grande escala, com o conceito de SPA
Criado pelo Facebook em 2013

Funcionamento dos websites

Server Side Rendering

Funcionamento dos websites

Client Side Rendering

Animação de loading no site da Coca-Cola

Por que usar React

Componentização	Virtual DOM
Fluxo de dados unidirecional	JSX (JavaScript XML)
Ecossistema de bibliotecas	React Native
SSR com Next.js	React DevTools
Atualizações frequentes	Comunidade de suporte

Fundamentos

Fluxo de dados unidirecional

Virtual DOM

JSX

Ecossistema React

Conceitos

Props

State

Renderização

condicional

Componentes

Recursos

Axios

Testes

Memoization

CSS-in-JS

Gerenciamento de estado

<input type="text" placeholder="Pesquisar" />

<h1>Título Principal</h1>

<a href="https://www.fiap.com.br/" target="_blank">
	FIAP
</a>

<img src="https://www.alura.com.br/assets/img/alura2023/home/formations-sub.1712930780.png" alt="Ilustração de um submarino parado no fundo do mar. A frente do submarino possui uma escotilha esférica grande. Ele é ladeado por outras 4 escotilhas menores. O submarino tem características futuristas. O submarino é iluminado por uma luz azulada que vem de cima. Atrás do submarino, em segundo plano, surgem de cima duas algas extensas e verticais. O fundo do mar está populado por corais e mais vegetação maritima.">

O que preciso saber?

HTML

css

const itemsMenu = [
  {
    item: 'Baixe o App Vivo',
    link: 'https://vivo.com.br/para-voce/app-vivo'
  },
  {
    item: 'Produtos e Serviços',
    link: 'https://vivo.com.br/para-voce/produtos-e-servicos'
  },
  {
    item: 'Ajuda',
    link: 'https://vivo.com.br/para-voce/ajuda'
  },
  {
    item: 'Por que Vivo',
    link: 'https://vivo.com.br/para-voce/por-que-vivo'
  },
  {
    item: 'Melhores Ofertas',
    link: 'https://vivo.com.br/para-voce/produtos-e-servicos/melhores-ofertas'
  }
]

O que preciso saber?

JavaScript

Arrays e objetos
Métodos para manipulação de arrays
Funções

Por quê?

function MenuList() {
  return (
    <nav>
      <ul>
        {itemsMenu.map((menuItem, index) => (
          <li key={index}>
            <a href={menuItem.link}>{menuItem.item}</a>
          </li>
        ))}
      </ul>
	</nav>
  )
}

A base do React moderno são componentes funcionais, com a utilização de métodos nativos do JS.

Ferramentas necessárias

Navegador

Node.js

VS Code

Ambiente de desenvolvimento

Build e transpilers

Webpack
Babel

3.

Servidor

create-react-app
vite

1.

Gerenciador de pacotes

npm
yarn

2.

Airbnb

Empresas que utilizam

Empresas que utilizam

{concorrentes}

export function Saudacao(props) {
  return <h1>Olá, {props.nome}!</h1>;
}

function App() {
  return (
    <div>
	  <Header />
      <Saudacao nome="Fulana" />
    </div>
  )
}

export default App

Componentes

Blocos de construção de interfaces
Podem ser funcionais ou de classe
Encapsulam lógica e apresentação

Criar componente reutilizável para a seção "Por que escolher a Vivo?"

Desafio

Link para acessar o Figma

Criando uma aplicação React com Vite (artigo)

Repositório GitHub Aula 1

Nossas aulas

null

Aula 1

24/06 às 15h

→ Introdução ao React

Atual

Aula 2

25/06 às 14h

→ JXS e Elementos React

JSX e Elementos React

Aula 2

1

O que é o JSX

2

Renderização de elementos

3

Componentes

5

Eventos

4

Props

6

Desafio

O que é o JSX

HTML com JavaScript
Facilita a criação de componentes
Convertido em chamadas React.createElement

function Botao(props) {
  return (
    <button onClick={props.onClick}>
      {props.texto}
    </button>
  )
}

function Input(props) {
  return (
    <input
      value={props.value}
      onChange={props.onChange}
      placeholder={props.placeholder}
    />
  )
}

function Lista(props) {
  return (
    <ul>
      {props.itens.map(item => (
        <li key={item.id}>{item.nome}</li>
      ))}
    </ul>
  )
}

Renderização de elementos

Elementos são blocos básicos do React
Renderiza elementos no DOM
Virtual DOM
ReactDOM.render()

function App() {
  const [texto, setTexto] = React.useState('')
  const [itens, setItens] = React.useState([])
  const adicionarItem = () => {
    const novoItem = { id: itens.length + 1, nome: texto }
    setItens([...itens, novoItem])
    setTexto('')
  }

  return (
    <div>
      <h1>Minha Lista</h1>
      <Input
        value={texto}
        onChange={e => setTexto(e.target.value)}
        placeholder="Digite um item"
      />
      <Botao onClick={adicionarItem} texto="Adicionar" />
      <Lista itens={itens} />
    </div>
  )
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <App />
)

Renderização de elementos

Blocos de construção
São reutilizáveis
Encapsulam lógica e estilo
Podem ser funcionais ou de classe

Componentes

function Botao(props) {
  const handleClick = () => {
    props.onClick()
  }

  return (
    <button className={`btn ${props.className}`} onClick={handleClick}>
      {props.texto}
    </button>
  )
}

Props

Passam dados de um componente pai para um componente filho
São de leitura única (read-only)
Permitem a reutilização de componentes

"Olá, mundo!"

Pai

<p>{textoRecebidoDoPai}</p>

Filho

<p>Olá, Mundo!</p>

Props

// Componente Filho
function Filho(props) {
  return <p>{props.mensagem}</p>
}

// Componente Pai
function Pai() {
  const mensagemParaFilho = "Olá, Mundo!"
  return <Filho mensagem={mensagemParaFilho} />
}

// O componente Post
function Post(props) {
  return (
    <div>
      <h1>{props.titulo}</h1>
      <img loading="lazy" src={props.urlImagem} />
      <p>{props.texto}</p>
    </div>
  )
}

// Usando o componente Post
function App() {
  return (
    <div>
      <Post
        titulo="Primeiro post"
        urlImagem="https://example.com/image1.jpg"
        texto="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
      />
      <Post
        titulo="Segundo post"
        urlImagem="https://example.com/image2.jpg"
        texto="Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      />
    </div>
  )
}

Eventos

Sintaxe similar ao HTML
Funções de evento como props
Usados para dinamismo e interatividade

Interações do usuário (cliques, digitação)

Automáticos (carregamento da página)

Ações que acontecem no navegador

Eventos

function Botao(props) {
  return (
    <button onClick={props.onClick}>
      Clique aqui
    </button>
  )
}

function App() {
  const handleClick = () => {
    alert('Botão clicado!')
  }

  return (
    <div>
      <h1>Evento de Clique</h1>
      <Botao onClick={handleClick} />
    </div>
  )
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <App />
)

Criar um componente para Botão que possa ser reutilizado em toda a página.

Desafio

Link para acessar o Figma

Criando uma aplicação React com Vite

Repositório GitHub

Nossas aulas

Aula 3

26/06 às 10h

Componentes de Classe vs. Componentes Funcionais

Atual

Aula 2

JSX e Elementos React

Aula 1

Introdução ao React

Aula 3

Componentes de Classe vs. Componentes Funcionais

1

Class components

2

Estado e ciclo de vida

3

Function components

4

Hooks em componentes funcionais

6

Desafio

Formato dos componentes

Componente Funcional

function Saudacao() {
  return <h1>Olá, mundo!</h1>
}

Componente de Classe

import React, { Component } from 'React'

class Saudacao extends React.Component {
  render() {
    return <h1>Olá, mundo!</h1>
  }
}

Definidos como classes ES6
Estendem React.Component
Podem ter estado (state)
Possuem métodos de ciclo de vida
Devem implementar o método render

Class Components

class Welcome extends React.Component { 
   render() { 
      return <h1>Hello, Vivo!</h1> 
   }
}

Class Components

import React, { Component } from 'react'

export class Input extends Component {
  handleChange = (event) => {
    this.props.onChange(event)
  }

  render() {
    return (
      <input
        className={`input ${this.props.className}`}
        value={this.props.value}
        onChange={this.handleChange}
        placeholder={this.props.placeholder}
      />
    )
  }
}

→ Estado e Ciclo de Vida é mantido em this.state

→ Métodos como:

componentDidMount
componentDidUpdate
componentWillUnmount

Class Components

→ Itens de Class e OO, além da classe

Constructor
Herança
Instância
Encapsulamento
Ciclo de Vida

Estado em class components

No constructor

Armazena dados mutáveis

Definição

Usa this.setState()

Aceita objeto ou função

Atualização

Mudanças no estado re-renderizam o componente

Reactividade

import React, { Component } from 'react'

class Contador extends Component {
  constructor(props) {
    super(props);
    this.state = {
      contagem: 0
    }
  }

  incrementar = () => {
    this.setState((prevState) => ({
      contagem: prevState.contagem + 1
    }))
  }

  render() {
    return (
      <div>
        <h1>Contagem: {this.state.contagem}</h1>
        <button onClick={this.incrementar}>Incrementar</button>
      </div>
    )
  }
}

export default Contador

constructor

render

componentDidMount

React atualiza o DOM

componentDidUpdate

componentWillUnMount

props

setState()

forceUpdate()

Montagem

Atualização

Desmontagem

Fases do ciclo de vida

Baseados em funções JavaScript
Retornam JSX
Simples e concisos
Recebem props como argumento
Originalmente sem estado (state)
- Por isso não podíamos usar antes, mas os hooks resolveram isso 👍

Function

Components

function OlaMundo() { 
  return <h1>Olá, mundo!</h1>
}

function Botao(props) {
  return (
    <button onClick={props.onClick}>
      {props.texto}
    </button>
  )
}

export default Botao

Vantagens e desvantagens

Suporte a ciclo de vida

Class

Mais verbosos

Ciclo de vida mais complexo

Function

Mais simples, menos código

Hooks para estado e efeitos

Sem estado antes dos Hooks

Hooks em Componentes Funcionais

Introduzidos no React 16.8
Adicionam estados
- Atualizar dados ao longo de seu ciclo de vida
Controlam efeitos colaterais
- Algo que está fora do escopo do componente

Gerencia estado

import  { useState } from 'react'

export function Contador() {
  const [contagem, setContagem] = useState(0)
  
  const incrementar = () => {
    setContagem(contagem + 1)
  }

  return (
    <div>
      <h1>Contagem: {contagem}</h1>
	<button onClick={incrementar}>Incrementar</button>
    </div>
  )
}

useState

Efeitos colaterais

import { useState, useEffect } from 'react'

export function Relogio() {
  const [hora, setHora] = useState(new Date())

  useEffect(() => {
    const intervalo = setInterval(() => {
      setHora(new Date())
    }, 1000)

    return () => clearInterval(intervalo)
  }, [])

  return (
    <div>
      <h1>{hora.toLocaleTimeString()}</h1>
    </div>
  )
}

useEffect

Crie todos os componentes que faltam na nossa página, para podermos evoluir nosso aprendizado com o uso de states e hooks personalizados.

Desafio

Link para acessar o Figma

Repositório GitHub

Nossas aulas

Aula 4

26/06 às 15h

Estado e Gerenciamento de Estado

React Hooks: o que é e como funcionam? | L eitura complementar

Atual

Aula 3

Componentes de Classe vs. Componentes Funcionais

Aula 2

JSX e Elementos React

Aula 4

Estado e Gerenciamento de Estado

1

useState e useEffect

2

O que é o Gerenciamento de Estado?

5

useContext

4

6

Desafio

Context API

Flux vs. Redux

3

useState

Hook do React para estados (a partir do React 16.8)
Podemos controlar / manusear o estado de um componente
Atribuído a eventos em funções de mudança de state
Inicializa estado
Atualiza com setState

useState

import { useState } from 'react'

export function Contador() {
  const [contador, setContador] = useState(0)

  const incrementar = () => {
    setContador(contador + 1)
  }

  const decrementar = () => {
    setContador(contador - 1)
  }

  const resetar = () => {
    setContador(0)
  }

  return (
    <div>
      <h1>Contador: {contador}</h1>
      <button onClick={incrementar}>Incrementar</button>
      <button onClick={decrementar}>Decrementar</button>
      <button onClick={resetar}>Resetar</button>
    </div>
  )
}

useEffect

Hook para efeitos colaterais (a partir do React 16.8)
Podemos averiguar esses efeitos:
- a cada renderização do componente
- em alguma alteração do estado do componente
- apenas na primeira vez que o componente for renderizado

* Quando formos fazer requisições em API's, mas veremos isso na aula sobre AXIOS!

useEffect

import { useState } from 'react'

export function Contador() {
  const [contador, setContador] = useState(0)

  const incrementar = () => {
    setContador(contador + 1)
  }

  const decrementar = () => {
    setContador(contador - 1)
  }

  const resetar = () => {
    setContador(0)
  }
  
  useEffect(() => {
    console.log(`O contador foi atualizado para: ${contador}`);
  }, [])

  return (
    <div>
      <h1>Contador: {contador}</h1>
      <button onClick={incrementar}>Incrementar</button>
      <button onClick={decrementar}>Decrementar</button>
      <button onClick={resetar}>Resetar</button>
    </div>
  )
}

O que é gerenciamento de Estado?

Gerenciar o estado com muitas informações que podem mudar ao longo do tempo e afetar a renderização do componente

Facilita a manutenção e previsibilidade do comportamento do aplicativo, assegurando que a interface do usuário esteja sempre sincronizada com os dados

Tipos de Estado

Estado Local: Gerenciado dentro de um único componente usando useState ou this.state

Estado Global: Compartilhado entre múltiplos componentes (Context API, Redux etc.)

Flux vs. Redux

Centraliza o estado da aplicação em um único lugar global. Isso simplifica o acesso e a atualização do estado, evitando a necessidade de passar props através de múltiplos componentes.

Redux

Facilita a manutenção e escalabilidade em aplicações grandes, especialmente quando várias partes da aplicação precisam estar sincronizadas e atualizadas conforme o estado muda

Flux

Context API

Prop Drilling

import { createContext, useContext, useState, useEffect } from 'react'

export const useUser = () => useContext(UserContext)

export const UserContext = createContext()

export function UserProvider ({ children }) {
  const [user, setUser] = useState({})

  useEffect(() => {
    setUser({
      isLogged: true,
      firstName: 'Milena',
      lastName: 'Emmert',
      age: 28
    })
  }, [])

  return <UserContext.Provider value={user}>{children}</UserContext.Provider>
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <UserProvider>
    <App />
  </UserProvider>
)

import { useUser } from '../contexts'

export function Componente() {
  const user = useUser()

  return (
    <div>{user.firstName}</div>
  )
}

Fazer o Header do nossa página com o controle de login true ou false.

Desafio

Link para acessar o Figma

Repositório GitHub

Nossas aulas

Aula 5

28/06 às 10h

Roteamento com React Router

Atual

Aula 4

Estado e Gerenciamento de Estado

Aula 3

Componentes de Classe vs. Componentes Funcionais

Aula 5

Roteamento com React Router

1

O que são Rotas

2

O que é a React Router

4

Navegação e parâmetros

6

Desafio

Proteção de Rotas

5

Configuração inicial

3

O que são rotas

Organização e navegação das páginas, dentro do contexto de SPA

{Função das rotas nas SPAs}

Permite a navegação sem recarregar a página
- Mantém o estado da aplicação
Em rotas CSR o gerenciamento das rotas ocorre no navegador

O que é a React Router

Biblioteca de roteamento para React
Facilita a criação de rotas dinâmicas
Suporte para rotas aninhadas e parâmetros
Podemos ter navegação fluida

Configuração

A React Router Dom não é uma lib nativa, portanto precisamos importá-la.

Importar

npm install react-router-dom

Adicionando uma Rota

Configuração da nossa primeira rota

→ Precisamos envelopar an app com Browser Router

Context de roteamento do React Router
Gerencia a URL da aplicação com a navegação entre componentes

`Browser Router`

import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import { App } from './app'

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
     <App />
  </BrowserRouter>
)

Navegação

Pode substituir a tag <a> ou pode ser usado para navegação interna

`NavLink`

Quando a navegação precisa ser ativada programaticamente, como em eventos ou lógica interna do componente

`Navigate ou useNavigate`

import { NavLink } from 'react-router-dom';

<Link to="/about">About</Link>

import { useNavigate } from 'react-router-dom'

function MyComponent() {
  const navigate = useNavigate()

  function handleClick() {
    navigate('/about')
  }

  return (
    <button onClick={handleClick}>Go to About</button>
  )
}

`Route`

Rotas individuais

Route e Routes

import { Route } from 'react-router-dom'

<Route path="/about" component={About} />

`Routes`

Agrupa várias rotas em um único componente

import { Routes, Route } from 'react-router-dom'

<Routes>
  <Route path="/about" element={<About />} />
  <Route path="/contact" element={<Contact />} />
</Routes>

Route e Routes

<Routes>
  <Route path='/' element={<MainScreen />} />
  <Route path='/planos' element={<InternetScreen />} />
  <Route path='/duvidas' element={<FaqScreen />} />
</Routes>

Proteção das Rotas

const Auth = ({ children, condition }) => {
  if (condition) {
    return children
  } else {
    return <Navigate to='/' />
  }
}

<Route
  path='/perfil'
  element={
    <Auth condition={isLogged}>
    	<ProfileScreen />
    </Auth>
  }
/>

Verificar autenticação antes de renderizar componentes

Criar componente que protege a rota

Criar outras telas (apenas de teste) na nossa app para fazer o uso das rotas.

Desafio

Link para acessar o Figma

Repositório GitHub

Nossas aulas

Aula 6

02/07 às 14h

Formulários e Eventos em React

Atual

Aula 5

Roteamento com React Router

Aula 4

Estado e Gerenciamento de Estado

Aula 6

Formulários e Eventos em React

1

Formulários com React

2

Formik

3

Validação de formulários

5

Eventos

4

Yup

6

Desafio

Formulários com React

Usamos elementos HTML para coletar dados do usuário
- <input>
- <textarea>
- <select>
Podemos reutilizar elementos trocando os valores de atributos por meio das props
- Types para inputs. Alguns exemplos: text, email, number
- Types para botões. Alguns exemplos: submit, button
Criamos de funções de manipulação

<form onSubmit={handleSubmit}>
	<div>
      <label>Nome:</label>
      <input
          type="text"
          value={nome}
          onChange={handleNomeChange}
          required
      />
	</div>

	<div>
		<label>Profissão:</label>
        <select value={profissao} onChange={handleProfissaoChange} required>
          <option value="">Selecione uma profissão</option>
          <option value="Desenvolvedor">Desenvolvedor</option>
          <option value="Designer">Designer</option>
          <option value="Engenheiro">Engenheiro</option>
          <option value="Professor">Professor</option>
        </select>
	</div>

	<button type="submit">OK</button>
</form>

const [nome, setNome] = useState('')
const [profissao, setProfissao] = useState('')

const handleNomeChange = (event) => {
  setNome(event.target.value)
}

const handleProfissaoChange = (event) => {
  setProfissao(event.target.value)
}

const handleSubmit = (event) => {
  event.preventDefault()

  console.log('Nome:', nome)
  console.log('Profissão:', profissao)
}

const [nome, setNome] = useState('')
const [profissao, setProfissao] = useState('')

function handleNomeChange(event) {
  setNome(event.target.value)
}

function handleProfissaoChange(event) {
  setProfissao(event.target.value)
}

function handleSubmit(event) {
  event.preventDefault()

  console.log('Nome:', nome)
  console.log('Profissão:', profissao)
}

<input /> nos Formulários

{onChange}

→ Gerenciamento do estado dos campos de entrada

Componentes controlados

Manipular e validar os dados de entrada
Manter a UI sincronizada com o estado do aplicativo

Pelo estado atual do componente

Formik

Biblioteca para gerenciamento de formulários
Gerencia
- Estado
- Validação
- Envio

Declarativa

Intuitiva

Adaptável

Formik

npm install formik

Instalação

 import { Formik } from 'formik'

Capturar values

Validar entradas

Criar alertas de erros

Lidar com a submissão

import { Formik, Field, Form } from 'formik'

const Componente = () => {
  retun (
    <div>
      <h1>Sign Up</h1>
      <Formik
        initialValues={{
          firstName: '',
          lastName: '',
          email: '',
        }}

        onSubmit={(values) => console.log(values)}
      >
        <Form>
          <label htmlFor="firstName">First Name</label>
          <Field id="firstName" name="firstName" placeholder="Jane" />

          <label htmlFor="lastName">Last Name</label>
          <Field id="lastName" name="lastName" placeholder="Doe" />

          <label htmlFor="email">Email</label>
          <Field
            id="email"
            name="email"
            placeholder="jane@acme.com"
            type="email"
          />
          <button type="submit">Submit</button>
        </Form>
      </Formik>
    </div>
	)
}

Formik

Field

ErrorMessage

Formik

Form

Contexto e funções

Substitui a <form>

Campo de entrada

Validação de erros

Biblioteca para validação
Define e valida formatos de dados
Integração com Formik para validação de formulários

Yup

npm i yup

Instalação

import * as yup from 'yup'

const formValidationSchema = Yup.object({
    name: Yup.string().required('O nome é obrigatório.'),
    email: Yup.string()
      .email('Formato de e-mail inválido.')
      .required('O e-mail é obrigatório.'),
    age: Yup.number()
      .typeError('A idade deve conter apenas números.')
      .integer('A idade deve ser um número inteiro.')
      .min(1, 'Idade inválida.')
      .max(150, 'Idade inválida.'),
    cep: Yup.string()
      .matches(/^\d{5}-\d{3}$/, 'O CEP deve possuir o formato 00000-000.')
      .required('O CEP é obrigatório.'),
    message: Yup.string().required('A mensagem é obrigatória.')
 })

Yup

typeError()

min(), max()

required

integer()

number()

string()

Implementar o nosso formulário com as validações de erro e reutilizar nosso componente de Botão já criado.

Desafio

Link para acessar o Figma

Repositório GitHub

Nossas aulas

Aula 7

03/07 às 10h

Chamadas de API com Axios

Atual

Aula 6

Formulários e Eventos

Aula 5

Roteamento com React Router

Aula 7

Chamadas de API com Axios

1

Axios

2

GET

3

POST

5

Segurança de API's

4

Tratamentos de erros e async/await

6

Desafio

Faz requisições HTTP (transferência de dados na web)
Baseada em promises para lidar com requisições assíncronas
Simplifica comunicação com APIs
- Tranformações
- Cancelamentos
Transforma os dados para JSON

npm install axios

Requisições HTTP

Forma como os dados são transferidos na web

GET

POST

PUT

DELETE

GET

Recupera dados do servidor

import axios from 'axios'

axios.get('/api/users')
  .then(response => console.log(response.data))
  .catch(error => console.error(error))

requisição para o endpoint 'api/users'

then para chamada com sucesso, retorna os dados do objeto response

catch para promessas rejeitadas, error contém informações do erro

POST

Envia dados ao servidor

axios.post('/api/users', { name: 'John' })
  .then(response => console.log(response.data))
  .catch(error => console.error(error))

'api/users' é o endpoint para onde os dados do usuário serão enviados

{ name: 'John' } é um objeto JSON que será enviado como o corpo da requisição

import axios from 'axios'

axios.get('/api/users')
  .then(response => console.log(response.data))
  .catch(error => {
   if (error.response) {
     console.error('Error ', error.response.status)
   } else {
     console.error('Error:', error.message)
   }
 })

Possíveis erros

400 Bad Request

401 Unauthorized

404 Not Found

500 Internal Server Error

503 Service Unavailable

Async/Await

Sintaxe assíncrona para requisições
Usa async e await

import axios from 'axios'

async function fetchData() {
  try {
    const response = await axios.get('/api/users')
    console.log(response.data)
  } catch (error) {
    console.error(error)
  }
}

async function fetchData() {
  try {
    const response = await fetch('/api/users')
    const data = await response.json()
    console.log(data)
  } catch (error) {
    console.error(error)
  }
}

Segurança de APIs

Token para autenticação segura
Incluído em headers das requisições

import axios from 'axios'

const token = 'your-token'
axios.get('/api/secure-data', {
  headers: {
    Authorization: `${token}`
  }
})
.then(response => console.log(response.data))
.catch(error => console.error(error))

Fazer o get da api ViaCep a partir do CEP inserido no campo do formulário.

Desafio

Link para acessar o Figma

Repositório GitHub

Nossas aulas

Aula 8

03/07 às 15h

Estilização em React

Atual

Aula 7

Chamadas de API com Axios

Aula 6

Formulários e Eventos

Requisições utilizando Axios (artigo)

Aula 8

03/07 às 15h

Estilização em React

Atual

Aula 8

Estilização com React

1

CSS em React

2

Styled Components

3

Imagens no React

5

CSS modules

4

SVG's no React

6

Desafio

CSS em React

Estiliza os componentes e interfaces
Métodos diversos
- CSS tradicional
- Bibliotecas (Styled Components 💅)
- Pré-processadores (para mixins, nesting e funções)
- CSS Modules*

Styled Components

Biblioteca para CSS-in-JS
Escreve estilos com JavaScript
Estilos escopados por componente

import styled from 'styled-components';

const Button = styled.button`
  background: blue;
  color: white;
  padding: 10px;
`;

function App() {
  return <Button>Clique aqui</Button>;
}

npm install styled-components

const Button = styled.button<{ $primary?: boolean; }>`
  background: transparent;
  border-radius: 3px;
  border: 2px solid #BF4F74;
  color: #BF4F74;
  margin: 0.5em 1em;
  padding: 0.25em 1em;

  ${props => props.$primary && css`
    background: #BF4F74;
    color: white;
  `}
`;

const Container = styled.div`
  text-align: center;
`

render(
  <Container>
    <Button>Normal Button</Button>
    <Button $primary>Primary Button</Button>
  </Container>
);

Imagens no React

Utilizamos o import

import whyUsQuality from '../assets/images/why-us-quality.png'
import whyUsServices from '../assets/images/why-us-services.png'
import whyUsSignal from '../assets/images/why-us-signal.png'

SVG's no React

Função que retorna elemento SVG num JSX
Importe os componentes SVG onde necessário
Utilize-os como componentes JSX normais

SVG

export const arrow = (className) => {
  return (
    <svg
      className={className}
      viewBox='0 0 32 32'
      fill='none'
      xmlns='http://www.w3.org/2000/svg'
    >
      <path
        d='M18 6L28 16M28 16L18 26M28 16H4'
        stroke='currentColor'
        strokeWidth='2'
        strokeLinecap='round'
        strokeLinejoin='round'
        vectorEffect='non-scaling-stroke'
      />
    </svg>
  )
}

import styles from './Button.module.css';

function App() {
  return <button className={styles.button}>Clique aqui</button>;
}

CSS Modules

Escopo local por padrão.
Estilos importados como módulos
Evita conflitos de nome de classes

CSS Modules

O css-modules cria um className único para cada local em que é utilizado

_className_hash

CSS Modules e as classes globais

.faqScreen {
  composes: screen from global;
  background-color: var(--rose);
  padding-top: 160px;
  color: var(--white);
}

.container {
  composes: container from global;
}

.container {
  max-width: var(--container-width);
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

Classes dinâmicas

<div className={isSelected ? ${s.component} ${s.selected} : s.component}></div>

Podemos adicionar classes por meio de estruturas condicionais.

Usamos a estrutura de operador ternário:

condition ? expressionIfTrue : expressionIfFalse

Nossas aulas

Aula 9

04/07 às 10h

Hooks Avançados

Atual

Aula 8

Estilização em React

Aula7

Chamadas de API com Axios

Aula 9

Hooks Avançados

1

Hooks avançados

2

useMemo

3

Performance

5

Boas práticas

4

Hooks customizados

6

Desafio

Hooks Avançados

Melhoram funcionalidade dos componentes funcionais
Simplificam lógica complexa
Promovem reutilização de código

useMemo

useMemo

Memoriza valores calculados
Evita cálculos desnecessários
Otimiza o desempenho

useMemo

const ShoppingCart = ({ items }) => {
  const totalPrice = items.reduce((sum, item) => sum + item.price, 0)

  return <div>Total Price: {totalPrice}</div>
}

import { useMemo } from 'react'

const ShoppingCart = ({ items }) => {
  const totalPrice = useMemo(() => {
    return items.reduce((sum, item) => sum + item.price, 0)
  }, [items])

  return <div>Total Price: {totalPrice}</div>
}

Performance

useMemo
memoização de dados
usar gerenciamento de estado de forma eficiente
lazy loading

hooks customizados

Reutilizam lógica entre componentes
Simplificam o código
Promovem a manutenção e legibilidade
Permitem personalizações

Boas práticas

Componentização
Nomeação consciente
Gerenciamento de estado
Performance
Padrões de codificação

Criar um hook personalizado para que o Vivinho apareça apenas quando nossa MainScreen estiver no topo da tela.

Desafio

Link para acessar o Figma

Repositório GitHub

Nossas aulas

Aula 10

05/07 às 10h

Introdução ao TypeScript

Atual

Aula 9

Hooks Avançados

Aula 8

Estilização em React

Aula 10

Introdução ao TypeScript com React

1

O que é o TypeScript?

2

Por que TypeScript com React?

5

Componentes funcionais com TypeScript

4

Tipos básicos e Types

6

Instruções

Configurando o ambiente de desenvolvimento

3

O que é TS?

Superset de JavaScript
Adiciona tipagem estática
Melhora autocomplete e refatoração
Detecta erros em tempo de desenvolvimento
Compila para JavaScript puro

Por que TS?

JavaScript

TypeScript

Websites simples
Sem grande volumes de dados
Projetos individuais

Aplicações mais complexas
SPAs
Projetos grandes
Projetos em equipe

JavaScript x TypeScript

Característica do sistema de tipos	JS	TS
Como os tipos são vinculados?	Dinamicamente	Estaticamente
Os tipos são convertidos automaticamente?	Sim	Em alguns casos sim
Quando os tipos são verificados?	Em tempo de execução	Em dev e em tempo de compilação

Por que React com TS?

Aumento da produtividade no desenvolvimento
Redução de bugs através da tipagem estática
Facilidade na manutenção de código em projetos grandes
Melhor suporte para trabalho em equipe

Configurando o Ambiente de Desenvolvimento

Tipos básicos no TS

String	`let myString: string = "Eu sou uma string"`
Number	`let myNumber: number = 12`
Boolean	`let myBoolean: boolean = true`
Array	`let myArray: string[] = ["Olá", "Mundo"]`
Object	`let myObject: {name: string, age: number} = {name: "Milena", age: 28}`
Any	`let myAny: any`

Types

Tipo personalizável

function Botao({ type, text, isDisabled }) {
  return (
    <button type={type} disabled={isDisabled}>
      {text}
    </button>
  )
}

type BotaoProps = {
  type: 'submit' | 'button' | 'reset'
  text: string
  isDisabled: boolean
}

function Botao({ type, text, isDisabled }: BotaoProps) {
  return (
    <button type={type} disabled={isDisabled}>
      {text}
    </button>
  )
}

Componentes funcionais com TS

function Apresentacao({ name }: { name: string }) {
  return <h1>Hello, {name}!</h1>
}

Para fazer o projeto da nossa LP, acesse o Figma disponibilidado nesse slide.
Todos os nossos encontros (exceto o encontro 8), foram propostos desafios de acordo com o nível do conteúdo apresentado. Esses desafios estão no final de cada aula, nesses slides.
Nosso projeto final também pode ser acessado no GitHub, deixei o código comentado com as explicações referentes aos desafios.

Qualquer dúvida você pode me procurar o linkedin.

Será um prazer te ajudar!

Instruções

Link para acessar o Figma

Repositório GitHub

Meu linkedIn (Milena Emmert)

Materiais gratuitos para consulta

Nossas aulas chegaram ao fim 😢

❤️

Te desejo muito sucesso e que você sempre tenha força para superar seus desafios!

Um grande abraço,

Milena Emmert.

Atual

Aula 10

Introdução o TypeScript com React

Aula 9

Hooks Avançados

Introdução ao React

1

2

3

5

4

6

O que é o React

Funcionamento dos websites

Funcionamento dos websites

Por que usar React

Fundamentos

Ecossistema React

Conceitos

Recursos

O que preciso saber?

O que preciso saber?

Por quê?

Ferramentas necessárias

Ambiente de desenvolvimento

3.

1.

2.

Empresas que utilizam

Empresas que utilizam

{concorrentes}

Componentes

Desafio

Nossas aulas

Anterior

Próxima

Atual

JSX e Elementos React

1

2

3

5

4

6

O que é o JSX

Renderização de elementos

Renderização de elementos

Componentes

Props

Props

Eventos

Eventos

Desafio

Nossas aulas

Anterior

Próxima

Atual

Componentes de Classe vs. Componentes Funcionais

1

2

3

4

6

Formato dos componentes

Class Components

Class Components

Class Components

Estado em class components

Definição

Atualização

Reactividade

Fases do ciclo de vida

Function

Components

Vantagens e desvantagens

Class

Function

Hooks em Componentes Funcionais

Desafio

Nossas aulas

Anterior

Próxima

Atual

Estado e Gerenciamento de Estado

1

`Browser Router`

`NavLink`

`Navigate ou useNavigate`

`Route`

`Routes`