TheLazy.Dev
Portfolio GitHub

Blog

javascript |react |redux |testing

Orden de las carpetas en React

jocadev

Johnny C

Posted on November 5, 2020

Orden de las carpetas en React

La idea de tener un orden en las carpetas siempre nos trae de cabeza, por ello propongo el uso de esta estructura en base a los diferentes proyectos que tenemos. Siempre que se pueda, la idea es que cada fichero tenga su .test y su index.js

Fichero/
  index.js
  Fichero.js
  Fichero.test.js
Enter fullscreen mode Exit fullscreen mode

De esta forma, podríamos tener cada uno de los con sus respectivos test y sus principales dependencias. Por ejemplo, si es un componente, que este tenga su .scss o su contenedor .container.js en caso de que se requiera conectar al redux.

Los nuevos containers serán componentes

Con esto, lo que conseguiremos, es separar el conectar con el redux en un HOC. Allí es dónde podemos tratar los datos que vienen del Redux en caso de ser necesario.

Fichero/
  index.js
  Fichero.js
  Fichero.test.js
  Fichero.scss
  Fichero.container.js
Enter fullscreen mode Exit fullscreen mode

Un ejemplo del fichero de container, puede ser:

import { connect } from 'react-redux';
import Fichero from './Fichero';
import { FicheroAction } from './store/actions/academy.actions';

const FicheroContainer = ({name, surname}) => {
  const nameLowerCase = name.toLowerCase()
  const surnameLowerCase = surname.toLowerCase()

  return (
    <Fichero 
      name={nameLowerCase}
      surname={surnameLowerCase}
    />
  )
}

const mapStateToProps = ({  data }) => {
  const user = data.user ;
  return user;
};

const mapDispatchToProps = dispatch => ({
  getData: data => dispatch(FicheroAction(data)),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Fichero);
Enter fullscreen mode Exit fullscreen mode

Esto nos permitiría conectar el componente y separar las props de redux, mientras que las otras props del componente estarían en el fichero del mismo. Ya que hemos tocado el tema de redux, la propuesta para la organización de las carpetas sería la siguiente:

Dado el caso de que todas las peticiones se hagan mediante las actions, es conveniente que se metan los servicios dentro de la carpeta store/ o redux/ quedando de esta forma:

store/
  actions/
  reducers/
  services/
Enter fullscreen mode Exit fullscreen mode

En caso de que se gestionen las peticiones dentro de redux, veo conveniente hacer una carpeta aparte para los services\, ya que en esta carpeta es donde se efectuarán las llamadas a las api's.

store/
  actions/
  reducers/
  services/
    user/
      index.js
      user.js
      user.test.js
    ...
Enter fullscreen mode Exit fullscreen mode

Tanto para los actions como para los reducers, sería recomendable tener la misma estructura de las carpetas

store/
  actions/
    user/
      user.actions.js
      user.actions.test.js
      index.js
    ...
  reducers/
    user/
      user.reducers.js
      user.reducers.test.js
      index.js
    ...
  services/
    user/
      index.js
      user.js
      user.test.js
    ...
Enter fullscreen mode Exit fullscreen mode

Estructura de las carpetas

La estructura planteada para las carpetas, sería algo como esto:

components/
  Avatar/
    index.js
    Avatar.js
    Avatar.test.js
    Avatar.scss
  login/
    index.js
    login.js
    login.test.js
    login.scss
    login.container.js
  Button/
    index.js
    Button.js
    Button.test.js
    Button.scss
  ...
config/
  configureStore.js
  i18n.js
  icons.js
  ...
hooks/
  useCallback/
    index.js
    useCallback.js
    useCallback.test.js
  useScroll/
    index.js
    useScroll.js
    useScroll.test.js
  ...
routes/
  index.js
  routes.js
store/
  actions/
    user/
      user.actions.js
      user.actions.test.js
      index.js
    ...
  reducers/
    user/
      user.reducers.js
      user.reducers.test.js
      index.js
    ...
  services/
    user/
      index.js
      user.js
      user.test.js
    ...
utils/
  flatObject/
    index.js
    flatObject.js
    flatObject.test.j
  getLocation/
    index.js
    getLocation.js
    getLocation.test.js
  ...
Enter fullscreen mode Exit fullscreen mode

Teniendo en cuenta esto, las carpetas de containers o views dejarían de existir, pero nos surge una duda
¿cómo podemos evitar tener tanta lógica en los componentes de este tipo de componentes?
La respuesta es simple, separando más los componentes.

Para esto, propongo plantear la norma de una única responsabilidad. Es decir, tengo un componente que tiene que estar conectado a redux, tambien tiene que hacer llamadas a la api y debe tener lógica para que se pinte de una forma u otra.

Un caso de uso puede ser una lista, que dependiendo del tipo de usuario. se debe qué renderizar de una forma u otra y si se hace click en un elemento de la lista, debe hacer una request.

Para este caso, la estructura con su separación sería algo como:

components/
  *** Conectamos el redux con las listas
  Lists/
    index.js
    Lists.js
    Lists.test.js
    Lists.scss
    Lists.container.js
  *** La lista de tipo usuario
  ListUser/
    index.js
    ListUser.js
    ListUser.test.js
    ListUser.scss
  *** La lista de tipo admin
  ListAdmin/
    index.js
    ListAdmin.js
    ListAdmin.test.js
    ListAdmin.scss
  *** El ítem lista y sería en el que se haga la llamada a la api
  ListItem/
    index.js
    ListItem.js
    ListItem.test.js
    ListItem.scss
  ...
Enter fullscreen mode Exit fullscreen mode

Rutas relativas + nombresDeComponentesLargos

Esto hace que a veces, llegar a detectar en qué carpeta esta ese componente, sea caótico. Pero, ¿se pueden importar de rutas absolutas? La respuesta es SI gracias a jsconfig.json en la raíz del proyecto.

{
  "compilerOptions": {
    "baseUrl": ".",
  }
}
Enter fullscreen mode Exit fullscreen mode

Y, a partir de este momento, ya puedes importar tus componentes de manera absoluta

import Button from 'components/Button';
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
jocadev
Johnny C

Posted on November 5, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Orden de las carpetas en React
javascript Orden de las carpetas en React

November 5, 2020