Objetivos

1. Entender como listas funcionam em Reat

Sumário

1. Baixar, inicializar e executar o projeto
2. Codificar listas em React
3. Publicar modificações do projeto

Baixar, inicializar e executar o projeto

$ rm -rf 2023-webapp

$ git clone <https://github.com/leonardo-minora/2023-webapp.git>

$ code 2023-webapp

$ cd 2023-webapp

[2023-webapp] $ npm i

[2023-webapp] $ npm run dev

Codificar listas em React

import { useState } from "react";
import "./App.css";

// componente REact vazio
const Componente = () => null;

// componente React
const Botao = (props: any) => {
  const titulo = props.titulo ? props.titulo : "texto padrão";
  const [contador, contar] = useState(2);
  // if (props.titulo) {
  //   titulo = props.titulo;
  // } else {
  //   titulo = "texto padrão";
  // }
  return (
    <>
      <button onClick={() => contar(contador + 1)}>
        {`${titulo} (${contador})`}
      </button>
    </>
  );
}

const ListaItem = (props: any) => {
  return <li>{props.titulo}</li>
}

const Lista = () => {
  const tarefas = [
    "Baixar o projeto do github",
    "Instalar bibliotecas do projeto",
    "Executar apliação web",
    "Programar em js e React",
    "Guardar as modificações no repositório local",
    "Publicar as modificações no github"
  ];
  return (
    <div className="card">
      <ul>
        {tarefas.map( (item, ind) => <ListaItem key={ind} titulo={item} />)
        /* 
        [
          <ListaItem indice={0} titulo={"Baixar o projeto do github"} />,
          <ListaItem indice={1} titulo={"Instalar bibliotecas do projeto"} />,
          <ListaItem indice={2} titulo={"Executar apliação web"} />,
          <ListaItem indice={3} titulo={"Programar em js e React"} />,
          <ListaItem indice={4} titulo={"Guardar as modificações no repositório local"} />,
          <ListaItem indice={5} titulo={"Publicar as modificações no github"} /> 
        ]       
       */
      }
      </ul>
      <ul>
        <ListaItem indice={0} titulo={tarefas[0]} />
        <ListaItem indice={1} titulo={tarefas[1]} />
        <ListaItem indice={2} titulo={tarefas[2]} />
        <ListaItem indice={3} titulo={tarefas[3]} />
        <ListaItem indice={4} titulo={tarefas[4]} />
        <ListaItem indice={5} titulo={tarefas[5]} />
      </ul>
    </div>
  );
}

const App = () => {
  const [contador, contar] = useState(10);

  return (
    <>
      <div>
        <h1>Meu contador esta em {contador}</h1>
      </div>
      <div className="card">
        <Botao titulo="Incrementar" />
        <Botao titulo={"Decrementar"} />
        <Botao titulo={"zerar"} />
        <button onClick={() => contar(contador + 1)}>Estado geral</button>
        <Componente />
      </div>
      <Lista />
    </>
  );
}

export default App;

Publicar modificações do projeto

[2023-webapp] $ git status
No ramo main
Your branch is up to date with 'origin/main'.

Changes not staged for commit:
  (utilize "git add <arquivo>..." para atualizar o que será submetido)
  (use "git restore <file>..." to discard changes in working directory)
	modified:   src/App.tsx

nenhuma modificação adicionada à submissão (utilize "git add" e/ou "git commit -a")

[2023-webapp] $ git add src/App.tsx

[2023-webapp] $ git commit -m "Adicionado comoponente react de lista"
[main a8ed218] Adicionado comoponente react de lista
 1 file changed, 54 insertions(+), 12 deletions(-)

[2023-webapp] $ git push origin main
Username for '<https://github.com>': leonardo-minora
Password for '<https://leonardo-minora@github.com>':
Enumerating objects: 7, done.
Counting objects: 100% (7/7), done.
Delta compression using up to 6 threads
Compressing objects: 100% (4/4), done.
Writing objects: 100% (4/4), 1.05 KiB | 1.05 MiB/s, done.
Total 4 (delta 2), reused 0 (delta 0)
remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
To <https://github.com/leonardo-minora/2023-webapp.git>
   d1e4a31..a8ed218  main -> main
[2023-webapp] $
[2023-webapp] $ 

Links

Quick start - React