Componentes de TODO Machine

Excelente que se muestre al principio lo que vamos a hacer. Me solia pasar que duraba toda la clase sin entender que haciamos y eso obligaba a tener que ver la clase más de una vez. Se nota que Juan escucha a los estudiantes e implementa esas mejoras.

Yo cree solita pausando el video todos los archivos con los componentes 😄

Dejo mi aporte:

Clase 3 Componentes de TODO Machine

Lo primero en hacer es eliminar los elementos del componente App.js, dejandolo con la siguiente estructura:

import React from 'react'
import logo from './platzi.webp';
import './App.css';

function App() {
  return (
    <div className="App">
    <TodoItem />
    <TodoItem />
    <TodoItem />
      
    </div>
  );
};
function TodoItem() {
  return (
    <li>
      <span>V</span>
      <p>Llorar con la Lorona</p>
      <span>X</span>
    </li>
  );
}

export default App;

Ahora debajo del div, agregamos un componente <TodoCounter />
<TodoSearch /> y luego agregamos un contenedor de los `` llamandolo

  <TodoItem />
  <TodoItem />
  <TodoItem />
<TodoList/>

Luego al final agregamos el boton <CreateTodoButton />.
Ahora toca crear los componentes que fuimos construyendo (En el caso de tener el error por React debemos importarlo también se puede usar el shorcout imr ojo que necesita tener la extensión de react):

Componente TodoCounter

import React from 'react'

function TodoCounter() {
  return (
    <h1>Haz completado 3 de 5 TODOS</h1>
  );
}

export { TodoCounter };

Componente TodoList

En el caso de este componente enviamos las propiedades o prop's para ir renderizando los TODO’s

import React from 'react'

function TodoList(props) {
  return (
    <ul>
      {props.children}
    </ul>
  )
}

export { TodoList };

Componente Todo Search

import React from 'react'

function TodoSearch() {
  return (
    <input placeholder="Buscar..." />
  )
}

export { TodoSearch };

Componente TodoItem

Este componente lo separamos del componente App.js

import React from "react";

function TodoItem() {
  return (
    <li>
      <span>V</span>
      <p>Llorar con la Lorona</p>
      <span>X</span>
    </li>
  );
}

export { TodoItem };

Componente TodoButton

import React from "react";

function CreateTodoButton() {
  return <button>+</button>;
}

export { CreateTodoButton };

Componente App Final

import React from "react";
import { TodoCounter } from "./TodoCounter";
import { TodoSearch } from "./TodoSearch";
import { TodoList } from "./TodoList";
import { TodoItem } from "./TodoItem";
import { CreateTodoButton } from "./CreateTodoButton";
import "./App.css";

function App() {
  return (
    <div className="App">
      <TodoCounter />
      <TodoSearch />

      <TodoList>
        <TodoItem />
        <TodoItem />
        <TodoItem />
      </TodoList>

      <CreateTodoButton />
    </div>
  );
}


export default App;

Pueden saber cuales son los atajos de su teclado para VSCode presionando : “CTRL + SHIFT + P” o “CMD + SHIFT + P”, y en la barra de busqueda que les aparece arriba, escribir Shortcuts. Al primer resultado le dan enter y los manda a un HTML con los atajos para su sistema.

El profe:
-Yeah, felicitaciones.
F A L T A T O D O L O D E M Á S 🤗

Particularmente cree un sistema de carpetas en este caso una llamada Components donde he alojado todas las funciones creadas, ademas de un archivo barril index.js , donde exporto desde allí todos mis componentes.

Mi solución:

Grande profe. Se entiende ultra fácil.

Mi aporte literal como lo pide el profe creería que es

function CreateTodoBotton(){
    return(
        <button>+</button>
    );
};
export { CreateTodoBotton };

Aqui mi solucion

function CreateToDoButton(){
return (
<button>Crear nueva tarea</button>
);

}
export { CreateToDoButton };

Los componentes pueden recibir parametros de 2 formas:

1. A la hora de llamar el componente:

// Aqui dentro del componente TodoCounter usamos props.completed y props.total
<TodoCounter completed={3} total={5} />

1. Pasandole más elementos como en el caso del TodoList:

// Aqui dentro del componente TodoList usamos props.children para referenciar los TodoItem
<TodoList>
	<TodoItem />
	<TodoItem />
	<TodoItem />
</TodoList>

Ahí vamos…

Aqui mi solucion y le añadi el tipico contador en el button 😄

import { useState } from "react"

function TodoCreateButton(){
    const [count, setCounter] = useState(0);
    
    const handle = () => {
        setCounter(count + 1)
    }
    
    return(
        <button onClick={handle}>Click uwu {count}</button>
    )
}

export {TodoCreateButton}

En este código, el useState es una función especial de React que nos permite agregar un estado a un componente. Un estado es básicamente un lugar donde puedes almacenar y controlar datos que pueden cambiar mientras el componente está en uso.

En este caso particular, useState(0) inicializa el estado con el valor 0. Al llamar a useState(0), obtenemos una variable llamada count que representa el valor actual del estado y una función llamada setCounter que nos permite actualizar ese valor.

La línea const [count, setCounter] = useState(0) declara y asigna los valores iniciales del estado. count guarda el valor actual, que comienza en 0, y setCounter es una función especial que nos permite actualizar ese valor.

La función handle es una función que creamos para manejar el evento de clic en el botón. Cada vez que se hace clic en el botón, la función handle se ejecuta y llama a setCounter(count + 1) para actualizar el estado. Básicamente, le decimos a React que incremente el valor de count en 1 y actualice el componente con el nuevo valor.

He aqui dejo mi solucion
Javascript:

Css:

Como se ve el componente:

Hint: Puse en los estilos globales

html {
	font-size: 62.5%;
}

¡Acabo de darme cuenta de que el curso dura nueve horas… ok hoy no nos vamos hasta que terminemos este curso!

Dios les bendiga, para comentar en windows a mi me sirve en teclado gringo con control + k + c, pd: Recomiendo el uso de teclado gringo, no me refiero a literal un teclado gringo sino cambiar la configuración interna a causa de que siento más ergonomico la posición de los atajos de teclado como llaves, corchetes, más y menos que, comillas invertidas, backslash, simbolos, etc. Incluso la pipe line y a veces siento que en español puede ser muy engorroso hacer ciertos atajos de teclado

Friendly reminder para comentar algo en VSCode

Shift + Alt + A 😉

function TodoButton(props){
return (
<input type=“button” value={props.value} />
);
}
export {TodoButton};

1:41

Es de valientes saber borrar el código by Juan DC

Autocompletar Elementos JSX

Se debe agregar en la configuración de VSC de la siguiente manera:

Ctrl + , y luego clic en el icono ↪📄 (Derecha superior), finalmente agregamos esto

{
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

🔥 Tutorial: Configurar autocompletado JSX

Más sobre configuración de VSC

Mi solucion

import React from 'react'

function CreateTodoButton(){
    return(
        <button>Add</button>
    );
}

export  {CreateTodoButton};

Les dejo mi solución, yo prefiero utilizar una arrow function 😄 y exportarla directamente, para crearla pueden utilizar el atajo rafc!

Hola, Yo creo que el nombre del componente debería reflejar el objetivo de este. así se hace mas clara su responsabilidad.

Excelente actualización del curso. Va mucho más pausada y se ha detenido a explicar conceptos de forma más profunda. Excelente JuanDC, gracias por la actualización.

Componentes de Todo Machine

Antes de continuar debemos mencionar que tenemos dos formas de llamar a los componentes en JSX, el primero es con el autocerrado <componente />, y el segundo es con dos etiquetas de apertura y de cierre <componente></componente>. La forma de autocierre nos sirve cuando no vamos a poner componentes o elementos dentro de este componente, y la segunda forma nos permite poner componente dentro de componentes.

Maquetando la aplicación

A continuación, comenzaremos ya a maquetar los componentes necesarios para el Todo Machine, para esto primero borraremos todo lo que se encuentra adentro de nuestro componente App, el cual deberá quedar de la siguiente manera.

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

        <TodoCounter />
        <TodoSearch />

        <TodoList>
            <TodoItem/>
            <TodoItem/>
            <TodoItem/>
        </TodoList>

        <CreateTodoButton>
    </div>
  );
}

⚠ La aplicación se romperá y no correrá, ya que los componentes no se han creado aún. Entonces porque lo hacemos de esta forma, esto es una técnica en la cual primero maquetamos la estructura de la aplicación y posteriormente creamos la funcionalidad de cada componente.

Creando los componentes

Para crear los componentes primero, crearemos archivos con el nombre de cada uno, esto nos permitirá tener una estructura más limpia y en caso de modificar algún componente poder encontrarlo con mayor facilidad. Recordemos que para los componentes tenemos que crear el archivo nombrándolo con la primera letra en mayúscula, y el nombre debe ser igual al nombre del componente.

TodoCounter

Crearemos un nuevo componente llamado TodoCounter en un archivo llamado TodoCounter.js. Deberá quedar de la siguiente manera.

function TodoCounter() {
    <h1>
        Has completado 3 de 5 TODOS
    </h1>
}

export { TodoCounter }

Para poder utilizar el componente, debemos exportar la función, en este caso hay dos formas de hacerlo: con export default o con export nombrado.

Utilizar el export default <función> puede no ser la mejor opción, ya que al exportar de esta manera, tenemos la posibilidad de cambiar el nombre de la función al importar, lo que puede generar errores inesperados. Si quisiéramos manejarlo de esta manera, deberá quedar de la siguiente forma.

function TodoCounter() {
    <h1>
        Has completado 3 de 5 TODOS
    </h1>
}
export default TodoCounter
// Lo llamariamos de la siguiente forma

import NombreCualquiera from "./TodoCounter";

El export nombrado con la sintaxis de objeto export { <función> }, es más recomendado cuando trabajamos con componentes de React, ya que nos permite evitar errores. Este tipo de export quedaría de esta manera:

function TodoCounter() {
    <h1>
        Has completado 3 de 5 TODOS
    </h1>
}
export { TodoCounter }
// Lo llamariamos de la siguiente forma

import { TodoCounter } from "./TodoCounter";

TodoSearch

👉 Repetiremos los pasos para la creación de componentes, por lo que a partir de ahora solo mencionaremos características propias de cada componente.

En este componente notaremos que tendrá un input en el cual posteriormente manejaremos información. Sin embargo, por ahora solo pondremos el input.

function TodoSearch(){
    return (
        <input placeholder="Cortar Cebolla"/>
    )
}

export { TodoSearch }

TodoList

Este componente es un poco especial, ya que a diferencia de los otros componentes manejará props. Por el momento no veremos más acerca de las props, ya que este tema se retomará más adelante.

function TodoList(props){
    return (
        <ul>
            {props.children}
        </ul>
    )
}

export { TodoList }

CreateTodoButton

Por el momento, no crearemos este componente. Sin embargo, para poder ver el avance de la aplicación, lo comentaremos en nuestro archivo App.js. Para comentar dentro de JSX utilizaremos la sintaxis {/* */}, por lo que deberá quedar de la siguiente manera:

    {/* <CreateTodoButton /> */}

TodoItem

Este componente ya se encuentra creado dentro de nuestro archivo App.js. Entonces lo único que necesitaremos será moverlo a su propio archivo.

Importando los archivos

Una vez tengamos creados los componentes creados, los importaremos en nuestro archivo App.js, utilizando la sintaxis de importación de objeto:

import { TodoCounter } from './TodoCounter';
import { TodoSearch } from './TodoSearch';
import { TodoList } from './TodoList';
import { TodoItem } from './TodoItem';

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

            <TodoCounter />
            <TodoSearch />

            <TodoList>
                <TodoItem />
                <TodoItem />
                <TodoItem />
            </TodoList>

            {/* <CreateTodoButton /> */}
        </div>
    );
}

export default App;

Create Todo Button

• El componente Create Todo Button representa el botón para crear nuevos TODOS en la aplicación.
• Aunque actualmente no tiene funcionalidad implementada, su presencia es crucial para la futura interactividad de la aplicación.
• Este botón será utilizado para desencadenar la aparición del formulario y modal que permitirá a los usuarios crear nuevos TODOS.
• La estructura básica del botón incluye un elemento <button> con un icono de cruz (+) en su interior.
• Aunque por ahora no tiene funcionalidad, su implementación es esencial para la completa experiencia de usuario planificada.

Communication Between Components with Props

• La comunicación entre componentes en React se realiza a través de las “props” (propiedades).
• En el componente TodoList, se utiliza props.children para permitir que otros componentes, como TodoItem, se rendericen dentro de la lista.
• Las props son un mecanismo fundamental para pasar datos de un componente padre a sus componentes hijos.
• En futuras clases, se explorará más a fondo el uso de props y cómo mejorar la comunicación entre componentes.

Conclusión y Próximos Pasos

• Hasta ahora, hemos creado la estructura principal de la aplicación de Todo Machine, con componentes como TodoCounter, TodoSearch, TodoList, TodoItem, y CreateTodoButton.
• Aunque algunos componentes no tienen funcionalidad completa, su implementación básica sienta las bases para futuras mejoras y características.
• En la próxima clase, exploraremos más a fondo la comunicación entre componentes mediante props y continuaremos construyendo la interactividad de la aplicación.

Reto: Create Todo Button

• El reto consiste en crear el componente CreateTodoButton, un botón que servirá para desencadenar la creación de nuevos TODOS en la aplicación.
• Aunque la funcionalidad completa se abordará en clases posteriores, es esencial tener este componente creado y presente en la interfaz de usuario.
• Crea un archivo CreateTodoButton.js, exporta el componente, e intégralo en el componente App.
• La estructura básica incluye un elemento <button> con un icono de cruz (+) en su interior.

Recuerda seguir el enfoque de desarrollo progresivo, construyendo y mejorando cada componente paso a paso. ¡Buena suerte con el reto!

Dios les bendiga, por fin entendí que el snippet rfce viene de react, function, component y export xd

Te amo juandc

Like si tomaste un curso de Richard B. Kaufman

En Windows el atajo por defecto de VS es ctrl + k + c , y tambien funciona para JSX.

CreateTodoButton

function CreateTodoButton() {
    return(
        <button>Agregar</button>
    );
  }

export { CreateTodoButton };

TodoButton.js
function TodoButton() {
    return (
      <button>
        +
      </button>
    );
  }
  
  export { TodoButton };

App.js
import { TodoButton } from './TodoButton';

      <TodoButton />

Haz y Has: min 6:37 ✨😊

• “Has” es una conjugación del verbo “haber”.
• “Haz” viene del verbo “hacer”.

Mi solucion del componente Boton

function CreateTodoButton(){
    return (
        <button>Crear Tarea</button>
        )
};

export {CreateTodoButton};

function TodoButton() {
  return (
    <button> + </button>
  )
}

export { TodoButton }

gg

function CreateTodoButton() {
    return (
        <button> + </button>
    )
}

export { CreateTodoButton };

import { TodoCounter } from './TodoCounter';
import { TodoSearch } from './TodoSearch';
import { TodoList } from './TodoList';
import { TodoItem } from './TodoItem';
import { CreateTodoButton } from './CreateTodoButton'; 
import './App.css';

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

      <TodoCounter />
      <TodoSearch />

      <TodoList>
        <TodoItem />
        <TodoItem />
        <TodoItem />
      </TodoList>

      <CreateTodoButton />

    </div>
  );
}

export default App;

Asi lo hice yo

Con el comando (ctrl + espace) + eligiendo el archivo, puedes importar el componente que detecta vscode.

-Creo un componente CreateTodoButton.js

function CreateTodoButton(){
    return(
        <button type="button">+</button>
    );
}
export  {CreateTodoButton}

• Y final mente lo importa en App.js

import { CreateTodoButton } from './CreateTodoButton';

<div className="App">
....
 <CreateTodoButton />
</div>

La forma en que creé mi componente fue:

// En el archivo TodoCreateButton.js
function TodoCreateButton () {
    return (
        <button>Crear TODO</button>
    );
}

export { TodoCreateButton };

//En el archivo App.js lo importo y agrego el componente dentro del componente App.
import { TodoCreateButton } from './TodoCreateButton';

    <div className="App">
      <TodoTitle />
      <TodoSearch />
      <TodoList>
        <TodoItem />
        <TodoItem />
        <TodoItem />
      </TodoList>
      <TodoCreateButton />
    </div>

function CreateTodoButton(){
return(
<button variant=“contained”>Default</button>
)
}
export { CreateTodoButton }; // Export nombrados

Así es como quedo mi solución de Button

Ahí va

function CreateTodoButton() {
    return (
      <button>+ Agregar To-do</button>
    );
  }

  export { CreateTodoButton };

Prueben para comentar y descomentar control + shift + 7 ,uso linux y visual studio code

Componente Button

import React from 'react'

const CreateTodoButton = () => {
  return (
    <div>
        <button>+</button>
    </div>
  )
}

export {CreateTodoButton};

import { CreateTodoButton } from './components/CreateTodoButton';


function App() {
  return (
    <div className="App">
      {/*Contador*/}
      <TodoCounter />

      {/*Buscar Todo's*/}
      <TodoSearch />

      {/*Lista de Items*/}
      <TodoList> 
        <TodoItem/>
        <TodoItem/>
        <TodoItem/>
      </TodoList>

      {/*Crear ToDo*/}
      <CreateTodoButton/>

    </div>
  );
}

export default App;

Atajo para comentar en Windows :

CTRL + }

MI resolución del reto:
Cree un nuevo archivo con la siguiente función:

function CreateTodoButton(){
  return(
  <button>+</button>
  );
}

export {CreateTodoButton}

en el archivo App. js agregar la siguiente linea :

import { CreateTodoButton } from '' ;

Esta muy bien explicado

yo crre el componente de CreateTodoButton de una vez :V

Lo del chanclazo es epico 😄

Que buen atajo de teclado!! xd

function CreateTodoButton(){
    return(
      <button>Agregar</button>
      
    );
  }

  export { CreateTodoButton };

Mi componente 🙌🏼

function CreateTodoButton() {
  return (
    <button>➕</button>
  )
}

Mi solución:

App.js

<TodoButtonCreate value="Add" />

TodoButtonCreate.js

function TodoButtonCreate(props){
    return (
        <input type="button" value={props.value}/>
    );
}

export {TodoButtonCreate};

Aquí el reto de la clase.

function CreateTodoButton() {
    return (
        <button style={{ backgroundColor: 'blue', color: 'white' }}>
        ✚
      </button>
    );
  }
  export {CreateTodoButton}

Si eres como yo que iniciaste el proyecto con Vite + React y te da error: Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

Solo cambia las extensiones de los archivos .js a jsx y listo