Componentes de TODO Machine

Resumen

Entender la estructura de una aplicación en React es crucial para comenzar a dibujar la interacción y dar vida a nuestras ideas. En la esencia de cualquier proyecto en React, se encuentran los componentes y los elementos que componen la interfaz de usuario. Por ello, es esencial captar la diferencia entre ambos y cómo interactúan para llegar a ser lo que el usuario final ve y con lo que interactúa. Este artículo te guiará a través de la construcción de los componentes clave de una aplicación de ejemplo llamada Todo Machine.

¿Qué es un componente en React?

Un componente en React es una unidad independiente y reutilizable que controla una porción del interfaz de usuario (UI) de una aplicación. En el contexto de nuestra aplicación Todo Machine, un componente puede ser el contador de tareas (TodoCounter), el campo de búsqueda (TodoSearch), o incluso cada tarea individual (TodoItem).

¿Cómo se crean los componentes en React?

En la clase, comenzamos con la estructura de nuestra aplicación:

TodoCounter: Es el componente que muestra el número de tareas completadas. Se puede implementar como una etiqueta <h1> que incluye un mensaje dinámico para el usuario.
TodoSearch: Este componente es un campo de búsqueda, representado comúnmente con un <input>, permitiendo a los usuarios filtrar las tareas o "todos".
TodoList: A diferencia de los anteriores, este componente usa una etiqueta de apertura y una de cierre <ul> para envolver varios TodoItems dentro de una lista.
TodoItems: Cada tarea pendiente es un componente que se muestra dentro del TodoList como <li>.

¿Por qué usar etiquetas de apertura y cierre en algunos componentes?

Usamos etiquetas de apertura y cierre cuando el componente contiene otros componentes o elementos en su interior. Por ejemplo:

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

En este caso, TodoList actúa como un contenedor para los TodoItem.

¿Cómo se organizan los archivos de componentes?

Una buena práctica es crear un archivo para cada componente, lo cual mejora la legibilidad y el mantenimiento del código. Exportamos cada componente desde su archivo correspondiente y los importamos donde se necesiten. Por ejemplo:

Crearemos un archivo TodoCounter.js para el componente TodoCounter y lo exportaremos mediante export { TodoCounter };
Para importarlo en otro archivo, usamos import { TodoCounter } from './TodoCounter';

Usar export nombrados también nos ayuda a evitar errores en la importación, especialmente en proyectos grandes.

¿Qué debes tener en cuenta al crear componentes en React?

Siempre mantén la estructura organizada y clara. Esto te permitirá trabajar de manera más eficiente y hacer el código más mantenible.
La reutilización de componentes es una de las grandes ventajas de React, así que piensa en componentes genéricos que puedas usar en diferentes lugares.
Las props son la forma de pasar datos y eventos a los componentes. Aunque no se trataron profundamente en esta lección, son fundamentales para la interactividad y dinamismo de tu aplicación.

Sigue adelante, explora y juega con la creación de componentes. React es una poderosa biblioteca que te permite construir interfaces de usuario de una manera modular y efectiva, y cada paso que das aumenta tu habilidad para dar vida a ideas complejas y útiles. ¡Sigue aprendiendo y construyendo!

Diego Eduardo Téllez Contreras

student•

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.

Jose L. Figueroa

student•

Así es!! Han mejorado bastante la didáctica!!!

Angela Carrasco

student•

Yo estoy súper dentro, me encanta su dinamismo, lo estoy disfrutando mucho ;D

Alejandrina Pérez Lugo

student•

Yo cree solita pausando el video todos los archivos con los componentes :D

Willie David Roa Hidalgo

student•

Somos dos!!! 😎

Mario Alejandro Macias Ortiz

student•

Danny Yulieth Peña Dimate

student•

Dejo mi aporte:

Dave Juanes

student•

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 (
    <h2>Haz completado 3 de 5 TODOS</h2>
  );
}

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;

Usuario anónimo

user•

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.

Ulises Guarneros

student•

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

Xavier Flores

student•

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.

Edgar Ajset

student•

Excelente!! yo trabajo principalmente con Angular y es un toc querer organizar todo también jeje

ALINA BONILLA PAREDES

student•

Buena opción, así se tendrá más orden en las carpetas

Ricardo Alfonso Chavez Vilcapoma

student•

Mi solución:

Grande profe. Se entiende ultra fácil.

Didio Perdomo

student•

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

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

Gilberto Alejandro Monroy Morales

student•

Aqui mi solucion

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

}
export { CreateToDoButton };

Enrique Villalobos Andrade

student•

Los componentes pueden recibir parametros de 2 formas:

A la hora de llamar el componente:

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

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>

Aarón González

student•

Ahí vamos...

Luis Enrique Andrino Duque

student•

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

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.

Marcelo Garro

student•

He aqui dejo mi solucion Javascript:

Css:

Como se ve el componente:

Hint: Puse en los estilos globales

html {
	font-size: 62.5%;
}

Christian Ramirez

student•

Hola Marcelo, vas súper pero si no es molestia, te daré un par de sugerencias:

Primero, creo que te sale más sencillo exportar svg como componentes.

import { ReactComponent as TodoBtn } from './logo.svg'

:root{
	font-size: 0.625rem;
}
body {
	font-size: 1.6rem /*Equivalente a 16px*/
}

Cristian Contreras

student•

¿Por qué poner la extensión de cada archivo .js y no .jsx?

Juan Castro

teacher•

Depende del empaquetador que utilices y cómo lo configures. En el caso de CRA está configurado para soportar la transpilación de JSX en archivos .js como .jsx. Pero si creas tu configuración personalizada con Webpack, por ejemplo, eso es algo que debes configurar explícitamente o no te va a funcionar. :D

N40 M10

student•

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

Matias de Villafañe

student•

Que estas usando ? Emacs o NVim ?

Henry Alexander Velásquez Rosas

student•

Todo el curso en un día? y yo que pensaba hacerlo en un mes. Una clase por día e ir practicando cada día lo que se hace... Trosto 😥

Samuel Rueda

student•

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

Ulises Guarneros

student•

Friendly reminder para comentar algo en VSCode

Shift + Alt + A ;)

John Malku Córdova Sinchico

student•

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

José Heriberto López Ruiz

student•

Me gustó muchísimo la edición de video donde se ve al profesor en el mismo IDE al lado del código. Creo que es mucho mejor que cuando aparece el profesor pequeñito en un circulito en una esquina. Ojalá sigan haciendo videos con este estilo.

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;

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;

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}