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

6/23
Recursos

Aportes 75

Preguntas 37

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

La AI de Tabnine cuando lee: 鈥淟lorar 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>
    </>
  );
};

Para los que tambi茅n se sorprendieron de la c谩mara r谩pida para un curso de introducci贸n, aqu铆 les dejo como quedan los archivos JS:
/App.js/

import react from "react";
import { TodoCounter } from "./TodoCounter";
import { TodoSearch } from "./TodoSearch.js";
import { TodoList } from "./TodoList.js";
import { TodoItem } from "./TodoItem.js";
import { CreateTodoButtom } from "./CreateTodoButton.js";
//import './App.css';
const todos=[
  {text:'Cortar cebolla', completed:false},
  {text:'Tormar el curso de intro a react', completed:false},
  {text:'Llorar con la llorona', completed:false}
];
function App() {
  return (
   <react.Fragment>
      <TodoCounter />    
      <TodoSearch />
      <TodoList>
        {todos.map(todo =>(<TodoItem key={todo.text} text={todo.text} />))}
      </TodoList>
      <CreateTodoButtom />      
   </react.Fragment>
  );
}

export default App;

/TodoCounter/

import React from "react";
function TodoCounter(){
    return(
        <h2> Has complentado 2 de 3 ToDos</h2>
    )
}

export {TodoCounter};

/TodoSearch/

import react from "react";

function TodoSearch(){
    return(
        <input placeholder="Cebolla" />
    );
}

export {TodoSearch};

/TodoList/

import react from "react";

function TodoList(props){
    return(
        <section>
            <ul>
                {props.children}
            </ul>
        </section>
    );
}

export { TodoList};

/TodoItem/

import react from "react";

function TodoItem(props){
    return(
        <li>
            <span>C</span>
            <p>{props.text}</p>
            <span>X</span>
        </li>
    );
}

export { TodoItem };

/CreateTodoButtom/

import react from "react";

function CreateTodoButtom(props){
    return(
        <button>+</button>
    );
}

export { CreateTodoButtom};

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
馃槃

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

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 馃槂

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.

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.

Gente, estoy usando una exportaci贸n m煤ltiple de componentes

驴Como se hace?

  1. En el directorio components estoy creando una carpeta por componente para tener un mejor orden y en la ra铆z creo un archivo index.js. Ahora, dentro de cada componente agrego los siguientes archivos:

    • [nombre componente].js
    • index.js
  2. En el archivo del componente defino su estructura normal y lo exporto como default.

    3.En el archivo index.js que cree en el directorio del componente agrego el siguiente c贸digo

    4.Por ultimo en el archivo index.js que cree en la ra铆z del directorio components exporto todos los componentes de la siguiente manera.

    Eso es todo, ahora es cuesti贸n de hacer la importaci贸n en App.js y a mi criterio lo veo mucho mejor, mas limpio y ahorro tiempo evitando escribir la ruta componente por componente.

Saludos,

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;

He hecho aplicaciones de TO-DO varias veces con react para entrenar, es de lo m谩s t铆pico al aprender los framworks de frontend鈥 Pero est谩 interesante como lo abord贸 Juan David, yendo desde lo general hasta lo espec铆fico.
Quienes les cueste seguirlo no se desanimen, puede parecer retador al principio pero mas adelante todo har谩 click en sus cabezas.

C谩mara r谩pida en un curso introductorio. Qu茅 genio.

Para comentar las lineas puedes seleccionar el texto y presionar ctrl + } 馃槂

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

Comentar bloques de c贸digo Windows 馃槈


1. **[CTRL] + K** (Vscode queda a la espera). 
- 

2.  Despu茅s pulsa **[CTRL] + C** para comentar. 
- 

3. **[CTRL] + U** para des-comentar.

Ya no es necesario : import React from 鈥榬eact鈥;
como tambien fragment lo podemos usar con etiquetas vacia
<> </>
y VSCode para comentar una o mas lineas las seleccionas y ALT+ SHIFT+A

Si a alguien le sale este error :

Lo que tienen que hacer es ir al archivo index.js. Se va a ver as铆:

y remplazar todo el c贸digo por defecto que viene all铆, por el de la versi贸n 18. Y ahora te quedar铆a as铆:

Espero les sirva.

Qu茅 mal lo de la c谩mara r谩pida. Muy f谩cil perderse as铆 馃槮

creo que falta la explicacion de todo lo que hizo en camara rapida

馃槮

**TIP PARA QUE NO ESTEN 30 MINUTOS PERDIDOS COMO YO.**
  • Utilicen PascalCase
<TodoCounter/> 
  • NO Utilicen camelCase
<todoCounter> 

Por que no les va a dejar renderizar su componente. JAJA 馃槙 馃槃

Tambien podemos usar arrow function para crear Componentes:

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

Carambas!!!
Como es posible una c谩mara r谩pida en un curso de INTRODUCCI脫N a React.js
Muy mal

Que dificil fue seguir este tuto jaja pero al lograr renderizarlo鈥
猓库?猓库?猓库?猓库?猓库牊鉅佲爠猓犫6猓锯?猓库?猓库?猓库7猓垛狻鉅勨爠鉅勨爠鉅
猓库?猓库?猓库?猓库?鉅冣猓粹?猓库?猓库?猓库?猓库?猓库?猓库?猓库6鉅勨爠鉅勨爠
猓库?猓库?猓库?猓库爮猓犫【鉅涒牄鉅涒牷鉅库?猓库?猓库?猓库?猓库?猓库?猓库&鉅勨爠
猓库?猓库?猓库?鉅忊<猓库6猓库?猓︹¥猓猓犫?猓库?猓库?猓库?猓库?猓库?猓库7狻
猓库?猓库?猓库猓尖?狻库牽猗库?猓库?猓库?猓库?猓库?狻忊爥鉅涒牷猓库?猓库?猓库》
猓库?猓库?狻忊>猓库?猓库7猓垛¥猓も=猓库?猓库?猓库?猓库鉅勨爠鉅堚⒖猓库?猓库
猓库?猓库ⅲ猓尖?猓库?猓库?猓库?猓库?猓库?猓库?猓熲;猓库?猓库7猓︹鉅涒?猓库爟
猓库?猗嬧>猓库?猓库?猓库?猓库?猓库?猓库?猓库?猓库?猓嶁牷猗库?猓库7鉅勨8猓库爠
猓库?猓尖?猓库?猓库?猓库?猓団¥猓库鉅烩?猓库?猓库?猓库7猓も=猓库?猓库?猓库爠
猓库?猓库?猓库?猓库?猓库?猓库?猓库?猗垛】猗光?猓库?猓库?猓库?猓库?猓库?鉅団爠
猓库?猓库?猓库?猓库】鉅库牽猓库?猓库?猓封6猓库?猓库?猓库?猓库?猓库?猓库鉅勨爠
猓库?猓库?猓库?猓库?猓库7猓鉅涒⒖猓库?猓库?猓库?猓库?猓库?猓库?鉅库爜鉅勨爠
狻忊】猓库?猓库?猓库?猓忊狻光牽猓库¥猓欌?猓库?猓库?猓库?猓库?狻熲爜鉅勨爠鉅勨牁
狻団牷鉅库?猓库?猓库?猓库?猓库'猓库?猓库?猓库?猓库?猓库?猓库⒖狻団爠鉅勨爠鉅勨
猓库爠鉅勨爥鉅夆牷猓库?猓库?狻濃牷猓库狻涒牷猓库?猓库?猓库?狻库鉅戔鉅勨狻冣<

Si se quiere en vez de usar el React.fracment podemos dejar las etiuquetas vac铆as, as铆 no es necesario importar React ni escrivir de m谩s. Ejemplo:

<>
etiquetas
</>

As铆 es mucho m谩s pr谩ctico y f谩cil

Es normal que para ver un video me tarde 1 hora xD?

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

const todos=[
  {text: "Cortar cebolla", completed: false},
  {text: "ir al curso de react", completed: false},
  {text: "picar cebolla", completed: false}
]

function App() {
  return (
  <React.Fragment>
      <TodoCounter/>
      <TodoSearch/>      
      <TodoList>
        {todos.map(todo =>(
          <TodoItem key={todo.text} text={todo.text}/>
        ))}
      </TodoList>
      <CreateTodoButton/>
  </React.Fragment>
  );
}

export default App;

Desestructuracion

Recuerden que para ahorrarnos un poco de c贸digo tanto en componentes con las properties como en las importaciones podemos hacer uso de la desestructuraci贸n.

En caso de ser objetos usaremos la desestructuraci贸n por nombre, y en array por posici贸n.

Por ejemplo:

import {Fragment} from "React";

Esto nos permite evitar el uso de React.Fragment, ahorrandonos un poco de trabajo, esto aplica igual a las Properties

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

En esta ocacion nos ahorramos el escribir props.mensaje

Para el manejo del estate usamos desestructuracion de arrays, en este caso no es por nombre si no por posicion.
Por ejemplo:

const[state,setState] = useState();

permitiendo hacer un codigo mas legible y entendible para nosotros y compa帽eros programadores

Para no tener que acceder al objeto 鈥減rops鈥 a cada momento:
<div>{props.element1}</div>
podemos utilizar:
const { element1, element2, element3 } = props;
as铆 a mi parecer el c贸digo se vera mas limpio quedando as铆 por ejemlo:
<div>{element1}</div>

驴Qu茅 est谩 pasando? Por ahora estoy entendiendo todo 隆tan claro como el agua!

Si tienes el siguiente error o Warning mejor dicho:

  Line 4:7:  'todos' is assigned a value but never used  no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

debes de comentar el arreglo **todos** que hicimos

Actualmente, podemos reemplazar React.Fragment por

<> 
</>

Si te da parsing error, y te dice que no est谩 cerrado el div principal (o el React.Fragment) probablemente lo que est茅 mal cerrado sea alguna etiqueta de adentro.
Componentes que se abren y cierran en la misma linea:

<div /> 

Componentes que se abren y se cierran en distintas lineas

<div></div>

para identificar mejor la key

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

Desde React 18 la sintaxis es la siguiente:
const root = ReactDOM.createRoot(document.getElementById(鈥榬oot鈥));
root.render(
<App />,
);

Me parece una TOTAL FALTA DE RESPETO que el profesor en lugar de mostrar el paso a paso lo haga en camara rapida (no le podes seguir los pasos, estamos aprendiendo) ademas que ya de por naturaleza habla rapido, no pausado.

Recomiendo organizar a los archivos de entrada, ya que en la clase 11, se los cambia de esa manera.

As铆 lo he organizado:

/馃搨src
	index.js
	index.css
		/馃搨App
			index.js
			App.css
			AppUI.js
		/馃搨CreateTodoButton
			index.js
			CreateTodoButton.css
		/馃搨TodoCounter
			index.js
			TodoCounter.css
		/馃搨TodoSearch
			index.js
			TodoSearch.css
		/馃搨TodoList
			index.js
			TodoList.css
		/馃搨TodoItem
			index.js
			TodoItem.css

Para los que venimos siguiendo el curso con React 18, nos aparecer谩 el error:

Para solucionar esto debemos cambiar el archivo index.js de la siguiente manera:

import React from 'react';
// import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

// ReactDOM.render(
//   <App />,
//   document.getElementById('root')
// );

Ademas les recomiendo instalar emmet para react, al escribir rafce emmet nos autocompleta con toda la estructura del componente.

Esto en VSC

todo counter

Esto de crear, exportar e importar componentes me recuerda mucho a la estructura con la que funciona SASS. Que te permite reutilizar un mismo archivo donde desarrolles c贸digo en distintos lugares sin necesidad de volver a escribirlo todo otra vez.

{props.children} en MIN脷SCULA.
No se si a alguien mas le paso pero en TodoList cuando escrib铆 props.children autom谩ticamente VS Code puso children con la c en may煤scula quedando props.Children por lo cual no hacia nada, espero les sirva de algo mi peque帽o error.

Me gust贸 la clase!

Despu茅s de haber regresado al curso intermedio de desarrollo web, se me hizo mas f谩cil aprender React, asi que si sigues sin entender el curso, por favor ve a la escuela intermedia o almenos sigue los cursos que nos pidi贸 el profe que debiamos haber visto, enserio te ahorrar谩 mucho esfuerzo mental. Sobretodo porque relaciones y refuerzas los conceptos como los Objetos literales y los prototipos. 馃槂.

explica de la manera mas sencilla

const todos = [
{ text: 鈥楥ortar cebolla鈥, completed: false},
{ text: 鈥楾omar el curso de intro a React鈥, completed: false},
{ text: 鈥楲lorar con la llorona鈥, completed: false},
];

Hola! les dejo por aqu铆 una sugerencia:

Les recomiendo instalar una extension de google que se llama React Developer Tools, aqui el link:

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

para que al abrir el insepccionador puedan ubicar los componentes que se renderizan, entre otras utilidades, y un link que explica como usar la extension:

https://www.youtube.com/watch?v=-LfSE9ZxZDI

Espero les sea de utilidad! Saludos

Recuerden que en VS pueden seleccionar el texto presionar alt + shift + a y eso lo comenta 馃槂

Jajaja, ya entramos en confianza, con amenaza y todo 鈥 el modal queda para mas adelante

Otra forma de escribir el codigo es medianta la destructuracion de objetos:

function TodoList(props) {
    const { children } = props;
    return (
        <section>
            {children}
        </section>
    )
}

export { TodoList}

o tambien

function TodoItem(props) {
    const { text } = props;
    return (
        <li>
            <span>C</span>
            <p>{text}</p>
            <span>X</span>
        </li>
    )
}

export { TodoItem }

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

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

tambien para el fragment se puede

import React , { Fragment } from 'react';

const componente = () => {
	return (
		<Fragment>
		</Fragment>
	)
]

o tambi茅n de esta forma

import React from 'react';

const Componente = () => {
	
	return (

		<>
		</>
	)
}

otra forma de hacerlo el fragment

los props tambien se puede de esta manera

import React from 'react'

const Componente = ( props ) => {
	const { text } = props

	return (
	<>
		<h1>{ texto } </h1>

	</>
)

}

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>

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 馃専.

La forma pro (pienso yo) de mandar una key 煤nica es con el 铆ndice del array:

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

C谩mara r谩pida para el curso b谩sico, creo que se fueron un mont贸n de detalles y razones de por qu茅 quedaron as铆 los componentes.

xd no se para que sirven los marcadores pero ahi les va uno uwu

demasiada informaci贸n para dar primeros pasos en react, estas mandando funciones flecha, componentes envio de variables de un componente a otro, children todo en un video de 20 minutos, mas encima explicando una aplicaci贸n de lista de tareas, ojala se pueda esto recomponer por lo que veo me toca por otro lado aprender react basico y esperar si otros cursos ya logro ver cosas mas organizadas

Otra alternativa para el key es pasar el index del array, lo cual puede hacerse gracias a la segunda propiedad de Map

<TodoList>
        {todos.map((todo, index) => <TodoItem key={index} todo={todo} />)}
      </TodoList>

Alguna diferencia si en vez de usar React.Fragment env铆o una etiqueta template? 鈥 si a lo VUE

No se porque , pero le entendi mucho mas al Profe Oscar Baraja en el curso practico de react

yo vi que el profe coloco los archivos dentro de src , y me pareio un dolor de cabeza todo hay mezclado asi que cree una carpeta interna llamada elementReact y hay deje los archivos queda mas ordenados tambien me dejo la duda de como tenia el archivo TodoSearch.js

En realidad se deber铆a crear una propiedad id 煤nica para cada objeto todo en el arreglo para el mapeo鈥 Los textos se pueden repetir.

patito