Cuando trabajas en un equipo grande, siempre es bueno tener una guía de estilo no solo para CSS y JS, sino también para estructurar componentes y carpetas. Decidí escribir el mío para mostrar cómo y dónde coloco mis archivos y carpetas. ¡Empecemos! Enlace a la segunda parte. Siempre divido mis componentes por valor comercial. Yo lo llamo . bundle Por ejemplo, cada que he creado tiene un paquete común, que mantiene todos los componentes comunes, como encabezado, pie de página, botón, modal, etc. Si tiene una página de usuario (configuración, fotos, perfil), sería un paquete de usuario. que tendría todos los componentes específicos de un usuario. Es realmente útil tener una estructura como esta porque cada vez que ve una página en un navegador, siempre puede decir dónde necesita ir para encontrar ese componente. También es bueno para los recién llegados que realmente no saben cómo estructura sus componentes. Podrían adivinar qué paquete es. Por ejemplo: , la página mostraría un componente del paquete de usuario. Es fácil de adivinar. aplicación /user/22/preview Cada paquete tiene algunas carpetas: tienen acciones redux. **actionCreators** 2. es una carpeta para todos los componentes de un paquete. Cada carpeta en la carpeta de componentes debe nombrarse con una primera letra mayúscula como archivos de todos los componentes. La razón por la que siempre uso la primera letra mayúscula es porque cuando busca un archivo por nombre en su proyecto, siempre puede reconocer los componentes solo por el del nombre frente al , siempre sabe que el segundo es un componente. Antes de seguir leyendo, considere leer este . **Components** header Header artículo Ahora hablemos por qué hay tres archivos en lugar de uno. es solo una vista simple. Puede ser un componente sin estado (función) o una clase. Prefiero usar una clase porque las clases funcionan con HMR de fábrica, pero depende de usted. Lo único que debe saber es que la vista es un componente tonto que solo debe representar accesorios y no debe haber lógica comercial allí. Header.js es un componente "inteligente". Este tipo de componentes siempre obtiene datos, prepara datos, obtiene datos de redux-store/ , define acciones, inyecta intl o jss. Es un buen lugar para componer . Por lo general, no importa reaccionar dentro de los componentes inteligentes porque no debe representar nada allí. Así es como debería verse: HeaderContainer.js relay componentes de orden superior solo vuelve a exportar componentes. Si importa sus componentes en algún lugar de su aplicación, lo haría como este . Para evitar el doble , podemos volver a exportar nuestro componente Header dentro de index.js. También es bueno tenerlo aquí porque puede tener dos contenedores y solo una vista, por ejemplo: y solo una vista . Y, por supuesto, tiene dos rutas diferentes: y . index.js import Header from 'bundles/common/components/Header/Header.js' Header/Header.js CreateUserFormContainer.js UpdateUserFormContainer.js UserForm.js update-user create-user Ahora podemos importar nuestros componentes como import { Header, HeaderContainer } from 'bundles/common/components/Header'; 3. es una carpeta para todos los reductores de un paquete. El reductor para intl.js se vería así: **reducers** 4. La carpeta guarda todas las rutas del paquete actual. Puede tener algunos archivos de rutas para el mismo paquete. Para un paquete común, no es normal tener ninguna ruta porque es un paquete común, pero digamos que tenemos una ruta que muestra nuestro encabezado: . **routes** /header Recojo todas las rutas en el archivo de cada ruta y las exporto como una matriz. Más tarde, en mi punto de entrada de la aplicación, importo todas las rutas, las fusiono en una matriz y renderizo dentro del . Router Conclusión. Lo único que importa es qué tan cómodos se sientan usted y su equipo trabajando juntos. La guía de estilo es solo una convención que usted y su equipo definen. Espero que hayas disfrutado este artículo. Por favor, dale me gusta y comparte si te gusta. Paz. . Enlace a la segunda parte

Different

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Making security fun one episode at a time

Cómo estructurar tu aplicación de reacción.

Demasiado Largo; Para Leer

Companies Mentioned

Ven Korolyov

About Author

ETIQUETAS

Languages

ESTE ARTÍCULO FUE PRESENTADO EN...

Cómo estructurar tu aplicación de reacción.

Demasiado Largo; Para Leer

Companies Mentioned

Ven Korolyov

About Author

ETIQUETAS

Languages

ESTE ARTÍCULO FUE PRESENTADO EN...

HISTORIAS RELACIONADAS