Estructura de archivos

Antes de empezar a crear archivos regados con funcionalidades definidas pero sin organización, es necesario detenerse a pensar, en base al resultado final esperado (ya sea una maqueta, un figma o un diseño que queremos), cómo va a estructurarse la aplicación.

Existen para esto diferentes paradigmas, por ejemplo organizar el código por funcionalidades, por tipos de componentes, por aplicaciones si el proyecto es grande, etc.

Para nuestra aplicación web, el flujo que queremos se ordenaría de la siguiente manera:

1. Primero tenemos una APP. Esta envuelve y contiene todo.
2. Después tenemos páginas, estas rutas nos llevan a las vistas principales de nuestra aplicación como son las órdenes, la cuenta o la página de productos.
3. Luego tenemos componentes. Cada página contiene uno o más componentes que serán nuestros bloques de construcción.

Ya en la estructura de archivos creada en nuestro editor de código, en mi caso Visual Studio code tenemos lo siguiente:

La puerta de entrada de cada componente será un archivo index.jsx y adentro de este tendremos como base un React Functional Export Component. Si tenemos descargada la extensión:

Podemos crear componentes fácilmente escribiendo al inicio del archivo vacío: rfce y tab para que se autocomplete y por ahora solo cambiamos el nombre: