Desenvolvendo Aplicações Modernas com React e TypeScript

Introdução

O desenvolvimento de aplicações web modernas tem se tornado cada vez mais complexo, exigindo ferramentas e práticas que garantam eficiência, escalabilidade e qualidade do código. React, uma biblioteca JavaScript para construir interfaces de usuário, combinada com TypeScript, uma linguagem superset de JavaScript que adiciona tipagem estática, oferece uma solução poderosa para desenvolvedores. Juntas, essas tecnologias proporcionam uma base sólida para criar aplicações robustas e fáceis de manter.

Contexto ou Teoria

React foi criado pelo Facebook e se tornou uma das bibliotecas mais populares para construção de interfaces em aplicações web. Sua abordagem baseada em componentes permite que desenvolvedores construam UIs de forma modular, facilitando a reutilização de código e a manutenção. Por outro lado, TypeScript, desenvolvido pela Microsoft, traz benefícios significativos, como a detecção de erros em tempo de compilação e recursos avançados de desenvolvimento, como interfaces e tipos genéricos.

Com o aumento da complexidade das aplicações, a necessidade de garantir a qualidade do código se tornou mais evidente. A tipagem estática do TypeScript permite que os desenvolvedores identifiquem erros antes mesmo da execução, evitando muitos problemas comuns encontrados em projetos JavaScript puros. Juntas, essas ferramentas formam um ecossistema robusto que ajuda equipes a desenvolverem aplicações de forma mais eficiente e segura.

Demonstrações Práticas

Para ilustrar como usar React com TypeScript, vamos criar uma aplicação simples de lista de tarefas. Essa aplicação permitirá adicionar, remover e marcar tarefas como concluídas. Vamos explorar a estrutura básica do projeto, a configuração do TypeScript e a implementação dos componentes React.

1. Configurando o Ambiente

Primeiramente, precisamos configurar nosso projeto com Create React App, que oferece suporte nativo ao TypeScript. Execute o seguinte comando no terminal:

npx create-react-app minha-lista --template typescript

Após a criação do projeto, navegue até a pasta do projeto:

cd minha-lista

2. Estrutura do Projeto

A estrutura básica de nosso projeto será a seguinte:

• src/
  • components/
    • Task.tsx
    • TaskList.tsx
    • TaskForm.tsx
  • App.tsx
  • index.tsx

3. Criando Componentes

Agora, vamos implementar os componentes necessários.

3.1 Componente Task

O componente Task representa uma única tarefa. Crie o arquivo Task.tsx na pasta components e adicione o seguinte código:

import React from 'react';

interface TaskProps {
  task: {
    id: number;
    title: string;
    completed: boolean;
  };
  toggleTask: (id: number) => void;
  removeTask: (id: number) => void;
}

const Task: React.FC = ({ task, toggleTask, removeTask }) => {
  return (
    

       toggleTask(task.id)}
      />
      
        {task.title}
      
       removeTask(task.id)}>Remover
    
  );
};

export default Task;

3.2 Componente TaskList

O componente TaskList renderiza uma lista de tarefas. Crie o arquivo TaskList.tsx:

import React from 'react';
import Task from './Task';

interface Task {
  id: number;
  title: string;
  completed: boolean;
}

interface TaskListProps {
  tasks: Task[];
  toggleTask: (id: number) => void;
  removeTask: (id: number) => void;
}

const TaskList: React.FC = ({ tasks, toggleTask, removeTask }) => {
  return (
    

      {tasks.map(task => (
        
      ))}
    
  );
};

export default TaskList;

3.3 Componente TaskForm

O componente TaskForm permite adicionar novas tarefas. Crie o arquivo TaskForm.tsx:

import React, { useState } from 'react';

interface TaskFormProps {

  addTask: (title: string) => void;

}
const TaskForm: React.FC = ({ addTask }) => {

  const [title, setTitle] = useState('');
  const handleSubmit = (e: React.FormEvent) => {

    e.preventDefault();

    if (title) {

      addTask(title);

      setTitle('');

    }

  };
  return (

    <