Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Componentes de TODO Machine

5/22
Recursos

Aportes 21

Preguntas 8

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

La AI de Tabnine cuando lee: “Llorar con la llorona”

Una manera más comun de utilizar un fragment en react es con las llaves vacias <></>, de la siguiente forma:

import React from 'react';

export const CreateTodoButton = () => {
  return (
  // react interpreta las llaves vacias como un Fragment
    <>
      <button type="submit">+</button>
    </>
  );
};

Les recomiendo esta extensión de VS Code:

ES7 React/Redux/GraphQL/React-Native snippets

Tiene varios shortcut que te van ahorrar tiempo, por ejemplo:

rfc

Creates a React Functional Component with ES7 module system (ES7 React/Redux/GraphQL/React-Native snippets)

import React from 'react'

export default function () {
    return (
        <div>
            
        </div>
    )
}

Algo súper útil que podemos utilizar es la destructuración de objectos, para asi evitar repetir el props.

const TodoSearch = (props) => {
  const {id, placeholder, type} = props
  return (
    <label for={id}>
      <input 
        id={id}
        placeholder={placeholder}
        type={type}
      />
    </label>
  );
};

export { TodoSearch };

Como pueden ver, para ingresar lógica de programacion en el componente, se debe hacer antes del return, de esa manera escribimos menos y puede ser hasta más legible para otras personas.

Buscando y leyendo sobre las keys cuando iteramos en un componente como hicimos en nuestra app encontre:
.

Las keys ayudan a React a identificar que ítems han cambiado, son agregados, o son eliminados. Las keys deben ser dadas a los elementos dentro del array para darle a los elementos una identidad estable.

.
Sí ejecutas un código sin usar los keys tendrás un warning en la consola. Una key es un atributo especial string (no olvidar) que debes incluir al crear listas de elementos.
.
La mejor forma de elegir una key es usando un string que identifique únicamente a un elemento de la lista entre sus hermanos. Habitualmente vas a usar IDs de tus datos como key
.
Se podría utilizar el index del array pero esta permitido solo como ultima opción porque si modificas las posiciones te causaría problemas.
.
Y como dije anteriormente, la idea es identificarlas entre hermanos. Las keys usadas dentro de arrays deberían ser únicas entre sus hermanos. Sin embargo, no necesitan ser únicas globalmente. Podemos usar las mismas keys cuando creamos dos arrays diferentes:

function Blog(props) {
  const sidebar = (
    <ul>
      {props.posts.map((post) =>
        <li key={post.id}>
          {post.title}
        </li>
      )}
    </ul>
  );
  const content = props.posts.map((post) =>
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );
}

const posts = [
  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
  {id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
  <Blog posts={posts} />,
  document.getElementById('root')
);

Entonces, nunca olviden sus keys cuando iteran sobre listas y también que pueden reutilizar esas mismas si haces más iteraciones sobre listas que NO sean hermanas.
.
Saludos 😃

Un tip:
Pueden crear varios archivos JavaScript en la terminal de VSC así:
touch {TodoCounter, TodoSearch, TodoItem}.js
Solo asegúrense de estar en la carpeta src
😄

5.-Componentes de TODO Machine

React.Fragment nos permite enviar una etiqueta por componente, dentro de esta podemos mandar la cantidad que queramos, nos evita usar divs innecesariamente sin afectar la UI de la app.

Una manera más común de utilizar un fragment en react es con las llaves vacías <></>

Para evitar usar nombres que no son al momento de exportar usamos export {nombreFuncion};

key ⇒ para que react pueda identificar cual componente es cuál dentro de una lista y así evitar render innecesarios cuando un elemento no debe cambiar.

import './App.css';
import TodoItem from './components/TodoItem';
import TodoCounter from './components/TodoCounter';
import TodoList from './components/TodoList';
import TodoSearch from './components/TodoSearch';
import CreateTodoButton from './components/CreateTodoButton';

const todos = [
  { text: 'Cortar cebolla', completed: false},
  { text: 'Tomar el curso de intro a React', completed: false},
  { text: 'Llorar con la llorona', completed: false},
]

function App() {
  return (
    <>
      <TodoCounter />
      <TodoSearch />
      <TodoList>
        {todos.map((item, index)=>(
            <TodoItem key={index} {...item}/>
        ))}
      </TodoList>
      <CreateTodoButton />
    </>
  );
}

export default App;

Tambien podemos usar arrow function para crear Componentes:

const TodoItem = (props)=>{ 
  return(
    <li key={props.text}>{props.text}</li>
  )
}

Import React from 'react’
Indica que estamos en un componente de React
Hay tres maneras de evitar envolver los componentes en Divs innecesarios

<React.Fragament> 
	Aquí van los demás componentes
</React.Fragament>
<Fragment> 
	Aquí van los demás componentes
</Fragament>
<>
	Aquí van los demás componentes 
</>

O si el componente es un componente especifico como por ejemplo el Header, Main, Slider, Footer

se puede encerrar la App con esas etiquetas de HTML
Ejemplo:

	<header>
		Demás componentes
	</header>

Bueno ahora no es necesario el

import React from 'react';

porque ya lo importan en lo más arriba que es index.js y si, claro Fragment es una buena opción pero también podrias colocar

<> 
</>

y funciona igual

En este punto se encuentra el componente que te permite evitar llenar todo de <divs>.

una forma de hacer un componente reutilizable para recorrer la lista de TODOs

export function For({ of: array = [], body, empty = null }) {
  if (!array) return null;
  if (array.length === 0) return empty;
  if (typeof body !== "function") return null;
  return array.map(body);
}

y se usa así

<For
    of={todos}
    body={(todo, index) => (
    <TodoItem 
              key={`item-${index}`} 
              text={todo.text}
     />
   )}
/>

Pienso que se podría utilizar el índice del elemento actual como Key para el TodoItem. El índice es uno de los parámetros que tiene la función .map() y quedaría algo así:

<TodoList>
   {toDos.map((todo, idx) => (
     <TodoItem text={todo.text} key={idx} />
    ))}
</TodoList>

Keys en React

Otra forma de crear los componentes en react es usando Arrow Functions, donde esto:

function TodoCounter(props){
return (
	// lógica del componente
)
}

Se puede rescribir como:

const TodoCounter = (props) => {
	return (
		// ESe parentesis en el return es importante!
	)
}

Recuerda que puedes usar el object destructuring de JS para pasar directamente los valores de los todos y evitar tener que repetir el todo

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

Esto hace parte de mejoras que a obtenido JS a lo largo del tiempo, si quieres saber mas, te recomiendo el curso de Oscar, el curso de ECMAScript 6+

Puedes verlo aquí

#nuncaparesdeaprender. 😄

Antes de poner <React.Fragment></ React.Fragment> también se podría poner <></> , el resultado es el mismo

Para utilizar Fragment mucho más comodo, podemos importarlo de React

import React, { Fragment } from 'react'

const App = () => {
   return (
       <Fragment>
   			<Algo />
                 </Fragment>
   );
}

Tambien se puede hacer con div, pero no es recomendado

import React from 'react'

const App = () => {
   return (
       <div>
   			<Algo />
                 </div>
   );
}

O con <>

import React from 'react'

const App = () => {
   return (
       <>
   			<Algo />
                 </>
   );
}

Pero es mejor utilizar Fragment para resolver este problema 🌟.

patito