Introdução

Neste tutorial, vamos aprender a criar uma aplicação de gerenciamento de tarefas (to-do list) utilizando TypeScript e React, aproveitando o framework Next.js para proporcionar um melhor desempenho e otimização. Além disso, utilizaremos a plataforma Vercel para realizar o deploy contínuo da nossa aplicação. O Next.js oferece recursos como renderização do lado do servidor (SSR) e geração de sites estáticos (SSG), que tornam nossa aplicação mais rápida e eficiente. Se você é um desenvolvedor que deseja expandir suas habilidades em React, TypeScript e tecnologias modernas de deploy, este guia é perfeito para você. Vamos abordar desde a configuração do ambiente de desenvolvimento até a implementação de testes unitários, passando pela criação da interface e integração com APIs.

Etapas

  1. Configuração do Ambiente de Desenvolvimento

    Certifique-se de ter o Node.js e o npm instalados em sua máquina. Você pode verificar se as ferramentas estão corretamente instaladas executando os comandos `node -v` e `npm -v`. Se não estiverem, você pode baixá-los no site oficial do Node.js.

    commands
    # Verificar versões instaladas
    node -v
    npm -v

  2. Criação do Projeto Next.js

    Utilize o comando abaixo para criar uma nova aplicação Next.js com TypeScript: `npx create-next-app@latest my-todo-app –typescript`. O Next.js irá configurar automaticamente o TypeScript para o seu projeto.

    commands
    npx create-next-app@latest my-todo-app --typescript

  3. Estrutura do Projeto

    Após a criação do projeto, acesse o diretório com `cd my-todo-app`. A estrutura inicial do projeto incluirá pastas como `pages`, que é onde você criará suas rotas e componentes principais. Vamos adicionar uma nova página para gerenciar as tarefas.

    commands
    cd my-todo-app

  4. Criação da Página de Tarefas

    Crie um novo arquivo `tasks.tsx` dentro da pasta `pages` e implemente a interface da lista de tarefas. Esta página conterá um formulário para adicionar novas tarefas e uma lista para exibir as tarefas existentes.

    tasks.tsx
    import React, { useState } from 'react';

const Tasks: React.FC = () => {
  const [task, setTask] = useState('');
  const [tasks, setTasks] = useState<string[]>([]);

  const addTask = (e: React.FormEvent) => {
    e.preventDefault();
    if (task) {
      setTasks([...tasks, task]);
      setTask('');
    }
  };

  return (
    <div>
      <h1>Gerenciador de Tarefas</h1>
      <form onSubmit={addTask}>
        <input
          type="text"
          value={task}
          onChange={(e) => setTask(e.target.value)}
          placeholder="Adicione uma nova tarefa"
        />
        <button type="submit">Adicionar</button>
      </form>
      <ul>
        {tasks.map((t, index) => (
          <li key={index}>{t}</li>
        ))}
      </ul>
    </div>
  );
};

export default Tasks;

  5. Estilizando a Aplicação

    Crie um arquivo CSS chamado `styles.css` dentro da pasta `styles` para adicionar estilos à sua aplicação. Importe este arquivo no seu componente `Tasks` para aplicar os estilos.

    styles.css
    body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 20px;
}

form {
  margin-bottom: 20px;
}

input {
  padding: 10px;
  margin-right: 10px;
}

button {
  padding: 10px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  background-color: #fff;
  padding: 10px;
  margin-bottom: 5px;
  border-radius: 4px;
}

  6. Configurando o Vercel para Deploy

    Para realizar o deploy da sua aplicação, crie uma conta no Vercel. Depois de criar a conta, você pode conectar o seu repositório do GitHub onde você irá enviar o seu código. O Vercel irá automaticamente configurar o deploy contínuo da sua aplicação sempre que você realizar uma nova atualização no repositório.

    commands
    # Acesse o Vercel e clique em 'New Project'
    # Importar o repositório do GitHub
    # Seguir as instruções para configurar o deploy

  7. Implementação de Testes com Jest

    Vamos adicionar testes unitários utilizando Jest. Primeiro, instale as dependências com `npm install –save-dev jest @types/jest ts-jest`. Em seguida, crie um arquivo `tasks.test.tsx` na pasta `__tests__` e implemente os testes para sua funcionalidade de tarefas.

    tasks.test.tsx
    import { render, screen, fireEvent } from '@testing-library/react';
import Tasks from '../pages/tasks';

describe('Tasks Component', () => {
  test('renders without crashing', () => {
    render(<Tasks />);
    expect(screen.getByText(/Gerenciador de Tarefas/i)).toBeInTheDocument();
  });

  test('adds a task', () => {
    render(<Tasks />);
    const input = screen.getByPlaceholderText(/Adicione uma nova tarefa/i);
    fireEvent.change(input, { target: { value: 'Nova Tarefa' } });
    fireEvent.click(screen.getByText(/Adicionar/i));
    expect(screen.getByText(/Nova Tarefa/i)).toBeInTheDocument();
  });
});

  8. Executando a Aplicação e Testes

    Utilize o comando `npm run dev` para iniciar o servidor de desenvolvimento. Acesse a aplicação em `http://localhost:3000/tasks`. Utilize `npm test` para executar os testes unitários que você configurou anteriormente.

    commands
    # Para iniciar a aplicação
    npm run dev
    # Para executar os testes
    npm test

Conclusão

Neste tutorial, você aprendeu a construir uma aplicação de gerenciamento de tarefas utilizando TypeScript e React com o Next.js. Vimos como estruturar o projeto, implementar funcionalidades básicas, estilizar a aplicação e configurar o deploy no Vercel. Além disso, também abordamos a importância de testar o código utilizando Jest. Com esse conhecimento, você está agora capacitado a desenvolver aplicações web robustas e escaláveis, aproveitando todas as vantagens que o ecossistema JavaScript moderno tem a oferecer.

Hashtags

#TypeScript #React #NextJS #Vercel #DesenvolvimentoWeb #JavaScript