JS + React — Aprende a Programar

Prática

Exercícios Interativos

Resolve os exercícios e verifica a solução. A prática é o único caminho para aprender a programar.

Fácil

Saudação Personalizada

Escreve uma função saudar(nome, hora) que retorna "Bom dia, [nome]!" se hora < 12, "Boa tarde, [nome]!" se hora < 19, ou "Boa noite, [nome]!" caso contrário.

// Começa aqui:
function saudar(nome, hora) {
// O teu código aqui
}

// Testa:
console.log(saudar("Ana", 9)); // "Bom dia, Ana!"
console.log(saudar("João", 15)); // "Boa tarde, João!"
console.log(saudar("Maria", 21)); // "Boa noite, Maria!"

Fácil

Verificar Número Par ou Ímpar

Cria uma função parOuImpar(n) que retorna a string "par" se o número for par e "ímpar" se for ímpar. Considera também o caso do zero.

function parOuImpar(n) {
// O teu código aqui
}

console.log(parOuImpar(4)); // "par"
console.log(parOuImpar(7)); // "ímpar"
console.log(parOuImpar(0)); // "par"

Médio

FizzBuzz Clássico

Escreve uma função fizzBuzz(n): retorna "Fizz" se divisível por 3, "Buzz" se por 5, "FizzBuzz" se por ambos, ou o número caso contrário.

function fizzBuzz(n) {
// O teu código aqui
}

// Testa de 1 a 20:
for (let i = 1; i <= 20; i++) {
console.log(fizzBuzz(i));
}

Médio

Palíndromo

Cria uma função ePalindromo(str) que verifica se uma string é um palíndromo (lê-se igual de trás para a frente). Ignora maiúsculas/minúsculas.

function ePalindromo(str) {
// O teu código aqui
}

console.log(ePalindromo("radar")); // true
console.log(ePalindromo("Ama")); // true
console.log(ePalindromo("hello")); // false

Fácil

Dobrar os Elementos

Usa Array.map() para criar uma nova array onde cada número é o dobro do original.

const numeros = [1, 2, 3, 4, 5];

// Usa .map() para dobrar cada número
const dobros = numeros.map(/* aqui */);

console.log(dobros); // [2, 4, 6, 8, 10]

Médio

Filtrar Adultos

Dado um array de objetos com nome e idade, usa .filter() para retornar apenas as pessoas com 18 ou mais anos.

Difícil

Soma Total com Reduce

Usa .reduce() para calcular o total das compras de um carrinho de compras.

Médio

Promise Básica

Cria uma função esperar(ms) que retorna uma Promise que resolve após ms milissegundos.

function esperar(ms) {
return new Promise(/* aqui */);
}

// Usar:
esperar(1000).then(() => {
console.log("Passou 1 segundo!");
});

Difícil

Fetch com Async/Await

Escreve uma função assíncrona que vai buscar dados de uma API pública e trata erros de rede.

async function buscarUtilizador(id) {
  // Vai buscar: https://jsonplaceholder.typicode.com/users/{id}
  // Trata erros com try/catch
  // Retorna o objeto do utilizador
}

buscarUtilizador(1).then(u => console.log(u.name));

Fácil

Componente Cartão de Perfil

Cria um componente React CartaoPerfil que recebe nome, cargo e avatar como props e os apresenta num cartão.

function CartaoPerfil({ nome, cargo, avatar }) {
  // O teu JSX aqui
}

// Usar:
<CartaoPerfil
  nome="Ana Silva"
  cargo="Desenvolvedora"
  avatar="🧑‍💻"
/>

Médio

Lista de Itens Dinâmica

Cria um componente que recebe um array de strings e os apresenta numa lista <ul>. Não te esqueças da prop key!

function ListaItens({ itens }) {
// Usa .map() para renderizar <li>
}

// Usar:
<ListaItens itens={["Pão", "Leite", "Ovos"]} />

Médio

Contador com useState

Cria um componente Contador com botões para incrementar, decrementar e reset. O valor nunca pode ser negativo.

import { useState } from 'react';

function Contador() {
  const [count, setCount] = useState(0);

  // Adiciona lógica e JSX
  // Incrementar, Decrementar (mín: 0), Reset
}

Difícil

Fetch com useEffect

Cria um componente que vai buscar dados de uma API quando monta e mostra um estado de carregamento enquanto aguarda.

import { useState, useEffect } from 'react';

function DadosAPI() {
  const [dados, setDados] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Vai buscar dados aqui
  }, []);

  if (loading) return <p>A carregar...</p>;
  // Renderiza os dados
}

Referência Rápida

Conceitos Essenciais

Os conceitos mais importantes, sempre à mão.

🔁

Arrow Functions ES6

// Clássica
function soma(a, b) { return a + b; }

// Arrow function
const soma = (a, b) => a + b;

// Com corpo
const cumprimentar = nome => {
return `Olá, ${nome}!`;
};

Arrow functions têm sintaxe mais curta e não têm o seu próprio this.

📦

Desestruturação

// Objetos
const { nome, idade } = pessoa;

// Arrays
const [primeiro, segundo] = lista;

// Com valores padrão
const { cor = 'azul' } = config;

// Em parâmetros
function mostrar({ nome, idade }) { }

Extrai valores de objetos e arrays de forma concisa e legível.

⚛️

useState Hook

import { useState } from 'react';

function Componente() {
  // [valor, setter]
  const [nome, setNome] = useState('');

  return (
    <input
      value={nome}
      onChange={e => setNome(e.target.value)}
    />
  );
}

Adiciona estado local a componentes funcionais React.

🌊

Spread Operator

// Copiar array
const novo = [...original];

// Juntar arrays
const todos = [...a, ...b];

// Copiar objeto
const copia = { ...objeto };

// Adicionar propriedade
const atualizado = { ...user, idade: 25 };

O operador ... "espalha" os elementos de arrays e objetos.

⚡

Async / Await

async function buscarDados(url) {
  try {
    const resposta = await fetch(url);
    if (!resposta.ok) throw new Error('Erro!');
    const dados = await resposta.json();
    return dados;
  } catch (erro) {
    console.error(erro.message);
  }
}

Escreve código assíncrono de forma síncrona e mais legível.

🪝

useEffect Hook

import { useEffect } from 'react';

// Executa ao montar
useEffect(() => {
// código aqui
}, []);

// Executa quando 'id' muda
useEffect(() => {
buscarDados(id);
}, [id]);

Executa efeitos secundários: chamadas API, subscrições, timers.

Aprende
JavaScript
e React

Todos os Módulos

Trilha de Aprendizagem

Exercícios Interativos

Quiz Interativo

Conceitos Essenciais

Alternativas e Recursos

Aprende JavaScript e React

Todos os Módulos

Trilha de Aprendizagem

Exercícios Interativos

Quiz Interativo

Conceitos Essenciais

Alternativas e Recursos

Aprende
JavaScript
e React