Componentes de TODO Machine

Con la extensión ES7+ React/Redux/React-Native snippets para VS Code podrán crear componentes desde 0 muy rápidamente escribiendo comandos como rfce

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.

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;

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

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.

Algunos atajos de teclado para VS Code:

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

Aqui mi solucion

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

}
export { CreateToDoButton };

He aqui dejo mi solucion
Javascript:

Css:

Como se ve el componente:

Hint: Puse en los estilos globales

html {
	font-size: 62.5%;
}

Ahí vamos…

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

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

Mi solución:

Grande profe. Se entiende ultra fácil.

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.

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

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>

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

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

Te amo juandc

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.

Like si tomaste un curso de Richard B. Kaufman

Mi solucion

import React from 'react'

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

export  {CreateTodoButton};

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.

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

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

      <TodoButton />

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

Haz y Has: min 6:37 ✨😊

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

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;

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>

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

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

Friendly reminder para comentar algo en VSCode

Shift + Alt + A 😉

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 };

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.

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}

I 💚 Platzi

Se debería poder ocultar esta parde de los comentarios es bastante molesto no poder expandir más la pantalla.

El profesor hubiera sido mejor el actor de Luffy en la serie de OnePiece, excelente carisma

es decir que ay que hacer un archivo a cada funcionn

Este curso me aburre por que se para todo el tiempo, no importa si lo uso en chrome, en la app o safari, es una pesadilla. por favor soluciónenlo.

ctrl + ]} para comentar mas facil sin demorarse en comentar

Todo bien con los contenidos, con Juan David y la nueva forma de impartir la clase, pero que feo es el Theme de Visual Studio que eligió Juan David!

bueno, sigan con lo suyo y nunca paren de aprender 🤗

juan DC, despues de un año te veo pro teacher, eso es muy bueno… me oiste Freddy Vega jejejej

1:41

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

No se subir Imagenes, HEEEEEEEELP MEEEEEEEE!!! 😢