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 🦅