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
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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 64
Preguntas 7
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:
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):
import React from 'react'
function TodoCounter() {
return (
<h1>Haz completado 3 de 5 TODOS</h1>
);
}
export { TodoCounter };
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 };
import React from 'react'
function TodoSearch() {
return (
<input placeholder="Buscar..." />
)
}
export { TodoSearch };
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 };
import React from "react";
function CreateTodoButton() {
return <button>+</button>;
}
export { CreateTodoButton };
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:
// Aqui dentro del componente TodoCounter usamos props.completed y props.total
<TodoCounter completed={3} total={5} />
// 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 />
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"
}
}
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.
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.
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.
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";
👉 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 }
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 }
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 /> */}
Este componente ya se encuentra creado dentro de nuestro archivo App.js
. Entonces lo único que necesitaremos será moverlo a su propio archivo.
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}
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!!! 😢
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.