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

Cuando se utiliza:

<React.Fragment></React.Fragment>

Es necesario importar, para que funcione:

import React from 'react';

Componentes => Reciben Propiedades.
Elementos => Reciben Atributos.
…
Hay que tener en cuenta que en JSX, la sintaxis entre atributos y propiedades es muy parecida, ya que escribimos el valor de las props en los componentes como si fueran atributos, pero estos no lo son…
…
Las props son variables que declaramos en nuestro componente como si fueran parámetros de una función, podemos declarar una unica (Prop) o declarar varias Props utilizando la {Desestructuración}.
Para luego posteriormente darles un valor como si fueran argumentos, pero utilizando otro tipo de sintaxis, que es muy parecida a la de los atributos de los elementos HTML, con la diferencia que el otorgamos el valor entre {llaves}.
…
En cuanto a la propiedad “props.children” esta hace referencia a que React transforma automáticamente a todo lo que se encuentre dentro del componente padre en un elemento “children” , es decir todo lo que se encuentre dentro de una etiqueta de apertura <Component> y una etiqueta de cierre </Component> para React será “Children”.
…
Por otro lado existe <React.Fragment> o su sintaxis más corta " <> </> " que es un contenedor invisible que tiene como objetivo envolver todos los componentes JSX dentro de un contenedor padre, esto es debido a que React necesita envolver esos componentes para renderizarlos, y asi no crear nodos innecesarios en el DOM.
…
Por ultimo, debemos tener en cuenta que podemos renderizar elementos a través de un Array, utilizando en este caso el metodo .map(), y devolviendo el componente “TodoItem” por cada uno de los objetos del array…
Es necesario que le pasemos las props “key={todo.text} text={todo.text}” al componente para que nos muestre un contenido distinto por cada objeto de este array.
…
La prop “Key” funciona como un Identificador para objeto del array y es necesaria cuando utilizamos el metodo .map()

Algo que personalmente me ha gustado es destructurar las props y a que evitan el estar repitiendo el props.text y hacen que el código sea más legible.

function TodoItem({text, completed}) {
 
    return (
        <li className="TodoItem">
            <span>✔</span>
            <p>{text}</p>
            <span>⚔</span>
        </li>
    );
}

Clase 4 Como se comunican los componentes? Props y atributos

Nuestro componente TodoCounter recibira 2 propiedades destructuras total, completed, modificamos el componente de manera de el texto hardcodeado quede asi {completed} y {total} para hacer dinamico nuestro componente.

Ahora dentro del componente App.js donde invocamos al componente TodoCounter lo definimos: <TodoCounter completed={16} total={25}/>.
Estos cambios podemos verlos con las devtools del navegador ya que las props no se muestran como atributos en el HTML.

Propiedad Children

React automaticamente define como elementos hijo a los componentes y/o elementos que estan dentro de dos etiquedas jsx.

React.Fragment

Por defecto todo componente require ser exportado a un solo objeto, por esto es que los componentes deben estar encapsulados en una etiqueta:

<React.Fragment>
  ...
  ...
  ...
</React.Fragment>

Envio de arrays

Para poder enviar array definimos:

const defaultTodos = [
  { text: 'Diseño de proyecto', completed: false},
  { text: 'Diseño de Base de datos', completed: false},
  { text: 'Recopilación de requerimientos', completed: false},
  { text: 'Desarrollo', completed: false},
  { text: 'Implementación', completed: false},
]

Y luego dentro de nuestro componente App vamos definiendo las props que necesitaremos ver con TodoItem:

<TodoList>
  {defaultTodos.map(todo => (
    <TodoItem
      key={todo.text}
      text={todo.text}
      completed={todo.completed}
    />
  ))}
</TodoList>

Ahora en TodoItem iremos definiendo las props que necesitaremos (en mi caso tuve que destructurarlas por unos errores que me mostraban las devtools):

function TodoItem({text, completed}) {
  return (
    <li>
      <span>V {completed}</span>
      <p>{text}</p>
      <span>X</span>
    </li>
  );
}

Juan normalmente me gustan tus clases con tus ocurrencias mantienes el interés en los alumnos pero esta vez déjame quitarme el sombrero no se si todo en si fue obra tuya pero quisiera aprovechar de agradecer a todo el equipo de Platzi por este curso es espectacular ojala sigan actualizando los curso y le den este mismo formato.

Aquí mi componente de las tareas , lo hice un poco diferente al profesor utilizando solo un span y condicionando si la tarea esta completada o no.

import React from 'react'

export const ListItem = ({task,checked}) => {
  return (
    <>
    <span>{checked? '✔': 'X'}</span>
    <p>{task}</p>
    </>
  )
}

De los mejores profes de platzi!

Hostia Juan, me encanta tu forma de explicar descomponiendo poco a poco cada definición para no saturarnos de info.
n.n

Una forma de utilizar React.Fragment sin tener que importarlo. Es utilizando su shorcut de un tag vacío: <> ... </>.

Sino las formas de utilizar Fragment serian:

Import React from 'react';

...
<React.Fragment>
</React.Fragment>
...

import { Fragment } from 'react';

...
<Fragment>
</Fragment>
...

realmente felicitaciones por la nueva forma de mostrar los cursos

Con las nuevas versiones de React ya no es necesario nombrar el componente <React.Fragment> para encapsular el resto de componentes que necesitemos, En su lugar simplemente podemos crear un ‘elemento vacío’ para encapsular el resto de compomentes de la siguiente manera:

function App() {
  return (
    <>
	//... todos los componentes que vayamos a encapsular dentro del componente App()
    </>

Para los que esten acostumbrados a usar:

items.map(item => {
  // codigo
})

Y les de el error de “array.prototype.map() expects a return value from arrow function”, se soluciona con:

items.map(item => (
  // codigo
))

Me gusta su forma de programar, es bastante logica !!

Como yo entendí los props

.
Los React Props son la forma en la que se mandan propiedades (valores) a los elementos dentro de un componente, para que de esta forma el mismo sea interactivo y podamos interactuar para cambiar algún valor por medio de eventos en el DOM u otro método.
.
Para pasarle un prop a un componente hacemos lo siguiente, por ejemplo;

1. Tengo un componente título que lleva la cuenta de cuántas tareas se han cumplido, esto hace parte de una aplicación de TO-DO. Como parámetro le estamos pasando un objeto en el que usamos la desestructuración, esto para traer las propiedades específicas que necesita el componente. Luego del primer ejemplo muestro cómo quedaría si usamos el parámetro “props”

   // Esta sintaxis solo trae los props que necesitamos por medio de
   // desestructuración.
   function TodoTitle({ total, completed }) {
   	return (
   		<h1>
     		Has completado {completed} de {total} TO-DOs
   		</h1>
    )
   }
   
   // Esta sintaxis nos trae todos los props que le pasemos al elemento
   // del componente padre, pero tendremos que escribir "más código"
   function TodoTitle(props) {
   	return ( 
   		<h1>
   			Has completado {props.completed} de {props.total} TO-DOs
   		</h1>
   	)
   }
   

2. En el componente App, vamos al elemento que queremos pasarle los props, en este caso el elemento TodoTitle

   function App() {
   	return (
   <React.Fragment>	
   	// Acá le definimos al elemento las siguientes propiedades:
     	<TodoTitle  completed={16} total={25} /> 
   	// Estas propiedades serán los argumentos que reciba el componente
   	// TodoTitle
   
     <TodoSearch />
   
     <TodoList>
       <TodoItem />
       <TodoItem />
       <TodoItem />
     </TodoList>
   
     <CreateTodoButton/>
   </React.Fragment>
   	);
   }
   

una forma mas cómoda de exportar los componentes es

export function CreateTodoButton() {
    return (
        <button>Agregar Todo</button>
    );
}

a mi personalmente me gusta hacer un destructuring

function TodoCounter(props) {
  const {total, completed} = props
  return (
      <h1>
        Has creado {completed} de {total} TODOs
      </h1>
  )
}

!Lo mismos pasos y un poco diferente [](

El Fragmento (“react fragment”) también se puede definir de la siguiente manera:

<>
</>

Eso es lo mismo que:

<React.Fragment></React.Fragment>

¿Qué son las props en React?

Las props son las propiedades de un componente. Son datos que se pasan de un componente a otro. Por ejemplo, si tienes un componente Button que muestra un botón, puedes pasarle una prop text para que el botón muestre ese texto:

function Button(props) {
  return <button>{props.text}</button>}

Podríamos entender que el componente Button es un botón genérico, y que la prop text es el texto que se muestra en el botón. Así estamos creando un componente reutilizable.

Debe considerarse además que al usar cualquier expresión JavaScript dentro de JSX debe envolverlos con {}, en este caso el objeto props, de otra forma JSX lo considerará como texto plano.

Para usarlo, indicamos el nombre del componente y le pasamos las props que queremos:

<Button text="Haz clic aquí" /><Button text="Seguir a @midudev" />

Las props son una forma de parametrizar nuestros componentes igual que hacemos con las funciones. Podemos pasarle cualquier tipo de dato a un componente, incluso otros componentes.

Sacado de Preguntas típicas de React.js

¡Saludos! Pueden hacer uso de PropTypes para llevar a cabo comprobaciones de tipo y proporcionar obligatoriedad a las props de sus componentes 🤞. Un ejemplo:

import PropTypes from 'prop-types';
// Tu componente TodoCounter y su lógica aquí...

TodoCounter.propTypes  = {
	total: PropTypes.number.isRequired,
	completed: PropTypes.number
}

TodoCounter.defaultProps = {
	total: 10,
	completed: 0
}

Pueden aprender más ingresando a la docu oficial 👓:
Proptypes en React

Trabajando con Propiedades en React

En la clase anterior, creamos un componente Todo Counter que muestra información estática. En esta clase, aprenderemos a trabajar con las propiedades (props) para comunicar componentes y hacer que la información sea dinámica.

Creación de Todos por Defecto

Vamos a trabajar con un array llamado defaultTodos que contendrá información sobre distintas tareas pendientes.

const defaultTodos = [
  { text: "Cortar cebolla", completed: false },
  { text: "Tomar el curso de ReactJS", completed: true },
  { text: "Llorar con la llorona", completed: false },
  { text: "Otra tarea pendiente", completed: true },
];

Renderizando con React Fragments

En React, necesitamos envolver nuestros componentes en un solo elemento al devolverlos en el método render. Para esto, utilizamos React.Fragment.

return (
  <React.Fragment>
    {/* Componentes a renderizar */}
  </React.Fragment>
);

Renderizando con Arrays y Props

Vamos a utilizar map para renderizar múltiples elementos a partir de un array. Cada elemento del array será un componente Todo Item.

return (
  <React.Fragment>
    {defaultTodos.map((todo) => (
      <TodoItem key={todo.text} text={todo.text} completed={todo.completed} />
    ))}
  </React.Fragment>
);

Manejo de Propiedades en TodoItem

En el componente TodoItem, recibimos las props text y completed y las utilizamos para mostrar información dinámica.

const TodoItem = (props) => {
  return (
    <div>
      <p style={{ textDecoration: props.completed ? "line-through" : "none" }}>
        {props.text}
      </p>
    </div>
  );
};

Key Prop y Advertencias

Cada elemento en una lista debe tener una propiedad key única. Utilizamos la propiedad text de los todos como clave.

<TodoItem key={todo.text} text={todo.text} completed={todo.completed} />

Beneficios de las Props en React

• Reutilización de Componentes: Las props permiten que un componente pueda mostrar información dinámica y ser reutilizado para distintos propósitos.
• Comunicación entre Componentes: Facilitan la comunicación entre componentes al pasar información de uno a otro.
• Dinamismo en la Interfaz: Permite que la interfaz sea más dinámica y se actualice según la información recibida.

Próximos Pasos

• Experimenta con diferentes propiedades y valores en los componentes para comprender mejor cómo se comunican entre sí.
• Explora más sobre el manejo de arrays en React y cómo trabajar con listas dinámicas.
• Continúa aprendiendo sobre React y sus conceptos fundamentales.

¡Ahora estás listo para utilizar propiedades en React y hacer que tus componentes sean más flexibles y reutilizables!

hermano el video lleva trabandose como 4 horas ya no puedo ni soporto esto mi conexión no es un problema funciona con cualquier cosa pero esto es insufrible

Como renderizar varias elementos de un array como componentes en React

1. crear el array, puede tener objetos
2. Mediante llaves llamar al array y recorrerlo con el metodo map, porque es necesario que devuelva otro array de elementos que es lo que va a renderizar React
3. En cada vuelta o recorrido mediante .map crear un elemento de React (ejm: <TodoItem />
4. Es necesario que cada Componente que se esta enviando tenga una propiedad key unica

const defaultTodos = [
  { text: 'Cortar cebolla', completed: false},
  { text: 'Curso introduccion a React JS', completed: true},
  { text: 'Lavar zapatos', completed: false},
  { text: 'Comprar mercado', completed: true},
]

function App1() {
  return (
    <TodoList>
			{/* Recorrer con un .map
      para devolver otro array de elementos React */}
      {defaultTodos.map(todo => (
        // cada elemento debe tener un key unico
        <TodoItem key={todo.text} titulo={todo.text} />
      )
      )}
    </ TodoList>
  );
};

React.Fragment

Se utiliza como una etiqueta que envuelve varios elementos o componentes de React y los envia mediante un return al componente raiz sin que esten agrupados en una etiqueta especifica.
En react directamente no se puede hacer return a varios elementos al mismo tiempo, pero mediante React.Fragment es posible simular esto.

// Es necesario hacer un import de React
import React from 'react';

function App() {

  return (
		// Etiqueta React.Fragment para envolver los elementos a retornar
    <React.Fragment>
      <TodoCounter completed={16} total={25} />
      <TodoSearch />
      <TodoItem titulo={'lavar la ropa'} />
      <CreateTodoButton />
    </React.Fragment>
  );
};

<>
…
</>

Es una abreviación para React.Fragment

![](

Mis recursos:

• props
• children property
• <React.Fragment> or <>
• key property

yo la utilizo asi

function TodoCounter(props){
return (
<h1>
Has completado {props.completed} de {props.total} TODOS
</h1>
)
}

export { TodoCounter }

Agradecida conmigo misma por haber tomado el curso de Manipulacion de Arrays antes de venir a este.
Te lo recomiendo 100%.

            {                todos.map(todo => (                    <TodoItem key = {todo.text} text = {todo.text} completed = {todo.completed} />                ))            }       

en el minuto 13:04 a Juan se le paso decir que al crear un elemento de react este “auto importa” su libreria cuando se tabula, como pueden ver en esa parte del video, cuando juan teclea “<React.” y preciona tab, en la parte de arriba debajo de el import de css se importa ‘react’ automaticamente y es necesario para poder usar el <React.Fragament>

El tema con el prop KEY, es para que React tenga una trazabilidad de las cosas que se agregan o se retiran del DOM. Llegada la situación dónde tenemos en este ejemplo muchas TODOS con el mismo KEY y tenemos varias acciones como completar, borrar, etc, Reactivarles no sabría con exactitud a que elemento del DOM se le aplica la acción

Utilice la misma forma solo que no le puse el nombre Create y gracias a lo bien que explicas logre hacerlo solo en el reto.

CreateTodoButton.js

function CreateTodoButton(){
return (
<button> crear nuevos todo’s ome</button>
);

}
export { CreateTodoButton };

y lo importo mucho mas facil con el atajo que nos enseñaron que es ctrl + espacio y se crea solo la importacion, super breve y buena la clase.

Es posible usar a cambio de

<React.Fragment>
	Componentes
</React.Fragment>

Cambiar esto por

<>
	Componentes
</>

Y nos funcionara de la misma forma

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

Excelente curso.

en lugar de react.fragment también se pueden usar etiquetas vacías
<>
<ToDoCounter completed={16} total={25} />
<ToDoInput />

  <ToDoList>
    <ToDoItems />
    <ToDoItems />
    <ToDoItems />
  </ToDoList>

  <CreateToDoButton />
</> 

⚛️ Estas clases son genial! Super fáciles de entender y ni se siente el tiempo de cada clase.

También se pueden omitir los paréntesis que Juan puso para encerrar el TodoItem

ANTES

{defaultTodos.map(todo => (
          <TodoItem todo={todo} key={todo.id}/>
        ))}

DESPUÉS

{defaultTodos.map(todo => 
          <TodoItem todo={todo} key={todo.id}/>
        )}

Propongo que en lugar de colocar key=todo.text, usemos el map para capturar el indice actual del array y lo pasemos al key. Creo que quedaría más organizamos y evitamos un posible error de dos tareas que se llamen igual.

<TodoList>
        {defaultTodos.map((todo, index) => (
          <TodoItem key={index} text={todo.text} state={todo.completed} />
        ))}
</TodoList>

¡Excelente! Con esta clase entendi mucho más sobre como funiconan los componentes

This is React

This is React

Decidí volver a este curso pensando que si no quería hacer la Todo-App, me podía enfocar en el aspecto teórico. Pero es que en esta clase ni si quiera explican qué son las props, solo empiezan a trabajar en ellas. Aparte 25 minutos ?? Nada, vuelvo al curso de Next Js que no cometen este error y entendí las props por investigar fuera de Platzi. Este curso 0/10.

una forma de como hacerlo mas ordenado en el mismo componente de TodoItem.jsx

import React from 'react'

export function TodoItem() {
    const defaulTodo =[
        {text:'apreder jsx', completed:false},
        {text:'hacer proyecto de restaurante', completed:false}
    ];
  return (
    <div>
       {defaulTodo.map(todo =>(
        <li key={todo.text}>
            <span>v</span>
            <p>{todo.text}</p>
            <span>x</span>
        </li>
       ))}
    </div>
  )
}

Ayuda???:![](

Si saben inglés les recomiendo 100% este video que lo explica muy bien también y con la lógica detrás del proceso
https://www.youtube.com/watch?v=PHaECbrKgs0

Hola solo vengo a decir gracias por actualizar este curso asi como la ruta, ya era hora de actualizar y cambiar algunos de los contenidos que no eran muy optimos sigan asi , grandes Team platzi

Se puede reemplazar

<React.Fragment></React.Fragment>

Por

<></>

Que significa lo mismo

Cuando usamos el método .map, podemos hacer uso del segundo parametro index que nos ofrece el map, para usarlo en la propiedad key. defaultTodos.map( (todo, index) => ( <TodoItem key={index} /> )

Resaltar que en React se usa parentesis () para envolver la función de una arrow function, a diferencia de JS Vanilla que usa las llaves {}

Una alternativa a usar el React.Fragment es usar la sintaxis abreviada <></>

function App() {
  
  return (
    <>

      <TodoCounter total={25} completed={2}/>
      <TodoSearch />

      <TodoList>
        <TodoItems />
        <TodoItems />
        <TodoItems />
      </TodoList>
      <TodoCreateButton ></TodoCreateButton> 
    </>
  );
}