Componentes de TODO Machine

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}

Componentes de TODO Machine

Introducción y requisitos

¿Qué necesitas para aprender React.js?

Maquetación con React.js

¿Qué es un componente?

Componentes de TODO Machine

¿Cómo se comunican los componentes? Props y atributos

Estilos CSS en React

Interacción con React.js

Eventos en React: onClick, onChange

¿Qué es el estado?

Contando TODOs

Buscando TODOs

Completando y eliminando TODOs

Librería de Iconos Personalizados

Iconos en React: librerías y SVG

Iconos con colores dinámicos

Herramientas avanzadas: escalabilidad, organización y persistencia

Local Storage con React.js

Custom Hooks

Organización de archivos y carpetas

Feature-First Directories en React

Tips para naming y abstracción de componentes React

¿Qué son los efectos en React?

Estados de carga y error

Actualizando estados desde useEffect

Reto: loading skeletons

¿Qué es React Context?

useContext

¿Qué son los React Portals?

Reto: estados para abrir y cerrar un modal

Maquetando formularios en React

Crear TODOs: React Context dentro de React Portals

Deploy

Despliegue de TODO Machine en GitHub Pages

Presentación de proyectos para tu portafolio

Próximos pasos: React #UnderTheHood

Diferencias entre versiones de React.js

¿Cuándo realmente necesitas React.js?

Bonus: creando proyectos en React desde cero

React con Create React App

React con Next.js

React con Vite