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.