Tips para naming y abstracción de componentes React

Alex Chipre

student•

Espero les guste mi organización Creo que se llama por componentes Es muy sencilla y como uso StyleComponents y MaterialUI no tengo muchos assets.

Enrique Villalobos Andrade

student•

Una duda. Por qué jsx y no js?

Es cosa de Vite ? La verdad no conozco mucho de Vite

Mauricio salazar

student•

Se podría decir que es lo mismo, no hay diferencia, aunque se recomienda usar esa extensión al trabajar con React, JSX solo quiere decir que estamos trabajando con HTML y JS en un mismo archivo y a esto sé lo denomina, llamamos componente en React.

Harold Zurita Simon

student•

En Windows el atajo de VSC que se utiliza en el video consta de lo siguiente: . Primero se copia los argumentos de AppUI:

completedTasks,
totalTasks,
searchValue,
setSearchValue,
searchedTasks,
completeTask,
deleteTask,

. Luego, en el index,js donde retornamos <AppUI />, se puede pegar lo copiado de la siguiente manera:

return (
    <AppUI
    completedTasks,
    totalTasks,
    searchValue,
    setSearchValue,
    searchedTasks,
    completeTask,
    deleteTask,
    />
  );

Lo que sigue es mantener oprimido la tecla alt y con Click izquierdo vamos poniendo los cursores al final de cada coma , (los | son meramente ilustrativos 😅).

return (
    <AppUI
    completedTasks,|
    totalTasks,|
    searchValue,|
    setSearchValue,|
    searchedTasks,|
    completeTask,|
    deleteTask,|
    />
  );

. Una vez que tengas posicionado los cursores, eliminas las comas. . posteriormente mantienes oprimido Shift y Ctrl junto a la tecla de flecha izquierda. Con eso se tendrán seleccionadas esas partes y lo copiamos. . Finalmente, solo se aumenta el ={} mediante los cursores y pegamos lo copiado dentro de las llaves. En mi caso queda de la siguiente manera:

return (
    <AppUI
      completedTasks={completedTasks}
      totalTasks={totalTasks}
      searchValue={searchValue}
      setSearchValue={setSearchValue}
      searchedTasks={searchedTasks}
      completeTask={completeTask}
      deleteTask={deleteTask}
    />
  );

Jerson Hernán Uribe Montenegro

student•

Comentario infravalorado, muchas gracias.

Mikaella Andrea Muñoz Berrios

student•

Profundamente agradecida <3

Randy Ochoa

student•

Esta es la organizacion de mis archivos:

Edixon javier Pabon Lizcano

student•

Excelentte me gusta tu organizacion de archivos.

Alan Cabrera

student•

Stateless vs Stateful: Para tener una mejor organización de nuestros archivos podemos usar la “regla” del stateless vs stateful que consisten en separar nuestros componentes entre los que tienen lógica por dentro y los que renderizan el contenido, haciendo así un poco más agradable a la vista nuestra búsqueda y navegación entre componentes y su contenido. Esto no es una regla, es más bien una práctica que varios programadores siguen y puedes o no usarla según que tan útil la sientas en tu proyecto y que tan cómoda te parezca.

Edgar Oliveros

student•

Esta genial poder separar el UI del App!!!

Armando Cruz Vidal

student•

Profesor DCómics: Respeto tu opinión, pero reafirmo mi autoridad como tu profesor 😅

Henry Alexander Velásquez Rosas

student•

Frases que Freddy alguna vez dijo :3

Maia Paratcha

student•

Mi pequeño aporte: ++- Componentes Statefull vs. Componentes Stateless:++ Statefull: Componentes que se enfocan en el manejo de estados y la logica de la app (delete, complete, save)

Stateless: Componentes que se encargan de la interfaz (AppUI)

JACOBO ZAPATA ROJAS

student•

Juan's file organization is actually very good, but I think it is a better practice to store your components within a folder named "components". Also there might not be much need of using a separate folder to store each component individually, because if there are a lot ot them, this can be visually a little bit overwhelming. This practice is good if there are some specific components with more information inside them, like for example, if we have a TaskList.jsx component, chances are there will be a TaskItem.jsx nested, and also we can store custom css stylesheet just for that component. In those cases I do see the need of using separate folders for each component but overall it can turn bothersome to the sight

Caleb González Flores

student•

Yo encantado con esta organización, me parece super eficiente y el Vs Code se encarga de hacerlo todo intuitivo. Estaría bueno un comando como para crear los componentes con su index y el css de una vez.

Willie David Roa Hidalgo

student•

Si llegaste hasta acá, vas por la mitad del curso. 😊 ¡No te rindas! 😎

Max Andy Diaz Neyra

student•

Stateless vs Stateful En App hay que abstraer la UI en un nuevo componente al cual llamaremos con todas las props que necesitemos desde el componente App general.

JUAN JOSE HERNANDEZ MUÑOZ

student•

Lei que cuando la aplicacion crece tambien es util tener una carpeta componentes para los componentes globales que se reutilizan a traves de la aplicacion y otra llamada views o pages no recuerdo, para las diferentes vistas de la pagina como hompeage, login, etcetera.

Si crece mucho mas decia que se puede organizar por features

cristian camilo rios alvarez

student•

me gusto mucho esta Clase, se ve muy organizado y fácil de entender.

no se si solo a mi o a alguien también le paso que tuve que apagar y reiniciar el servidor para que se quitaran unos errores que no existían

Juan Castro

teacher•

Tal vez no detectó el cambio en algún archivo y por eso no recargó para darse cuenta de que habías arreglado el error. 🤷

yonatan silva

student•

muchas gracias por el aporte, llevo 2 horas tratando de resolver hasta revisé letra por letra jajajaja

Ricardo Alfonso Chavez Vilcapoma

student•

Me confunde un poco el tener varios archivos del mismo nombre, así que lo deje con su propio nombre.

Xavier Flores

student•

si yo fuera otro dev que se incorporaría a tu equipo, me gustaría llamar a cada componente con su nombre.

NICOLAS ALVARINO LAGUNA

student•

A mí en lo particular, cuando tengo abierto varios archivos que se llaman index.js, a primera vista, me confunden, así sea que visual estudio, le coloca al lado la ruta de cada uno, pero eso me confunde, prefiero que cada archivo lleve su propio nombre.

Tomás Puw Zirulnik

student•

Buenas, les hago una consulta, luego de aplicar toda la reogarnizacion del proyecto, me surgio el siguiente problema misterioso. En Google Chrome el proyecto corre diez puntos, peeero en Opera(mi navegadore habitual) no se ven se ve la lista, si el contador, el buscador y el boton para crear. Alguien sabe que podra ser? PD: aplique este comando que me sugirio la npm: npx update-browserslist-db@latest pero no dio resultado

Marcelo Vinicio Chavarría Ugalde

student•

Y da errores en consola?? Funcionaba bien antes de la organización ?

Henry Alexander Velásquez Rosas

student•

Mi teoría es que esto se debe a que solo usamos el localStore en Chrome. 🤔🔥

Carlos López Rosado

student•

En mac, el shortcut para seleccionar multiples lineas e invocar multiples cursores al final de cada una, es el siguiente:

option+shift+click en cada linea

Henrry Andrés Terraza Sigcho

student•

Hasta ahora mi proyecto va asi un tanto ordenado agradeceria alguna sugerencia para para mejorar el orden de los archivos.

josue saleme

student•

Henry, el placeholder del input, posiblemente se mal interprete, a no ser que hayas cambiado la funcionalidad, pero si seguiste la del curso, por ahi es mas intuitivo si Colocas "Buscar Tarea" o algo similar, ya que ahi va el TodoSearch. Saludos!

Brayan omar cabrera diez

student•

Like si te dan estrés los comentarios en las líneas de juan.

Huilén Solís

student•

Lo he organizado de una manera parecida a como es en Angular.

Tips para naming y abstracción de componentes React

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