A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Organizaci贸n de archivos y carpetas

12/23
Recursos

Aportes 41

Preguntas 7

Ordenar por:

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

La extensi贸n para cambiar el color de Visual Studio Code en cada uno de nuestros entornos de trabajo se llama Peacock (de John Papa):

Stateful y Statless components

  • Los componentes stateful son los componentes que guardan y manejan estados. Por lo que hemos aprendido hasta ahora ser铆a los que usan alguna variable que usa React.useState
  • Mientras los componentes stateless son los componentes que solo presentan informaci贸n. Es decir son los componentes que reciben props o simplemente muestran algun contenido

Fuente: Stateful and Stateless Components in React

Obvio que es cuesti贸n de gustos, de hecho me encanta el orden y me aguante ordenar las cosas porque hab铆a visto que estaba esta secci贸n dentro del curso y quer铆a ver como organizan todo en ReactJS.
.
Ahora bien, entiendo que es al menos, m谩s r谩pido para ordenar, etc pero usar index.js por defecto al nombre del componente lo veo poco veloz a la hora de altabear o buscar dentro de las pesta帽as para saber que estas editando. Siento que aunque quede por ah铆 relevante, repetir el nombre del componente en su carpeta seria lo m谩s optimo.
.
De hecho del Curso de Librer铆as y Frameworks en el capitulo relacionado a este dejaron unos links a como organizar para que sea escalable un proyecto en React en el 2021 (ac谩 el link https://codewithghazi.com/best-scalable-react-app-structure-2021/ ) y tambi茅n lo hacen como organiza el profe con ComponenteX/index.jsx, no me gusta pero se ve que a la larga es lo mejor.
.
Habr谩 que acostumbrarse 馃槂 y luego segu铆 mirando el video y el profe habla sobre ese caso, lo sent铆 medio incomodo pero nada que no se pueda acostumbrar.
.
Luego se habl贸 sobre stateful vs stateless y sobre como ordenar ya nuestro c贸digo del componente, dejo ac谩 unas lecturas para interiorizar sobre el tema ya que no recuerdo haber hablado sobre el tema anteriormente:

Primero apaguen el servidor antes de organizar las carpetas y luego lo prendes o sino te sale un error, como me paso a mi 馃槥.

Para hacer lo que hizo en el min 13:10

  1. Alt + Click para agregar multiples cursores
  2. Ctrl + Shift + 鈫 (2 veces)
  3. " , " (Coma)

As铆 lo he organizado:

/馃搨src
聽聽聽App.jsx
聽聽聽Index.jsx
聽聽聽/馃搨components
聽聽聽聽聽聽/馃搨TodoCounter
聽聽聽聽聽聽聽聽聽TodoCounter.jsx
聽聽聽聽聽聽聽聽聽todocounter.scss
聽聽聽聽聽聽/馃搨TodoSearch
聽聽聽聽聽聽聽聽聽TodoSearch.jsx
聽聽聽聽聽聽聽聽聽todosearch.scss
聽聽聽聽聽聽/馃搨TodoList
聽聽聽聽聽聽聽聽聽TodoList.jsx
聽聽聽聽聽聽聽聽聽todolist.scss

Pienso que las carpetas de los componentes deber铆an ir dentro de una carpeta llamada components, esto con el fin de no tener tantas carpetas directamente en src

siempre he querido saber porque la mayoria de los profesores si no son todos en platzi, despues de tener todo ya hecho, comienzan los cambios de organizacion en la mitad del curso, estoy muchas veces en mi caso causo problemas y la desorganizacion hizo que desistiera de los cursos por no seguir la continuidad, este no fue el caso al menos pero si quisiera saber cual es el objetivo de hacerlo de esta manera

A veces cuando se tienen muchas carpetas abiertas en el editor, se puede hacer un desastre, hay un bot贸n que con 1 solo clic se pueden cerrar todas las carpetas abiertas y as铆 tener m谩s organizado nuestro lugar de trabajo, el bot贸n est谩 en la parte superior derecha del organizador de carpetas:

11.-Organizaci贸n de archivos y carpetas

Para tener una mejor organizaci贸n dentro de nuestro proyecto vamos a hacer una carpeta para cada componente.

Una desventaja de esa manera de organizar es que muchos archivos tienen el nombre de index, pero visual no ayuda de cierta manera a identificar cu谩l es cual.

NOTA: Cuando no se especifica un archivo dentro de una carpeta autom谩ticamente llama a index.js

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.

JAJAJAJ el suspiro de JuanDC en 11:16 porque le tocaba enviar todos los props es ic贸nico jajajaja

Como es un poco tedioso esto de organizar carpetas, cre茅 un CLI que lo hace por m铆 馃槂

Los invito a verlo en:

Atomic Maker

En el Readme encontr谩n informaci贸n de instalaci贸n y uso 馃槃

O simplemente pueden probarlo con:

npx atomic-maker

Esto de ordenar todo en carpetas es tedioso鈥

Stateful son componentes que tienen declaraci贸n de estado en su funcion.

Stateless son componentes que no tienen ningun tipo de estado declarado en el cuerpo de la funcion.

馃憖Que un componente reciba, o env铆e props, no afecta en que sea stateful o stateless.

Yo organizo mis carpetas asi, eh visto que es una forma profesional.

Yo lo que suelo hacer es crear la carpeta con el nombre del componente y dentro dos archivos.

  • Component.js
  • index.js

En Component.js todo lo del componente y en index asi

export { default } from './Component';

Por si les aparece un error de que no encuentra un archivo y ya revisaron como 1001 veces que todo est茅 correcto, reinicien el servidor.

Estaba esperando esta parte desde el principio del curso. Me gusta ver los archivos organizados y verlos as铆 me generaban estr茅x jaja 馃槂

Considero que, para un proyecto de este tama帽o, lo ideal es tener un directorio /components y guardar nuestros componentes .js en dicha carpeta, as铆 como tener una carpeta de /styles para nuestros .css.
Para proyectos m谩s grandes creo que lo ideal si ser铆a tener cada componente con su stylesheet en carpetas independientes.

En mi caso como estoy usando el framework de CSS Tailwind me ahorra archivos 馃榿, as铆 que hice una carpeta de components y una de styles en donde esta el 煤nico archivo de CSS que agarra la configuraci贸n de Tailwind. En mi caso se me hizo mas c贸modo sacar la l贸gica a una carpeta que se llama utils y dejar la UI en App.jsx.
dist son mis archivos est谩ticos exportados y no tengo carpeta de public porque estoy usando Vite en lugar de CRA y as铆 lo prefiere esa heramienta 馃し鈥嶁檪锔

No s茅 si ya mencionaron esto pero me parece importante y es algo que me cost贸 entender. Si queremos seguir el principio de no modificar el estado, el spread operator en este caso no es de utilidad. Ya que al ser objetos lo que estamos copiando, se est谩n pasando las referencias. Y al editarlos, estaremos editando los objetos del arreglo del estado. Un ejemplo que ilustra este punto:

const a = [{name: 'Kevin'}];
const b = [...a];
b[0].name = 'Pedro';
console.log(a[0].name); // Pedro

Por este tipo de problemas, se recomienda usar bibliotecas como lodash, que permite usar el m茅todo cloneDeep, para hacer una copia completa del valor de los objetos y arreglos

o lo que hago es crear una carpeta de componentes
En la de contenedores coloco componentes que contienen dentro otros componentes como:
TodoList => TodoItem

馃搧src
App.jsx
Index.js
index.css
馃搧Components
CreateTodoButton
TodoCounter
TodoItem
TodoSearch
馃搧Contenedores
TodoList
馃搧styles " Components & Contenedores

Muy buena onda el profe me sorprende lo bueno que es siendo tan joven
Uno siempre esta acostumbrado a que nos ense帽e gente grande
+10

En lo personal no soy fan de estar trabajando con varios archvos llamados inde.js aun con la ayuda de VS Code

Hola! puede que tengas un error , reinicia el servidor, verifica que est茅s exportando los archivos y por ultimo puede que te falte los brakets = function AppUI({
totalTodos,
compledTotal,
searchValue,
setSearchValue,
filerElements,
completeTodos,
DeletTodos,
}) {

organizando archivos y carpetas con los diferentes todos que nos deja realizar react

organizando carpetas

En mi caso, prefiero hacer el scaffolding con Atomic Design:

Otra desventaja que tiene el nombrar los componentes como 鈥渋ndex鈥 (aparte de como se ven en las pesta帽as del VSC) es no poder acceder a ellos comodamente mediante el shorcut ctrl + p. (Esto se nota mucho en proyectos grandes, con +100 componentes)
.
Por eso siempre nombro el .jsx con el nombre propio del componente y, adem谩s, creo un archivo index.js cuya 煤nica responabilidad es exportar el .jsx:

export { Component } from "./Component/"

De manera que, al importarlo, queda la siguiente sintaxis:

import { Component } from "../atoms/Component

.
Como sigo el mismo lineamiento en todos mis proyectos, hice un peque帽o CLI en node que genera el scaffolding por m铆. A煤n no est谩 disponible como paquete de npm, pero pronto lo estar谩 馃槃
Dejo el repo por si desean probarlo: atomic-maker

ya con esta idea cada quien define como ordenar sus componentes

Muy buen truco ese para hacer refactor

Sencilla mi organizaci贸n de archivos

Componentes Visuales
Conocidos en ingl茅s como Presentational Components. Este tipo de componentes solo deben centrase y enfocar sus esfuerzos en como debe renderizarse la UI. Este tipo de componentes puede componerse de otros elementos visuales y suele incluir estilos y clases. Todos los datos implicados en su renderizaci贸n se deben recibir a trav茅s de props, por lo que deben ser independientes de llamadas a servicios externos. Este tipo de componentes suelen ser de tipo Stateless ya que no necesitan estado, y deben de gestionar las acciones pas谩ndoselas a componentes padre a trav茅s de sus props.
Ejemplo:
class Item extends React.Component {
render () {
return (
<li><a href=鈥#鈥>{ this.props.valor }</a></li>
);
}
}
Componentes Contenedor
Conocidos en ingl茅s como Container Components. Estos componentes deben de dejar a un lado la interfaz y encargarse de la parte funcional, simplemente son contenedores de otros componentes y se encargan de gestionar la l贸gica de interacci贸n y la l贸gica de los datos, haciendo las llamadas necesarias a servicios externos. A diferencia de los anteriores suelen gestionar su propio estado, siendo un nodo importante en la jerarqu铆a del 谩rbol de componentes.

Ejemplo:

class ItemsContainer extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      temas: ['Vue', 'React JS', 'Angular']
    };
  }
  
  render () {
    const items = this.state.temas.map(t => (
      <Item valor={ t } />
    ));
    return (
      <div>
       <ul>{ items }</ul>
      </div>
    );
  }
}

Generalmente, los componentes contenedor representan cada una de las p谩ginas y coincide con una de las rutas definidas. Recomendable la lectura de Enrique Munguia.

pos se me fue todo a la mamasita cuando empec茅 a renombrar y mover archivos鈥 40 minutos despu茅s logr茅 solucionar todas las rutas jajaj (lo bueno, practiqu茅 y aprend铆 a 鈥渄esbuguear鈥 el movimiento de archivos.

ahora entiendo que hay varias metodolog铆as o buenas practicas para organizar nuestras carpetas y archivos 驴Cuales serian las mejores opciones para nuestros proyectos?

Excelente! lo hice justo cuando menciono que tendriamos componentes, me acorde del maltratado vue xD

Yo diria que debe ser un dolor de cabeza mantener codigo en react de alguien mas
ALM, pense que no se podia ordenar de esa forma los archivos, ya veo que no, yo cree una carpeta components y ahi coloque los js y una carpeta css para los css