correção

src/App.jsx

@@ -27,22 +27,22 @@ export default function App() {
             <section>
                 <h1>TP 2</h1>
                 <div>
-                    <a href="src/TP1/01/index.html">TP 2.1</a>
-                    <a href="src/TP1/02/index.html">TP 2.2</a>
-                    <a href="src/TP1/03/index.html">TP 2.3</a>
-                    <a href="src/TP1/04/index.html">TP 2.4</a>
-                    <a href="src/TP1/05/index.html">TP 2.5</a>
-                    <a href="src/TP1/06/index.html">TP 2.6</a>
-                    <a href="src/TP1/07/index.html">TP 2.7</a>
-                    <a href="src/TP1/08/index.html">TP 2.8</a>
-                    <a href="src/TP1/09/index.html">TP 2.9</a>
-                    <a href="src/TP1/10/index.html">TP 2.10</a>
-                    <a href="src/TP1/11/index.html">TP 2.11</a>
-                    <a href="src/TP1/12/index.html">TP 2.12</a>
-                    <a href="src/TP1/13/index.html">TP 2.13</a>
-                    <a href="src/TP1/14/index.html">TP 2.14</a>
-                    <a href="src/TP1/15/index.html">TP 2.15</a>
-                    <a href="src/TP1/16/index.html">TP 2.16</a>
+                    <a href="src/TP2/01/index.html">TP 2.1</a>
+                    <a href="src/TP2/02/index.html">TP 2.2</a>
+                    <a href="src/TP2/03/index.html">TP 2.3</a>
+                    <a href="src/TP2/04/index.html">TP 2.4</a>
+                    <a href="src/TP2/05/index.html">TP 2.5</a>
+                    <a href="src/TP2/06/index.html">TP 2.6</a>
+                    <a href="src/TP2/07/index.html">TP 2.7</a>
+                    <a href="src/TP2/08/index.html">TP 2.8</a>
+                    <a href="src/TP2/09/index.html">TP 2.9</a>
+                    <a href="src/TP2/10/index.html">TP 2.10</a>
+                    <a href="src/TP2/11/index.html">TP 2.11</a>
+                    <a href="src/TP2/12/index.html">TP 2.12</a>
+                    <a href="src/TP2/13/index.html">TP 2.13</a>
+                    <a href="src/TP2/14/index.html">TP 2.14</a>
+                    <a href="src/TP2/15/index.html">TP 2.15</a>
+                    <a href="src/TP2/16/index.html">TP 2.16</a>
                 </div>
             </section>
         </main>

src/TP1/01/App.jsx

@@ -1,5 +1,13 @@
-export default function App() {
+const calcularPrecoTotal = ({precoProduto, quantidadeProduto}) => {
+    const precoTotal = precoProduto * quantidadeProduto;
+
     return (
-        <div>Hello World</div>
+        <main>
+            <h1>{precoTotal}</h1>
+            <p>O preço do produto é {precoProduto} R$ </p>
+            <p>A quantidade do é {quantidadeProduto} produtos.</p>
+        </main>
     )
-}
+}
+
+export default calcularPrecoTotal;

src/TP1/01/main.css

@@ -2,4 +2,10 @@
   padding: 0;
   margin: 0;
   box-sizing: border-box;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f0f0f0;
+  font-size: x-large;
 }

src/TP1/01/main.jsx

@@ -5,6 +5,6 @@ import './main.css'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
+    <App precoProduto={100} quantidadeProduto={20}/>
   </React.StrictMode>,
 )

src/TP1/02/App.jsx

@@ -1,5 +1,28 @@
-export default function App() {
+function filtrarDisponiveis(produtos) {
+  return produtos.filter(produto => produto.disponivel);
+}
+
+const produtos = [ 
+  { nome: "Laptop", disponivel: true }, 
+  { nome: "Tablet", disponivel: false }, 
+  { nome: "Smartphone", disponivel: true } 
+];
+
+console.log(produtos);
+
+const App = () => {
+    const produtosDisponiveis = filtrarDisponiveis(produtos);
+    console.log(produtosDisponiveis);
     return (
-        <div>Hello World</div>
+        <main>
+            <h1>Produtos Disponíveis</h1>
+            <ul>
+                {produtosDisponiveis.map(produto => (
+                    <li key={produto.nome}>{produto.nome}</li>
+                ))}
+            </ul>
+        </main>
     )
-}
+}
+
+export default App;

src/TP1/03/App.jsx

@@ -1,5 +1,22 @@
-export default function App() {
+function calcularMediaAvaliacoes () {
+    const avaliacoes = [10, 9, 8, 7, 6];
+    let valorInicial = 0;
+    const soma = avaliacoes.reduce(
+        (acumulador, valorAtual) => acumulador + valorAtual,
+        valorInicial,
+    );
+
+    return soma/avaliacoes.length;
+}
+
+const App = () => {
+    const valor = calcularMediaAvaliacoes();
     return (
-        <div>Hello World</div>
+        <div>
+            <h1>O valor de todas as médias das avaliações é:</h1>
+            <h1>{valor}</h1>
+        </div>
     )
-}
+}
+
+export default App;

src/TP1/04/App.jsx

@@ -1,5 +1,26 @@
-export default function App() {
+const produtos = [ 
+    { nome: "Laptop", preco: 1000 }, 
+    { nome: "Tablet", preco: 400 }, 
+    { nome: "Smartphone", preco: 1500 } 
+];
+
+function filtrarAcimaPreco (produtos, preco) {
+    return produtos.filter(produto => produto.preco > preco);
+}
+
+const App = () => {
+    const produtosFiltrados = filtrarAcimaPreco(produtos, 600);
+    console.log(produtosFiltrados);
     return (
-        <div>Hello World</div>
+        <div>
+            <h1>Os produtos com preço acima de 600 são:</h1>
+            <ul>
+                {produtosFiltrados.map((produto) => (
+                    <li key={produto.nome}>{produto.nome}</li>
+                ))}
+            </ul>
+        </div>
     )
-}
+}
+
+export default App;

src/TP1/05/App.jsx

@@ -1,5 +1,24 @@
-export default function App() {
+function encontrarProdutoPorNome (produtos, nome) {
+    const produto = produtos.find((produto) => produto.nome === nome);
+    return produto;
+}
+
+const produtos = [ 
+    { nome: "Laptop", preco: 1000 }, 
+    { nome: "Tablet", preco: 400 }, 
+    { nome: "Smartphone", preco: 1500 } 
+    ];
+
+const App = () => {
+    const produtoAchado = encontrarProdutoPorNome(produtos, "Laptop");
+    console.log(produtoAchado);
+    console.log(produtoAchado);
     return (
-        <div>Hello World</div>
+        <main>
+            <h1>Produto encontrado:</h1>
+            <p>Nome: {produtoAchado.nome}</p>
+        </main>
     )
-}
+}
+
+export default App;

src/TP1/06/App.jsx

@@ -1,5 +1,27 @@
-export default function App() {
+function encontrarProdutoPorNome () {
+    const produto = produtos.filter(produto => produto.categoria === "Eletrônicos");
+    return produto;
+}
+
+const produtos = [ 
+    { nome: "Laptop", categoria: "Eletrônicos" }, 
+    { nome: "Camisa", categoria: "Roupas" }, 
+    { nome: "Smartphone", categoria: "Eletrônicos" } 
+];
+
+const App = () => {
+    const produtosFiltrados = encontrarProdutoPorNome();
+    console.log(produtosFiltrados);
     return (
-        <div>Hello World</div>
+        <main>
+            <h1>Os produtos com a categoria &quot;Eletrônicos&quot; são:</h1>
+            <ul>
+                {produtosFiltrados.map((produto)=> (
+                    <li key={produto.nome}>{produto.nome}</li>
+                ))}
+            </ul>
+        </main>
     )
-}
+}
+
+export default App;

src/TP1/07/App.jsx

@@ -1,5 +1,27 @@
-export default function App() {
+function verificarEstoque () {
+    const produto = produtos.filter(produto => produto.quantidadeEmEstoque !== 0);
+    return produto;
+}
+
+const produtos = [ 
+    { nome: "Laptop", quantidadeEmEstoque: 5 }, 
+    { nome: "Tablet", quantidadeEmEstoque: 0 }, 
+    { nome: "Smartphone", quantidadeEmEstoque: 3 } 
+];
+
+const App = () => {
+    const produtoEmEstoque = verificarEstoque();
+    console.log(produtoEmEstoque);
     return (
-        <div>Hello World</div>
+        <main>
+            <h1>Produtos em Estoque:</h1>
+            <ul>
+                {produtoEmEstoque.map((produto) => (
+                    <li key={produto.nome}>{produto.nome}</li>
+                ))}
+            </ul>
+        </main>
     )
-}
+}
+
+export default App;

src/TP1/08/App.jsx

@@ -1,5 +1,27 @@
-export default function App() {
+function calcularTotalItens  (itens) {
+    const valor = itens.reduce((total, item) => {
+    return total + item.quantidade * item.precoUnitario;
+    }, 0);
+    return valor;
+}
+
+const itens = [ 
+    { nome: "Laptop", quantidade: 1, precoUnitario: 1000 }, 
+    { nome: "Tablet", quantidade: 2, precoUnitario: 400 }, 
+    { nome: "Smartphone", quantidade: 1, precoUnitario: 1500 } 
+];
+
+const App = () => {
+    const valorTotal = calcularTotalItens(itens);
+    console.log(valorTotal);
     return (
-        <div>Hello World</div>
+        <main>
+            <h1>O valor total dos itens do carrinho é:</h1>
+            <ul>
+                <li>{valorTotal}</li>
+            </ul>
+        </main>
     )
-}
+}
+
+export default App;

src/TP1/09/App.jsx

@@ -1,5 +1,41 @@
-export default function App() {
+function agruparPorCategoria (produtos) {
+    const produto = produtos.reduce((acc, produto) => {
+        const { categoria } = produto;
+        if (!acc[categoria]) {
+            acc[categoria] = [];
+        }
+        acc[categoria].push(produto);
+        return acc;
+    }, {});
+    return produto;
+}
+
+const produtos = [ 
+    { nome: "Laptop", categoria: "Eletrônicos" }, 
+    { nome: "Camisa", categoria: "Roupas" }, 
+    { nome: "Smartphone", categoria: "Eletrônicos" }, 
+    { nome: "Calça", categoria: "Roupas" }, 
+    { nome: "Fone de Ouvido", categoria: "Eletrônicos" } 
+];
+
+const App = () => {
+    const produtosAgrupados = agruparPorCategoria(produtos);
+    console.log(produtosAgrupados);
     return (
-        <div>Hello World</div>
+        <main>
+            <h1>Produtos Agrupados por categoria:</h1>
+            {Object.keys(produtosAgrupados).map(categoria => (
+                <div key={categoria}>
+                    <h2>{categoria}</h2>
+                    <ul>
+                        {produtosAgrupados[categoria].map(produto => (
+                            <li key={produto.nome}>{produto.nome}</li>
+                        ))}
+                    </ul>
+                </div>
+            ))}
+        </main>
     )
-}
+}
+
+export default App;

src/TP1/09/main.css

@@ -2,4 +2,8 @@
   padding: 0;
   margin: 0;
   box-sizing: border-box;
+}
+
+div {
+  margin-top: 10px;
 }

src/TP1/10/App.jsx

@@ -1,5 +1,5 @@
 export default function App() {
     return (
-        <div>Faça você mesmo!</div>
+        <span>Hello World</span>
     )
 }

src/TP1/10/main.css

@@ -2,4 +2,11 @@
   padding: 0;
   margin: 0;
   box-sizing: border-box;
+}
+
+body {
+  font-size: xx-large;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }

src/TP1/11/App.jsx

@@ -1,5 +1,9 @@
+import Saudacao from "./components/saudacao";
+
 export default function App() {
     return (
-        <div>Hello World</div>
+        <div>
+            <Saudacao/>
+        </div>
     )
 }