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

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

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

JavaMentor
JavaMentor

Рассмотрим шесть простых советов, которые помогут добиться чистого кода на 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.

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

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


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

Предыдущая статьяДизайн-система: иконки
Следующая статья3 способа локального хранения и чтения учетных данных в Python