6 актуальных советов по созданию чистого кода React

Создание чистого кода  —  одна из важнейших задач при разработке любого программного обеспечения. Большинство крупных компаний стараются создавать ПО с наиболее чистым и производительным кодом, с которым будет легко работать в дальнейшем. За чистотой кода необходимо следить и самим разработчикам, чтобы не пришлось тратить много времени на рефакторинг и добавление новых функций.

Если вы используете React в качестве библиотеки JavaScript для создания пользовательских интерфейсов, то вам стоит обратить внимание на правила, позволяющие сделать код чище и понятнее. Это повысить вашу востребованность как специалиста.

Рассмотрим шесть простых советов, которые помогут добиться чистого кода на React.

1. Создание отдельного файла для каждого компонента

Многие разработчики помещают несколько компонентов непосредственно в компонент App. Это плохая методика, потому что каждый из них имеет собственный пользовательский интерфейс и функциональность. Совместная обработка всех компонентов в одном файле затрудняет чтение кода.

Именно поэтому следует создать отдельные файлы для каждого компонента приложения и отображать их в App. Например, если с помощью React вам нужно создать простую целевую страницу, то распределите компоненты (навигационная панель, раздел About, нижний колонтитул страницы и т. д.) по отдельным файлам.

В результате код приложения получится гораздо более читабельным и удобным для управления. Кроме того, это позволит повторно использовать компоненты в других частях приложения.

Вот пример.

//src/App.js

import Navbar from './components/Navbar.js';
import About from './components/About.js';
import Footer from './components/Footer.js';

export default function App() {
  return (
    <>
      <Navbar />
      <About />
      <Footer />

    </>
  );
}

Как видите, компоненты можно отображать в любом месте приложения. Нужно лишь создать для них отдельные файлы.

Отдельный файл для компонента navbar:

 //src/components/Navbar.js

export default function Navbar() {
  return (
    <nav>
      <h1>Example</h1>
    </nav>
  );
}

Отдельный файл для компонента about:

//src/components/About.js

export default function About() {
  return (
    <div>
      <h2>About Me.</h2>
    </div>
  );
}

Отдельный файл для компонента footer:

//src/components/Footer.js

export default function Footer() {
  return (
    <footer>
      <h3>This is a footer.</h3>
    </footer>
  );
}

Как видно из приведенных выше примеров, создание папки с названием components, в которую помещаются отдельные файлы, позволяет упростить работу с кодом.

2. Сокращайте JavaScript в JSX

Как известно, внутри кода JSX в React мы можем написать столько JavaScript, сколько захотим. Но такое решение может снизить читаемость, потому что это будет смесь JavaScript и JSX. Вот почему стоит всегда сокращать объем кода JavaScript внутри JSX.

Вот пример плохой реализации:

import React,{ useState } from 'react';

export default function Form() {
  const [firstName, setFirstName] = useState('');

return (
    <form>
      <input value={firstName} onChange={event => {
          setFirstName(event.target.value);
          console.log(event.target.value, 'changed!');
        }}/>
    </form>
  );
}

А это хорошее решение:

import React,{ useState } from 'react';

export default function Form() {
  const [firstName, setFirstName] = useState('');

  const handleSubmit = (e) => {
   setFirstName(e.target.value);
   console.log(e.target.value, 'changed!');
  }

return (
    <form>
      <input value={firstName} onChange={handleSubmit}/>
    </form>
  );
}

Очевидно, что код во втором примере выглядит намного чище и читабельнее по сравнению с первым вариантом. Поэтому всегда сокращайте JavaScript в JSX, создавая отдельные функции JavaScript, особенно в обработчиках событий DOM.

3. Всегда используйте деструктурирование

Деструктурирование  —  одна из примечательных особенностей JavaScript ES6. Она позволяет деструктурировать объекты и массивы, чтобы упростить синтаксис. В результате код становится более чистым и читаемым.

Иногда можно даже передавать объекты в качестве пропсов. Получить доступ к такому объекту может быть непросто, особенно если он содержит много вложенных свойств. Вот пара примеров.

Плохая реализация:

const Person = props => {

  return (
    <>
      <h2>Name: {props.person.name}</h2>
      <p>Age: {props.person.age}</p>
      <p>Profession: {props.person.profession} </p>
      <p>Hobby: {props.person.hobby}</p>
    </>
  );
};

Хорошее решение:

const Person = props => {
  const { name, age, profession, hobby } = props.person;

  return (
    <>
      <h2>Name: {name}</h2>
      <p>Age: {age}</p>
      <p>Profession: {profession} </p>
      <p>Hobby: {hobby}</p>
    </>
  );
};

В улучшенном решении можно даже деструктировать объект внутри параметров, как показано в следующем примере:

const Person = ({person: { name, age, profession, hobby} })=> {

return (
    <>
      <h2>Name: {name}</h2>
      <p>Age: {age}</p>
      <p>Profession: {profession} </p>
      <p>Hobby: {hobby}</p>
    </>
  );
};

Очевидно, что последние два примера более читабельные. Так что деструктурирование  —  хороший способ для сокращения и очищения кода JSX. Постарайтесь использовать его как можно чаще.

4. Условный рендеринг

Есть разные варианты применения условного рендеринга в React. Можно использовать тернарный оператор, операторы IF и short-circuiting. Но следует понимать, в каких ситуациях каждый из них стоит использовать.

Например, для одного условия всегда лучше использовать short-circuiting. Но если нужен рендеринг на основе двух разных условий, гораздо компактнее будет код с тернарным оператором.

• Для одного условия.

Плохая реализация:

// Тернарный оператор

{showModal ? <h1>Modal was opened</h1> : null}

Хорошее решение:

// short-circuiting

{showModal && <h1>Modal was opened</h1>}

• Для двух условий.

Плохая реализация:

// short-circuiting

{showModal && <h1>Modal was opened</h1>}
{!showModal && <h1>Modal was closed</h1>}

Хорошее решение:

// Тернарный оператор

{showModal ? <h1>Modal was opened</h1> : <h1>Modal was closed</h1>}

5. Написание пропсов

С написанием пропсов также часто возникают проблемы. Например, записать пропс со значением true можно двумя способами.

Плохая реализация:

export default function App() {
  return (
    <>
      <Navbar text={true} />

   </>
  );
}

Хорошее решение:

export default function App() {
  return (
    <>
      <Navbar text />
   </>
  );
}

Как видите, если передавать пропс без значения, он становится true (истинным) по умолчанию. Таким образом, не нужно будет устанавливать для него значение true следующим образом: text = {true}.

В другой ситуации, когда есть строка пропсов, их можно передать в виде строки без фигурных скобок. Вот примеры кода.

Плохая реализация:

export default function App() {
  return (
    <>
      <Navbar text={"hello"} />

</>
  );
}

Хорошее решение:

export default function App() {
  return (
    <>
      <Navbar text="hello" />
   </>
  );
}

6. Используйте Prettier и ESLint

Еще один совет по написанию чистого кода предполагает использование расширения VSCode Prettier и ESLint.

• Prettier  —  очень полезное расширение, которое хорошо форматирует код и делает его более понятным.
• ESLint  —  еще одно хорошее расширение, которое помогает находить ошибки и предоставляет рекомендации по оформлению.

Заключение

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

Читайте также:

• Совместное использование компонентов React с различными библиотеками управления состоянием
• Что выбрать: React Native, Flutter или нативный подход
• React Query - залог эффективных запросов

Читайте нас в Telegram, VK и Яндекс.Дзен

---

Перевод статьи Mehdi Aoussiad: 6 Important Tips to Write Clean React Code