React Native: mejores prácticas de codificación – Josh Software

ESTÁNDAR DE CODIFICACIÓN

Cuando se trata de estándares de codificación para React Native, es importante seguir las mejores prácticas para garantizar la legibilidad, el mantenimiento y la coherencia del código dentro de su proyecto. Si bien no existen estándares de codificación oficiales para React Native. Pero puede adoptar convenciones y directrices ampliamente aceptadas.

Aquí hay algunas recomendaciones:

REGLAS BÁSICAS
  1. Siempre usa const o let para declarar variables. Usar const de forma predeterminada, a menos que sea necesario reasignar una variable.
  2. Utilice siempre componentes funcionales.
  3. No hay componentes anidados ni getComponent dentro del método de renderizado. ¡Intente siempre separar los componentes si es posible!
NOMBRE
  1. PascalCase: esta es la convención de nomenclatura más común para los componentes de React Native. Implica poner en mayúscula la primera letra de cada palabra del nombre.
  2. camelCase: esta convención de nomenclatura es menos común que PascalCase, pero todavía se usa a veces. Implica poner en mayúscula la primera letra de la primera palabra del nombre y luego poner en mayúscula la primera letra de cada palabra posterior.
  3. CONSTANT_CASE: esta convención de nomenclatura se utiliza para definir enumeraciones y constantes globales.

Ejemplo:

// CONSTANT_CASE

const PRIMARY_COLOR = '#FF0000';

const FONT_SIZE_LARGE = 18;

const API_ENDPOINT = 'https://api.example.com';

// PascalCase & camelCase

interface Employee {

  fullName: string;

  employeeId: string;

}

TIPO DE SISTEMA

Siempre se debe definir el tipo como sea posible. any El tipo está restringido en cualquier caso.

INTERFAZ (MEcanografiado)

La interfaz es una forma de definir la forma o estructura de un objeto.

Ejemplo:

interface Person {

  name: string;

  age: number;

}

Beneficios de usar interfaces en TypeScript:

Tipo de seguridad: Las interfaces ayudan a garantizar la seguridad de tipos del código TypeScript. Esto significa que puede estar seguro de que los objetos son del tipo correcto y que los métodos se llaman con los parámetros correctos.

Reutilizabilidad: Se pueden utilizar interfaces para hacer que el código sea más reutilizable. Al definir la estructura de un objeto en una interfaz, puede reutilizar esa estructura en varias clases.

Claridad: Las interfaces pueden ayudar a mejorar la claridad de su código. Al definir la estructura de un objeto en una interfaz, puede facilitar la comprensión de cómo se utilizan los objetos.

ORGANIZACIÓN FUENTE
IMPORTACIONES
  1. Utilice la ruta absoluta tanto como sea posible.
  2. Utilice la ruta relativa cuando haga referencia a archivos dentro de las mismas ubicaciones

EXPORTACIONES

  1. Prefiere el uso del alcance del archivo para el espacio de nombres, así como para las exportaciones con nombre.
  2. Utilice el mismo nombre al importar un módulo predeterminado.

ESTILOS

Utilice estilos base tanto como sea posible.

const baseStyle = StyleSheet.create({

  flex: {

    flex: 1,

  },

  justifyContentCenter: {

    justifyContent: 'center',

  },

  centralize: {

    justifyContent: 'center',

    alignItems: 'center',

  },

  p4: {

    padding: 4,

  },

  m8: {

    margin: 8,

  },

});


Cree siempre archivos de estilo separados al crear un nuevo componente.

Ejemplo:

const styles = StyleSheet.create({

  width: {

    width: 16

  },

  height: {

    height: 16,

  },

  successMessage: {

    fontFamily: 'Inter-Medium',

    color: 'green'

  },

  errorMessage: {

    fontFamily: 'Inter-Regular',

    color: 'red'

  },

  textAlignCenter: {

    textAlign: 'center',

  },

});

export default styles;

No utilices estilos en línea. Siempre usa StyleSheet para crear un objeto de estilos.

// Bad: No inline style
<Text style={{ fontSize: 16, color: 'red' }}>Hello, React Native!</Text>

// Good

<Text style={styles.successMessage}>Hello, React Native!</Text>
CONSISTENCIA
  1. Considere usar el arrow function al declarar una función en lugar de una función tradicional.
  2. Puede utilizar funciones de flecha para diversos fines, incluidos controladores de eventos, componentes funcionales y más.

Ejemplo:

// Event Handlers

<Button onPress={() => console.log('Button clicked!')} title="Click me" />

// functional components

const MyComponent = () => {

  return <Text>Hello, React Native!</Text>;

};
API DE GANCHOS
  1. useCallback/useMemo Debe usarse cuando sea necesario memorizar la función/valor anterior.
  2. Úselo solo cuando se cambie la función/valor declarado tiene dependencia.

Ejemplo: usar devolución de llamada

// Bad

const FooComponent = () => {

  const onPress = () => {

    // onPress is newly created in every render instead of reusing the previous one

  };

  return <Bar onPress={onPress} />

} 

// Good

const FooComponent = ({a, b}) => {

  const onPress = useCallback(() => {

    // onPress is reused if a & b don't change.

  },[a, b]); 

  return <Bar onPress={onPress} />

}

Ejemplo: usar devolución de llamada

// Bad

 const calculation = expensiveCalculation(count);

// Good

const calculation = useMemo(() => expensiveCalculation(count), [count]);

const expensiveCalculation = (num) => {

  for (let i = 0; i < 1000000000; i++) {

    num += 1;

  }

  return num;

};
SELECTORES

Intente utilizar el selector para elegir un valor en el estado redux.

Ejemplo:

function TodoList() {

  // This anonymous arrow function is a selector!

  const todos = useSelector(state => state.todos)

}


ESTRUCTURA DE CARPETA

src: This folder is the main container of all the code inside your application.
components: Folder to store any common component that you use through your app (such as a generic button)
screens: Folder that contains all your application screens/features.
navigations: Folder to store the navigators.
services: Folder to store all common services used in the application.
utils: Folder to store any common function such as calculate radius, different date formatting functions and constants.
types: Folder to store all enum and interface used in application.
redux: Folder to store action, reducer and redux store.
App.js: Main component that starts your whole app.
index.js: Entry point of your application as per React-Native standards.
assets: Asset folder to store all images, vectors, fonts, etc.


Create and manage the environment variables files in root folder (.env)

Ejemplo:

- src

  - components

    - Button.js

    - Text.js

  - screens

    - HomeScreen.js

    - ProfileScreen.js

  - navigations

    - AppNavigator.js

    - TabNavigator.js

  - services

    - api.js

    - http.js

  - utils

    - helpers.js

    - constants.js

  - types

    - enums

      - userStatus.js

    - interfaces

      - userData.ts

  - redux

    - action.js

    - store.js

    - reducer.js

  - App.js

  - index.js

- assets

  - images

    - png

      - logo.png

    - svg

      - logo.svg

  - fonts

    - Roboto-Regular.ttf

RESUMEN

Seguir estándares de codificación consistentes y las mejores prácticas en el desarrollo de React Native puede mejorar en gran medida la calidad del código, la capacidad de mantenimiento y la colaboración entre los desarrolladores.

Espero que esta publicación de blog proporcione una guía útil para ayudarlo a establecer estándares de codificación y estructura de proyecto para sus proyectos de React Native.


Source link

About David Lopez

Informático y experto en redes. Redactor en varios blogs tecnológicos desde hace 4 años y ahora en Steamachine.net

Check Also

ServiceNow, Hugging Face y NVIDIA lanzan nuevos LLM abiertos para desarrolladores

ServiceNow, Hugging Face y NVIDIA se han asociado para lanzar una nueva familia de LLM …

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *