Introdução

Com a crescente popularidade do desenvolvimento front-end, React se destaca como uma das bibliotecas mais utilizadas para criar interfaces de usuário dinâmicas e responsivas. Quando combinado com TypeScript, oferece uma estrutura robusta e segura para o desenvolvimento, permitindo a detecção de erros em tempo de compilação e melhor organização do código. Este artigo apresenta uma abordagem prática para construir uma aplicação web utilizando React e TypeScript, ideal para desenvolvedores iniciantes e intermediários que buscam aprofundar seus conhecimentos e aplicar essas tecnologias em projetos reais.

Contexto ou Teoria

React, desenvolvido pelo Facebook, é uma biblioteca JavaScript para construir interfaces de usuário. Sua principal característica é o uso de componentes, que permitem dividir a interface em partes reutilizáveis. Por outro lado, TypeScript é um superconjunto do JavaScript que adiciona tipagem estática ao código, ajudando a evitar erros comuns e facilitando a manutenção. A combinação dessas duas tecnologias não só melhora a qualidade do código, mas também a experiência do desenvolvedor, oferecendo ferramentas como IntelliSense e autocompletar em editores compatíveis.

Demonstrações Práticas

Para iniciar, vamos criar uma aplicação simples que exibe uma lista de tarefas (To-Do List). Primeiro, é necessário configurar o ambiente. Siga os passos abaixo:

# Instale o Create React App com TypeScript
npx create-react-app my-todo-app --template typescript
cd my-todo-app
npm start

Após a criação do projeto, abra o arquivo src/App.tsx e substitua seu conteúdo pelo seguinte código:

import React, { useState } from 'react';
import './App.css';

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

const App: React.FC = () => {
  const [tasks, setTasks] = useState([]);
  const [taskTitle, setTaskTitle] = useState('');

  const addTask = () => {
    if (taskTitle.trim()) {
      const newTask: Task = {
        id: Date.now(),
        title: taskTitle,
        completed: false,
      };
      setTasks([...tasks, newTask]);
      setTaskTitle('');
    }
  };

  const toggleTaskCompletion = (id: number) => {
    const updatedTasks = tasks.map(task =>
      task.id === id ? { ...task, completed: !task.completed } : task
    );
    setTasks(updatedTasks);
  };

  return (
    

      
Lista de Tarefas
       setTaskTitle(e.target.value)}
        placeholder="Adicione uma nova tarefa"
      />
      Adicionar
      

        {tasks.map(task => (
          

            {task.title}
             toggleTaskCompletion(task.id)}>Concluir
          
        ))}
      
    
  );
};

export default App;

Este código cria uma aplicação simples que permite adicionar e marcar tarefas como concluídas. A interface é construída utilizando componentes funcionais do React, e a tipagem é aplicada nas variáveis e estados, garantindo maior segurança no código.

Agora, vamos adicionar um estilo básico ao arquivo src/App.css para tornar a aplicação mais atraente:

.App {
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
}

input {
  padding: 10px;
  margin: 10px 0;
}

button {
  padding: 10px;
  margin-left: 5px;
  cursor: pointer;
}

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

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Após adicionar o estilo, a aplicação já deve estar bem estruturada e visualmente agradável. Você pode agora executar a aplicação com o comando npm start e ver sua lista de tarefas em ação.

Dicas ou Boas Práticas

 
• Organize seu código em pastas, separando componentes, tipos e estilos. Isso melhora a manutenibilidade do projeto.

 

• Utilize hooks, como useEffect, para lidar com efeitos colaterais, como chamadas a APIs.

 

• Adote um sistema de tipagem rigoroso. Sempre defina tipos para props e estados, evitando problemas futuros.

 

• Considere usar bibliotecas como React Router para gerenciar navegação em aplicações maiores.

 

• Realize testes em seus componentes utilizando Jest e React Testing Library para garantir que seu código funcione como esperado.

Conclusão com Incentivo à Aplicação

A combinação de React e TypeScript proporciona uma base sólida para o desenvolvimento de aplicações web modernas e escaláveis. Através deste tutorial, você aprendeu a criar uma aplicação de lista de tarefas, explorando os conceitos de componentes, estados e tipagem. Agora é hora de aplicar esse conhecimento em seus próprios projetos, experimentando novas funcionalidades e aprimorando suas habilidades. Lembre-se, a prática leva à perfeição!

Está desenvolvendo um projeto digital e precisa de um site moderno, performático e bem estruturado?
Eu posso te ajudar a transformar essa ideia em uma solução completa — com foco em performance, design e funcionalidade.
Acesse yurideveloper.com.br ou chame no WhatsApp: (37) 99670-7290. Vamos criar algo incrível juntos!