Aplicacao-de-gestao-de-tarefas.md

Aplicação de Gestão de Tarefas - Intro

O nosso objectivo é criar uma aplicação de gestão de tarefas, qualquer coisa como:

Para isso, vamos voltar ao componente principal da aplicação - App.js - e vamos limpar todo o conteúdo que já não é necessário dentro da div principal:

import './App.css';

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

O React incentiva-nos a pensar de forma modular, por isso vamos dividir cada funcionalidade da aplicação no seu próprio sub-componente, começando pela parte que nos permite criar uma nova tarefa.

Este novo componente pode chamar-se, por exemplo, FormularioTarefa e deve ser declarado num ficheiro FormularioTarefa.js.

Este componente precisa de um input e de um botão - para o botão podemos usar o componente Button que já implementamos:

import Botao from './Button';

function FormularioTarefa() {
    return (
        <div>
            <input type="text" placeholder="Introduz a tua tarefa"/>
            <Botao title="Adicionar" onClickHandler={() => alert("Alguém clicou no botão de adicionar tarefa")}/>
        </div>        
    );
}

export default FormularioTarefa;

Como consegues ver, quando o botão é clickado, para já só lança um alerta.

Vamos agora voltar ao componente App e incluir este novo componente:

import './App.css';
import FormularioTarefa from './FormularioTarefa';

function App() {
  return (
    <div className="App">
      <FormularioTarefa/>
    </div>
  );
}

export default App;

Se olhares novamente para a aplicação deves ver:

Se clicares no botão deves conseguir ver o alerta.