Maximize suas habilidades de reação: crie um aplicativo de lista de tarefas do início ao fim (com TypeScript + Vite)

Nesta postagem do blog, veremos tudo o que você precisa para e um aplicativo React básico. Seja você um iniciante apenas começando com o React ou um desenvolvedor experiente procurando aprimorar suas habilidades, este guia é para você. entender criar Este guia o guiará por todo o processo de criação de um aplicativo de lista de tarefas totalmente funcional, incluindo design, layout, gerenciamento de estado e muito mais. Estaremos usando componentes funcionais e ganchos. Aprenderemos como usar o estado e as props para passar dados entre os componentes e como lidar com a entrada do usuário e atualizar o estado do seu aplicativo. No final deste guia, teremos uma compreensão sólida de como criar um aplicativo React do zero e você poderá usar seu novo conhecimento para criar seus próprios projetos React. Então vamos começar! *Você pode encontrar o código do aplicativo que vamos construir , e a versão ao vivo . aqui aqui uma breve introdução Usaremos o TypeScript para escrever o código e o Vite para desenvolver e criar o aplicativo. TypeScript é uma linguagem de programação fortemente tipada que se baseia em JavaScript. Em termos práticos, se você já conhece JavaScript, tudo o que precisa aprender para usar o TypeScript é como usar tipos e interfaces. TypeScript Tipos e interfaces nos permitem definir os tipos de dados que estamos usando no código. Com isso, podemos detectar bugs no início e evitar problemas no futuro. Por exemplo, se uma função receber um , mas passarmos uma , o TypeScript reclamará imediatamente: number string const someFunc = (parameter: number) => {...}; someFunc('1') // Argument of type 'string' is not assignable to parameter of type 'number'. Se estivéssemos usando JavaScript, provavelmente só pegaríamos o bug mais tarde. Nem sempre precisamos especificar o tipo, pois o TypeScript pode inferi-los automaticamente com mais frequência. Você pode aprender os fundamentos do TypeScript . (Ou simplesmente ignore os tipos.) aqui vite A maneira mais comum de ativar um aplicativo React é provavelmente usando . Em vez disso, usaremos (pronunciado como “veet”). Mas não se preocupe, é tão simples - mas mais eficiente. create-react-app Vite Com ferramentas como (usado pelo create-react-app sob o capô), todo o seu aplicativo precisa ser agrupado em um único arquivo antes de ser servido no navegador. O Vite, por outro lado, aproveita os módulos ES nativos no navegador para tornar o agrupamento mais eficiente com o , servindo partes do código-fonte conforme necessário. o webpack Rollup O Vite também pode acelerar muito o tempo de desenvolvimento com o Hot Module Replacement — o que significa que sempre que alterações são feitas no código-fonte, apenas as alterações são atualizadas, em vez de todo o aplicativo. Além disso, o Vite oferece suporte nativo para Typescript, JSX e TSX, CSS e muito mais. Da mesma forma que create-react-app, o Vite oferece uma ferramenta chamada create-vite, que nos permite iniciar um novo projeto rapidamente usando templates básicos, incluindo opções para Vanilla JS, ou usando bibliotecas como React. Para ser claro, não de uma ferramenta como Vite ou create-react-app para construir aplicativos React, mas eles facilitam nossa vida cuidando da configuração do projeto, empacotando o código, usando transpilers e muito mais. precisamos Mergulhando no React JSX/TSX O React nos permite adicionar marcações diretamente no código que posteriormente será compilado para JavaScript simples. Isso é chamado . Quando estamos usando JSX, podemos salvar nossos arquivos como .jsx para JavaScript ou .tsx para TypeScript. de JSX Se parece com isso: const element = Hello, world! ; É semelhante ao HTML, mas está embutido no arquivo JavaScript e nos permite manipular a marcação com lógica de programação. Também podemos adicionar código JavaScript dentro do JSX, desde que esteja entre chaves. Por exemplo, se tivermos uma matriz de texto que queremos renderizar como elementos de parágrafo diferentes, podemos fazer isso: const paragraphs = ["First", "Second", "Third"]; paragraphs.map((paragraph) => {paragraph}

); E seria compilado para algo assim: First

Second

Third

Mas se tentarmos fazer exatamente isso, não funcionará. Isso porque o React trabalha com componentes, e o JSX precisa ser renderizado dentro desses componentes. Componentes de reação Os componentes do React podem ser escritos usando JavaScript ou apenas simples. Estaremos focando em componentes de função, pois eles são a maneira mais atualizada e recomendada de escrever componentes React hoje. classes funções Um componente é definido por uma função que retornará o JSX que será compilado e renderizado pelo navegador. Então, para estender o exemplo acima, se quisermos renderizar os elementos do parágrafo, ficaria algo assim: // Define the component const Component = () => { const paragraphs = ["First", "Second", "Third"]; return ( <> {paragraphs.map((paragraph) => ( {paragraph}

))} ); }; // Use the component in the same way you use an HTML element in the JSX const OtherComponent = () => { return ; }; Adereços Agora talvez queiramos reutilizar este componente com informações diferentes. Podemos fazer isso usando props — que é apenas um objeto JavaScript contendo alguns dados. Em nosso exemplo, em vez de codificar o array, poderíamos passá-lo para o componente. O resultado será o mesmo, mas agora o componente será reutilizável. Se estivermos usando TypeScript, precisamos especificar os tipos de dados dentro do objeto props (não há contexto para o que eles são, então o TypeScript não pode inferi-los), que neste caso é um array de strings ( ). string[] const Component = (props: { paragraphs: string[] }) => { <> {props.paragraphs.map((paragraph) => ( {paragraph}

))} ; }; const OtherComponent = () => { const paragraphs = ["First", "Second", "Third"]; return ; }; Estado Se quisermos fazer um componente interativo, vamos precisar armazenar informações no estado do componente, para que ele possa “lembrar” dela. Por exemplo, se quisermos definir um contador simples que mostre o número de vezes que um botão é clicado, precisamos de uma forma de armazenar e atualizar esse valor. O React nos permite fazer isso com o gancho (um é uma função que permite que você “enganche” o ). useState gancho estado do React e os recursos do ciclo de vida Chamamos o gancho com o valor inicial, e ele nos retorna um array com o próprio valor e uma função para atualizá-lo. useState import { useState } from "react"; const Counter = () => { const [count, setCount] = useState(0); return ( <> {count} setCount(count + 1)}>Increment count ); }; Com esse conhecimento, agora estamos prontos para começar a construir nosso aplicativo React. Criando o projeto Dependências Para usar o Vite vamos precisar de **node** e um gerenciador de pacotes. Para instalar o node basta escolher uma das opções dependendo do seu sistema e configurações. Se você estiver usando Linux ou Mac, também poderá instalá-lo usando o . aqui Homebrew O gerenciador de pacotes pode ser ou . Neste post vamos usar . npm yarn npm Criando o projeto Em seguida, é hora de criar o projeto. No terminal, navegamos até o diretório onde o projeto será criado e executamos o comando create-vite. $ npm create vite@latest Podemos ser solicitados a instalar pacotes adicionais (como create-vite). Digite e pressione enter para continuar. y Need to install the following packages: create-vite@4.0.0 Ok to proceed? (y) Em seguida, seremos solicitados a inserir as informações do projeto. Digite o do projeto. Eu escolhi . nome my-react-project ? Project name: › my-react-project Selecione como a “estrutura”. Reagir React é tecnicamente , mas não se preocupe com isso. uma biblioteca e não um framework ? Select a framework: › - Use arrow-keys. Return to submit. Vanilla Vue ❯ React Preact Lit Svelte Others Selecione como variante. TypeScript + SWC (sigla para Speedy Web Compiler) é um compilador TypeScript/JavaScript super-rápido escrito em Rust. Eles afirmam ser “20x mais rápido que o Babel em um único thread e 70x mais rápido em quatro núcleos”. SWC ? Select a variant: › - Use arrow-keys. Return to submit. JavaScript TypeScript JavaScript + SWC ❯ TypeScript + SWC Está feito, o projeto está criado. Para iniciá-lo no modo de desenvolvimento, precisamos mudar para o diretório do projeto, instalar as dependências e executar o comando dev script. cd my-react-project npm install npm run dev Após alguns segundos, veremos algo semelhante a isto: VITE v4.0.4 ready in 486 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h to show help Se abrirmos nosso navegador e navegarmos para / veremos a página padrão do Vite + React: http://localhost:5173 Isso significa que tudo está como deveria e podemos começar a trabalhar em nosso aplicativo. Construindo o aplicativo Estrutura de arquivo e configuração inicial Se abrirmos o projeto em nosso editor de código ou IDE de escolha, veremos uma estrutura de arquivo como esta: Podemos excluir alguns dos arquivos padronizados, já que não os usaremos (todos os arquivos .svg e .css). O código na função App pode ser excluído para nos deixar com isso: function App() { return ( ) } export default App Voltaremos a este arquivo mais tarde. Estilo O estilo não é o foco aqui, mas usaremos Tailwind CSS, que é uma biblioteca que nos permite estilizar elementos HTML adicionando classes a eles. Siga para ver os estilos refletidos em seu próprio projeto. estas instruções Caso contrário, você pode simplesmente ignorar as classes no código. Pensando no design: layout dos componentes O processo de design é parte integrante do desenvolvimento de um aplicativo e não deve ser negligenciado. Para construir nosso aplicativo de lista de tarefas, precisamos primeiro pensar no layout dos componentes. Começamos simulando uma IU básica e delineando uma hierarquia dos componentes envolvidos. Se você não é um designer, ainda não precisa ser perfeito ou a interface do usuário final em termos de cores e posicionamento exato — é mais importante pensar na estrutura dos componentes. Idealmente, nossos componentes devem ser responsáveis por apenas uma coisa, seguindo o . princípio da responsabilidade única Na imagem abaixo, os nomes em roxo são os componentes que iremos construir — todo o resto são elementos HTML nativos. Se eles estiverem um dentro do outro, significa que provavelmente haverá um relacionamento pai-filho. Adereços: construindo uma versão estática Depois de ter um esboço, podemos começar a construir uma versão estática do aplicativo. Ou seja, apenas os elementos da interface do usuário, mas ainda sem interatividade. Esta parte é bastante direta e envolve muita digitação e pouco raciocínio depois que você pega o jeito. Você pode encontrar o código da versão estática neste , na ramificação “static-version”. O código para o aplicativo totalmente funcional é o branch principal. repositório do GitHub Recipiente Conforme descrito acima, teremos um Container que é reutilizado para cada seção do aplicativo. Este Container mostra uma das formas de compor diferentes elementos: passando-os como filhos. // src/components/Container.tsx const Container = ({ children, title, }: { children: JSX.Element | JSX.Element[]; title?: string; }) => { return ( {title && {title} } {children} ); }; export default Container; Recebe um objeto props com um parâmetro do tipo . Isso significa que podemos compô-lo com qualquer outro elemento HTML ou qualquer outro componente que criarmos. Ele pode ser renderizado onde quisermos dentro do container — neste caso dentro do segundo div. children JSX.Element | JSX.Element[] Em nosso aplicativo, ele renderizará cada seção (definida abaixo) quando as usarmos dentro do componente App. O Container também recebe uma prop opcional chamada , que será renderizada dentro de um h2 sempre que existir. string title // src/App.tsx import Container from "./components/Container"; import Input from "./components/Input"; import Summary from "./components/Summary/Summary"; import Tasks from "./components/Tasks/Tasks"; function App() { return ( ); } export default App; Resumo A primeira seção é um resumo (componente Resumo) mostrando três itens (SummaryItem): o número total de tarefas, o número de tarefas pendentes e o número de tarefas concluídas. Esta é outra forma de compor componentes: basta usá-los na declaração de retorno de outro componente. (É importante nunca um componente dentro de outro componente, pois isso pode levar a reprocessamentos e bugs desnecessários.) definir Por enquanto podemos apenas usar dados estáticos nos dois componentes. // src/components/Summary/SummaryItem.tsx const SummaryItem = ({ itemName, itemValue, }: { itemName: string; itemValue: number; }) => { return ( {itemName} {itemValue} ); }; export default SummaryItem; // src/components/Summary/Summary.tsx import SummaryItem from "./SummaryItem"; const Summary = () => { return ( <> ); }; export default Summary; Você notará que SummaryItem usa dois props: , do tipo string, e , do tipo . Essas props são passadas quando o componente SummaryItem é usado dentro do componente Summary e, em seguida, renderizado no SummaryItem JSX. itemName itemValue number Tarefas Da mesma forma, para a seção de tarefas (a última), temos um componente Tasks que renderiza os componentes TaskItem. Também com dados estáticos por enquanto. Posteriormente, precisaremos passar um e um como props para o componente TaskItem para torná-lo reutilizável e dinâmico. nome de tarefa status // src/components/Tasks/TaskItem.tsx const TaskItem = () => { return ( Task name Delete ); }; export default TaskItem; // src/components/Tasks/Tasks.tsx import TaskItem from "./TaskItem"; const Tasks = () => { return ( ); }; export default Tasks; Entrada Por fim, o componente Input é um formulário com um rótulo, um input do tipo texto e um botão para “Adicionar tarefa”. Por enquanto não adianta nada, mas em breve mudaremos isso. // src/components/Input.tsx const InputContainer = () => { return ( Enter your next task: Add task ); }; export default InputContainer; Estado: adicionando interatividade Para adicionar interatividade no React, precisamos armazenar informações no estado do componente. Mas antes de fazer isso, precisamos pensar em como queremos que os dados mudem ao longo do tempo. Precisamos identificar desses dados e identificar devemos usar para armazenar esse estado. uma representação mínima quais componentes Uma representação mínima do estado O estado deve conter todas as informações necessárias para tornar nosso aplicativo interativo — mas nada mais. Se pudermos calcular um valor a partir de um valor diferente, devemos manter apenas um deles no estado. Isso torna nosso código não apenas menos prolixo, mas também menos sujeito a bugs envolvendo valores de estado contraditórios. Em nosso exemplo, podemos pensar que precisamos rastrear valores para tarefas totais, tarefas pendentes e tarefas concluídas. Mas para rastrear as tarefas, basta ter um único array com objetos representando cada tarefa e seu status (pendente ou concluído). const tasks = [ { name: "task one", done: false, }, { name: "task two", done: true, }, ]; Com esses dados, sempre podemos encontrar todas as outras informações de que precisamos no momento da renderização usando métodos de array. Também evitamos a possibilidade de contradições, como ter um total de 4 tarefas, mas apenas 1 tarefa pendente e 1 tarefa concluída, por exemplo. Também precisamos de estado em nosso formulário (no componente de entrada) para que possamos torná-lo interativo. Onde o estado deveria morar Pense assim: quais componentes precisam acessar os dados que vamos armazenar no estado? Se for um único componente, o estado pode residir nesse próprio componente. Se for mais de um componente que precisa dos dados, você deve encontrar o pai comum para esses componentes. No nosso exemplo, o estado necessário para controlar o componente Input só precisa ser acessado lá, então pode ser local para este componente. // src/components/Input.tsx import { useState } from "react"; const InputContainer = () => { const [newTask, setNewTask] = useState(""); // Initialize newTask and setNewTask return ( Enter your next task: setNewTask(e.target.value)} // Set newTask to the input value whenever the user types something /> Add task ); }; export default InputContainer; O que isso está fazendo é exibir nosso valor na entrada e chamar a função sempre que a entrada mudar (ou seja, quando o usuário digitar algo). newTask setNewTask Não veremos mudanças imediatas na interface do usuário, mas isso é necessário para que possamos controlar a entrada e ter acesso ao seu valor para usá-lo posteriormente. O estado para rastrear as tarefas, no entanto, tem que ser tratado de forma diferente, pois precisa ser acessado nos componentes SummaryItem (precisamos mostrar o número de tarefas totais, pendentes e concluídas) e também nos componentes TaskItem (precisamos para exibir as próprias tarefas). E precisa estar no mesmo estado porque essas informações devem estar sempre sincronizadas. Vamos dar uma olhada em nossa árvore de componentes (você pode usar as para isso). ferramentas de desenvolvimento do React Podemos ver que o primeiro componente pai comum é App. Portanto, é aqui que nosso estado para as tarefas ficará. Com o estado definido, tudo o que restará será passar os dados como props para os componentes que precisam usá-los. (Ainda não estamos preocupados em como fazer e persistir quaisquer alterações no estado pai, essa é a próxima parte.) // src/App.tsx import { useState } from "react"; import { v4 as uuidv4 } from "uuid"; import Container from "./components/Container"; import Input from "./components/Input"; import Summary from "./components/Summary/Summary"; import Tasks from "./components/Tasks/Tasks"; export interface Task { name: string; done: boolean; id: string; } const initialTasks = [ { name: "task one", done: false, id: uuidv4(), }, { name: "task two", done: true, id: uuidv4(), }, ]; function App() { const [tasks, setTasks] = useState (initialTasks); return ( ); } export default App; Aqui estamos inicializando o valor das tarefas com dados fictícios ( ), apenas para que possamos visualizá-lo antes que o aplicativo seja concluído. Posteriormente, podemos alterá-lo para uma matriz vazia, para que um novo usuário não veja nenhuma tarefa ao abrir o aplicativo. initialTasks Além das propriedades e , também estamos adicionando um id aos nossos objetos de tarefa, pois será necessário em breve. name done Estamos definindo uma com os tipos de valor nos objetos de tarefa e passando para a função . Isso é necessário neste caso, pois o TypeScript não conseguirá inferi-lo quando mudarmos o valor inicial de para um array vazio, ou quando o passarmos como props. interface useState tasks Por fim, observe que estamos passando as tarefas como acessórios para os componentes Resumo e Tarefas. Esses componentes precisarão ser alterados para acomodar isso. // src/components/Summary/Summary.tsx import { Task } from "../../App"; import SummaryItem from "./SummaryItem"; const Summary = ({ tasks }: { tasks: Task[] }) => { const total = tasks.length; const pending = tasks.filter((t) => t.done === false).length; const done = tasks.filter((t) => t.done === true).length; return ( <> ); }; export default Summary; Atualizamos o componente Summary para que agora ele aceite como prop. Também definimos o valor , e , que serão passados como props para os componentes SummaryItem no lugar dos estáticos que tínhamos antes. tasks total pending done itemValue // src/components/Tasks/Tasks.tsx import { Task } from "../../App"; import TaskItem from "./TaskItem"; const Tasks = ({ tasks }: { tasks: Task[] }) => { return ( {tasks.map((t) => ( ))} ); }; export default Tasks; // src/components/Tasks/TaskItem.tsx import { useState } from "react"; const TaskItem = ({ name }: { name: string }) => { const [done, setDone] = useState(false); return ( setDone(!done)} /> {name} Delete ); }; export default TaskItem; Para o componente Tasks, também tomamos s como prop e mapeamos sua propriedade para os componentes TaskItem. Como resultado, obtemos um componente TaskItem para cada objeto dentro da matriz de . Também atualizamos o componente TaskItem para aceitar o como prop. task name tasks name É aqui que o id é útil, pois precisamos passar uma chave única toda vez que tivermos uma lista de componentes filhos. Se não adicionarmos a chave, isso pode . (Em um aplicativo de produção, o id provavelmente viria do back-end.) levar a erros no rerender O resultado por enquanto é este: Já podemos ver os números resumidos e os nomes das tarefas refletindo nossos dados fictícios. Mas ainda não temos uma maneira de adicionar ou excluir tarefas. Adicionando fluxo de dados inverso Para finalizar nosso aplicativo, precisamos de uma maneira de alterar o estado do componente App (onde estão os dados das tarefas) dos componentes filhos Input e TaskItem. Para fazer isso, podemos usar as funções geradas pelo gancho para definir manipuladores de eventos e passá-los como props. Depois de fazer isso, simplesmente os chamamos durante a interação apropriada do usuário dos componentes filhos. useState Certifique-se de , pois isso levará a erros. Sempre substitua o objeto de estado por um novo ao atualizá-lo. nunca alterar o estado sempre que estiver atualizando Abaixo está nosso componente App final com os manipuladores declarados e passados como props para os componentes Input e Tasks. retorna um novo array com as tarefas antigas mais a nova. retorna um novo array com a propriedade oposta, para o especificado. retorna um novo array sem a tarefa com o especificado. handleSubmit toggleDoneTask done id handleDeleteTask id // src/App.tsx import { FormEvent, useState } from "react"; import { v4 as uuidv4 } from "uuid"; import Container from "./components/Container"; import Input from "./components/Input"; import Summary from "./components/Summary/Summary"; import Tasks from "./components/Tasks/Tasks"; export interface Task { name: string; done: boolean; id: string; } function App() { const [tasks, setTasks] = useState ([]); const handleSubmit = (e: FormEvent , value: string) => { e.preventDefault(); const newTask = { name: value, done: false, id: uuidv4(), }; setTasks((tasks) => [...tasks, newTask]); }; const toggleDoneTask = (id: string, done: boolean) => { setTasks((tasks) => tasks.map((t) => { if (t.id === id) { t.done = done; } return t; }) ); }; const handleDeleteTask = (id: string) => { setTasks((tasks) => tasks.filter((t) => t.id !== id)); }; return ( ); } export default App; Este é o componente de entrada final usando para atualizar o estado do componente App. handleSubmit // src/components/Input.tsx import { FormEvent, useState } from "react"; const InputContainer = ({ handleSubmit, }: { handleSubmit: (e: FormEvent , value: string) => void; }) => { const [newTaskName, setNewTaskName] = useState(""); return ( { handleSubmit(e, newTaskName); setNewTaskName(""); }} > Enter your next task: setNewTaskName(e.target.value)} /> Add task ); }; export default InputContainer; Este é o componente Tasks final, que atualizamos para passar as props de App para TaskItem. Também adicionamos um operador ternário para retornar “Nenhuma tarefa ainda!” quando não há tarefas. // src/components/Tasks/Tasks.tsx import { Task } from "../../App"; import TaskItem from "./TaskItem"; const Tasks = ({ tasks, toggleDone, handleDelete, }: { tasks: Task[]; toggleDone: (id: string, done: boolean) => void; handleDelete: (id: string) => void; }) => { return ( {tasks.length ? ( tasks.map((t) => ( )) ) : ( No tasks yet! )} ); }; export default Tasks; E este é o componente TaskItem final, usando e para atualizar o estado do componente App. toggleDone handleDelete // src/components/Tasks/TaskItem.tsx const TaskItem = ({ name, done, id, toggleDone, handleDelete, }: { name: string; done: boolean; id: string; toggleDone: (id: string, done: boolean) => void; handleDelete: (id: string) => void; }) => { return ( toggleDone(id, !done)} /> {name} handleDelete(id)} > Delete ); }; export default TaskItem; E aqui está nosso aplicativo final depois de adicionarmos algumas tarefas! Se você estiver codificando junto, poderá implantar seu próprio aplicativo seguindo . estas instruções Você pode encontrar o repositório com todo o código que analisamos e a versão ao vivo do aplicativo . aqui aqui palavras finais Em conclusão, criar um aplicativo de lista de tarefas pode ser uma ótima maneira de aprender e solidificar nossa compreensão do React e seus princípios. Dividindo o processo em pequenas etapas e seguindo as melhores práticas, podemos criar um app funcional em um tempo relativamente curto. Nós cobrimos: os principais conceitos de componentes, estado e fluxo de dados inverso. o design e a arquitetura do aplicativo. melhores práticas, como o princípio da responsabilidade única Seguindo as etapas descritas neste guia, você deve ter um conhecimento sólido de como criar um aplicativo React simples e ser capaz de aplicá-lo em seus próprios projetos. Codificação feliz!