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