edupsousa/tarefas.html

## tarefas.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div id="app" class="col"></div>
      </div>
    </div>

    <script
      src="https://unpkg.com/react@17/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script src="tarefas.jsx" type="text/babel"></script>
    <script type="text/babel">
      var rootElement = React.createElement(App);
      var container = document.querySelector("#app");
      ReactDOM.render(rootElement, container);
    </script>
  </body>
</html>

## tarefas.jsx
function App() {
  const [tarefas, setTarefas] = React.useState([]);

  const adicionarTarefa = (nomeTarefa) => {
    setTarefas([...tarefas, nomeTarefa]);
  };

  const removerTarefa = (index) => {
    const items = [...tarefas];
    items.splice(index, 1);
    setTarefas(items);
  }

  return (
    <div>
      <h3>Lista de Tarefas</h3>
      <NovaTarefa adicionarTarefa={adicionarTarefa} />
      <ListaTarefas tarefas={tarefas} removerTarefa={removerTarefa} />
    </div>
  );
}

function NovaTarefa(props) {
  const adicionarTarefa = props.adicionarTarefa;
  const [nomeTarefa, setNomeTarefa] = React.useState('');

  const handleSubmit = (ev) => {
    ev.preventDefault();

    adicionarTarefa(nomeTarefa);
    setNomeTarefa('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className="row">
        <div className="col-auto">
          <label htmlFor="" className="col-form-label">
            Nova Tarefa
          </label>
        </div>
        <div className="col">
          <input type="text" className="form-control" value={nomeTarefa} onChange={ev => setNomeTarefa(ev.target.value)} />
        </div>
        <div className="col-auto">
          <button type="submit" className="btn btn-primary">Adicionar</button>
        </div>
      </div>
    </form>
  );
}

function ListaTarefas(props) {
  const tarefas = props.tarefas;
  const removerTarefa = props.removerTarefa;

  if (tarefas.length === 0) return null;

  return (
    <ul className="list-group mt-3">
      {tarefas.map((tarefa, index) => (
        <li className="list-group-item" key={index}>
          <div className="row">
            <div className="col">{tarefa}</div>
            <div className="col-auto">
              <button type="button" className="btn-close" onClick={() => removerTarefa(index)}></button>
            </div>
          </div>
        </li>
      ))}
    </ul>
  );
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<link
	href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
	rel="stylesheet"
	integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
	crossorigin="anonymous"
	/>
	</head>
	<body>
	<div class="container">
	<div class="row">
	<div id="app" class="col"></div>
	</div>
	</div>

	<script
	src="https://unpkg.com/react@17/umd/react.development.js"
	crossorigin
	></script>
	<script
	src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
	crossorigin
	></script>
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

	<script src="tarefas.jsx" type="text/babel"></script>
	<script type="text/babel">
	var rootElement = React.createElement(App);
	var container = document.querySelector("#app");
	ReactDOM.render(rootElement, container);
	</script>
	</body>
	</html>
	function App() {
	const [tarefas, setTarefas] = React.useState([]);

	const adicionarTarefa = (nomeTarefa) => {
	setTarefas([...tarefas, nomeTarefa]);
	};

	const removerTarefa = (index) => {
	const items = [...tarefas];
	items.splice(index, 1);
	setTarefas(items);
	}

	return (
	<div>
	<h3>Lista de Tarefas</h3>
	<NovaTarefa adicionarTarefa={adicionarTarefa} />
	<ListaTarefas tarefas={tarefas} removerTarefa={removerTarefa} />
	</div>
	);
	}

	function NovaTarefa(props) {
	const adicionarTarefa = props.adicionarTarefa;
	const [nomeTarefa, setNomeTarefa] = React.useState('');

	const handleSubmit = (ev) => {
	ev.preventDefault();

	adicionarTarefa(nomeTarefa);
	setNomeTarefa('');
	};

	return (
	<form onSubmit={handleSubmit}>
	<div className="row">
	<div className="col-auto">
	<label htmlFor="" className="col-form-label">
	Nova Tarefa
	</label>
	</div>
	<div className="col">
	<input type="text" className="form-control" value={nomeTarefa} onChange={ev => setNomeTarefa(ev.target.value)} />
	</div>
	<div className="col-auto">
	<button type="submit" className="btn btn-primary">Adicionar</button>
	</div>
	</div>
	</form>
	);
	}

	function ListaTarefas(props) {
	const tarefas = props.tarefas;
	const removerTarefa = props.removerTarefa;

	if (tarefas.length === 0) return null;

	return (
	<ul className="list-group mt-3">
	{tarefas.map((tarefa, index) => (
	<li className="list-group-item" key={index}>
	<div className="row">
	<div className="col">{tarefa}</div>
	<div className="col-auto">
	<button type="button" className="btn-close" onClick={() => removerTarefa(index)}></button>
	</div>
	</div>
	</li>
	))}
	</ul>
	);
	}