No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de React.js

Curso de React.js

Juan David Castro Gallego

Juan David Castro Gallego

Componentes de TODO Machine

3/34
Recursos

Aportes 64

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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鈥檚

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 : 鈥淐TRL + SHIFT + P鈥 o 鈥淐MD + 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=鈥渂utton鈥 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 鉁煒

  • 鈥淗as鈥 es una conjugaci贸n del verbo 鈥渉aber鈥.
  • 鈥淗az鈥 viene del verbo 鈥渉acer鈥.

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 }
<h5>Exportar la funci贸n</h5>

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.

<h6>Export default</h6>

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

<h6>Export nombrado</h6>

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=鈥渃ontained鈥>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!!! 馃槩