Construindo um Aplicativo de Tarefas Simples com React 📝

Neste tutorial, mostraremos como criar um aplicativo de tarefas simples, também conhecido como To-Do List, usando React, uma das bibliotecas de JavaScript mais populares para a construção de interfaces de usuário.

Preparando o Ambiente

Antes de começar, certifique-se de que você tem Node.js e npm instalados em seu computador. Se você ainda não tem, pode baixá-los aqui. Em seguida, você precisará instalar o Create React App, uma ferramenta que permite criar facilmente novos projetos React:

npx create-react-app todo-app

Construindo o Aplicativo

Vamos começar a construção do nosso aplicativo de tarefas. Crie um novo componente chamado TodoItem em um arquivo chamado TodoItem.js. Este componente representará uma única tarefa na nossa lista:

import React from 'react';function TodoItem(props) {  return (    <div>      <input type="checkbox" />      <p>{props.item.text}</p>    </div>  );}export default TodoItem;

Agora, vamos criar um componente TodoList que vai renderizar uma lista de TodoItem. Para simplificar, vamos começar com uma lista estática de tarefas:

import React from 'react';import TodoItem from './TodoItem';class TodoList extends React.Component {  constructor() {    super();    this.state = {      todos: [        { text: 'Lavar a louça' },        { text: 'Limpar a casa' },        { text: 'Fazer compras' },      ],    };  }  render() {    const todoItems = this.state.todos.map(item => (      <TodoItem key={item.text} item={item} />    ));    return <div>{todoItems}</div>;  }}export default TodoList;

Executando o Aplicativo

Para iniciar o aplicativo, execute o seguinte comando no diretório raiz do projeto:

npm start

Isso iniciará o servidor de desenvolvimento e abrirá o aplicativo no navegador.

Conclusão

Parabéns! Você criou um aplicativo de tarefas básico com React. Obviamente, este é apenas um começo. Você pode expandir esse aplicativo para permitir a adição de novas tarefas, marcar tarefas como concluídas, e muito mais!

Para continuar aprendendo e melhorando suas habilidades em React, confira o artigo sobre JavaScript e React: Criando Seu Primeiro Componente.

Bora pra cima 🦅