Reglas para las diversas nomenclaturas del proyecto

Detallamos en el documento las reglas para nombrar los diversos elementos del proyecto.

• Nombres de Carpetas.
• Nombres de Archivos.
• Nombres de Funciones.
• Nombres de Componentes.
• Nombres de Clases en CSS.
• Nombres de Constantes para Styled Component.
• Nombres de Atributos de un componente.
• Nombres de Propiedades de un componente.

---

Nombres de Carpetas.

• Los nombres de las carpetas son en minúsculas.
• Cada palabra debe ser separada con un guion medio (-)

mi-nueva-carpeta

---

Estructura de nombre de los archivos del proyecto

• Los nombres de los archivos son en minúsculas.
• Cada palabra debe ser separada con un guion medio (-)

mi-nuevo-archivo.js

---

Nombres de Funciones.

• Los nombres de las funciones se escriben en camelCase.

function myFunction() {
...
}

const myFunction = () => {
...
}

---

Nombres de Componentes.

• Los nombres de los componentes se escriben en PascalCase.

export function MyComponent() {
...
}

export const MyComponent = () => {
...
}

import { MyComponent } from './example/index.js'

<MyComponent />

---

Nombres de Clases en CSS.

• Los nombres de las clases se escriben en camelCase.

<MyComponent className='myClassName'/>

---

Nombres de Constantes para Styled Component.

• Los nombres de las constantes se escriben en PascalCase.

const MyStyledComponent = styled.div`
  width: 100%;
  height: 100%px;
  padding: 16px 8px;
`;

<MyStyledComponent />

Nombres de Atributos de un componente.

• Los nombres de los atributos se escriben en minúsculas.
• Cada palabra debe ser separada con un guion medio (-)

<MyComponent my-attributes-one={false} my-attributes-two='false' />

---

• Los nombres de los atributos se escriben en camelCase.

<MyComponent myAttributesOne={false} myAttributesTwo='false' />

---

Nombres de Propiedades de un componente.

• Los nombres de las propiedades se escriben en minúsculas.

export function MyComponent(props) {
  
  return <h1>Hello, {props.name}</h1>;
}

export function MyComponent({ name }) {
  
  return <h1>Hello, {name}</h1>;
}

export const MyComponent = ( props ) => {

  return <h1>Hello, {props.name}</h1>;
}

export const MyComponent = ({ name }) => {

  return <h1>Hello, {name}</h1>;
}