Стандарт кодирования

Когда дело доходит до стандартов кодирования для React Native, важно следовать передовым методам, чтобы обеспечить удобочитаемость, ремонтопригодность и согласованность кода в рамках вашего проекта. Пока нет официального стандарта кодирования для React Native. Но вы можете принять общепринятые соглашения и рекомендации. Вот несколько рекомендаций:

Основные правила

  • Всегда используйте const или let для объявления переменных. Используйте const по умолчанию, если переменная не нуждается в переназначении.
  • Всегда используйте функциональный компонент.
  • Нет вложенных компонентов или getComponent внутри метода рендеринга. Всегда старайтесь разделить компоненты, если это возможно!

Именование

  • PascalCase: это наиболее распространенное соглашение об именах для компонентов React Native. При этом первая буква каждого слова в имени делается заглавной.
  • camelCase: это соглашение об именах менее распространено, чем PascalCase, но все же иногда используется. Он включает в себя заглавную первую букву первого слова в имени, а затем заглавную первую букву каждого последующего слова.
  • CONSTANT_CASE: это соглашение об именах используется для определения глобальных констант и перечислений.

Пример:

// CONSTANT_CASE
const PRIMARY_COLOR = '#FF0000';
const FONT_SIZE_LARGE = 18;
const API_ENDPOINT = 'https://api.example.com';

// PascalCase & camelCase
interface PascalCase {
  camelCase: string;
}

Система типов

  • Всегда следует определять тип как возможное. any тип ограничен в любом случае.

Интерфейс (TypeScript)

Интерфейс — это способ определить форму или структуру объекта.

Пример:

interface Person {
  name: string;
  age: number;
}

Преимущества использования интерфейсов в TypeScript:

Безопасность типов: интерфейсы помогают обеспечить безопасность типов кода TypeScript. Это означает, что вы можете быть уверены, что объекты имеют правильный тип и что методы вызываются с правильными параметрами.

Повторное использование: интерфейсы можно использовать для повторного использования кода. Определив структуру объекта в интерфейсе, вы можете повторно использовать эту структуру в нескольких классах.

Ясность: интерфейсы могут помочь улучшить ясность вашего кода. Определив структуру объекта в интерфейсе, вы можете упростить понимание того, как используются объекты.

Исходная организация

Импорт

  • По возможности используйте абсолютный путь.
  • Использовать относительный путь при обращении к файлам в одном и том же расположении

Экспорт

  • Предпочитайте использование области файлов для пространства имен, а также именованного экспорта.
  • Используйте то же имя при импорте модуля по умолчанию.

Стили

  • Максимально используйте базовые стили.
const baseStyle = StyleSheet.create({
  flex: {
    flex: 1,
  },
  justifyContentCenter: {
    justifyContent: 'center',
  },
  centralize: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  p4: {
    padding: 4,
  },
  m8: {
    margin: 8,
  },
});
  • Всегда создавайте отдельные файлы стилей при создании нового компонента.
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;
  • Не используйте встроенные стили. Всегда используйте StyleSheet для создания объекта стилей.
// No inline style
<Text style={{ fontSize: 16, color: 'red' }}>Hello, React Native!</Text>

Последовательность

  • Рассмотрите возможность использования arrow function при объявлении функции вместо традиционной функции.
  • Функции стрелок можно использовать для различных целей, включая обработчики событий, функциональные компоненты и многое другое.

Пример:

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

// functional components
const MyComponent = () => {
  return <Text>Hello, React Native!</Text>;
};

API хуков

  • использоватьобратный вызов
  • useMemo
  • Следует использовать, когда необходимо запомнить предыдущую функцию/значение.
  • Используйте его, только если объявление функции/значения имеет зависимость изменено.

Пример:

// 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} />
}

Селекторы

  • Попробуйте использовать селектор для выбора значения в состоянии сокращения.

Пример:

function TodoList() {
  // This anonymous arrow function is a selector!
  const todos = useSelector(state => state.todos)
}

Структура папок

  • src: Эта папка является основным контейнером всего кода вашего приложения.
  • components: папка для хранения любых общих компонентов, которые вы используете в своем приложении (например, общая кнопка).
  • screens: Папка, содержащая все экраны/функции вашего приложения.
  • navigations: Папка для хранения навигаторов.
  • services: Папка для хранения всех общих служб, используемых в приложении.
  • utils: Папка для хранения любых общих функций, таких как вычисление радиуса, различные функции форматирования даты и константы.
  • types: Папка для хранения всех перечислений и интерфейсов, используемых в приложении.
  • redux: Папка для хранения действий, редукторов и редуктов.
  • App.js: Основной компонент, запускающий все ваше приложение.
  • index.js: Точка входа вашего приложения в соответствии со стандартами React-Native.
  • assets: Папка активов для хранения всех изображений, векторов, шрифтов и т. д.

Измените файлы переменных среды в корневой папке (.env)

Пример:

Заключение

Следование единым стандартам кодирования и передовым методам разработки React Native может значительно улучшить качество кода, удобство сопровождения и сотрудничество между разработчиками. Используя методы, упомянутые в этом блоге, вы сможете создавать масштабируемые и надежные приложения React Native.

Надеюсь, что этот пост в блоге содержит полезное руководство, которое поможет вам установить стандарты кодирования и структуру проекта для ваших проектов React Native.