10 лучших практик React для улучшения кода React

Сколько бы времени ни прошло и какие конкуренты не появлялись на рынке, React по-прежнему лидирует среди фреймворков. Итак, ознакомьтесь с нашими советами, дайте нам знать, если у вас есть еще вопросы, рекомендации или лучшие практики, которые могут быть приняты React или сообществом разработчиков. И не стесняйтесь нанимать разработчика React JS.

Что такое Реакт? Использование реакции

Поскольку для этого просто нужно базовое понимание HTML и JavaScript, React становится все более популярным среди компаний, занимающихся разработкой React, в качестве решения для веб-разработки. Одной из самых популярных интерфейсных библиотек JavaScript для создания веб-приложений является ReactJs. React был выбран среди других известных библиотек и фреймворков для создания сложных пользовательских интерфейсов примерно 8000 фирм по всему миру.

React.js — это фреймворк языка программирования JavaScript с открытым исходным кодом. С помощью этого фреймворка разработчики могут создавать пользовательские интерфейсы разного уровня сложности для одностраничных приложений. Вы можете использовать эту технологию для обработки уровня представления веб-приложений и мобильных приложений. React в настоящее время имеет самое большое сообщество среди всех других фреймворков. Воспользуйтесь преимуществами открытых библиотек данных и реагируйте на советы создателей, учитывающие лучшие мировые практики, чтобы сделать ваше взаимодействие с фреймворком максимально продуктивным.

React впервые был использован в ленте социальной сети Facebook в 2011 году. С помощью этой платформы разработчики могут создавать крупные веб-приложения и мобильные приложения с диаграммой архитектуры реакции и изменять данные без перезагрузки страницы. Это быстрый, простой и масштабируемый фреймворк. Используйте лучшие практики reactjs в сочетании с другими библиотеками для создания интересных приложений. Итак, мы переходим к лучшим практикам React JS .

Для написания значительно меньшего количества кода, чем, например, при использовании ванильного JavaScript при создании интерактивных пользовательских интерфейсов и веб-приложений. Создавая повторно используемые компоненты, которые вы можете представить как отдельные блоки Lego, вы разрабатываете свои приложения с помощью React. Компоненты в React представляют любое компонуемое поведение, включая состояние, жизненный цикл и рендеринг. Некоторые внешние библиотеки, такие как Relay , предоставляют компонентам дополнительные обязанности, такие как описание зависимостей данных. Ничего страшного, что эти концепции вернутся в React и в какой-то другой форме.

Реагировать на вызовы

Хотя React решает проблемы фронтенд-разработчиков при разработке интерфейсов для динамических веб-сайтов и SPA-приложений, существуют определенные проблемы React, с которыми каждый разработчик может столкнуться во время работы. Перерисовать классическую связку JavaScript и HTML внешне становится намного сложнее. React же не ограничивает возможности разработчика, в отличие от любых фреймворков.

Почему менеджеры многих компаний выбирают React, несмотря на то, что они часто плохо зарекомендовали себя в разработке? Они просто думают, что так будет проще найти разработчиков. Правильно, рынок труда для React огромен. В любом случае, инструменты должны подбираться конкретно под проект. В идеале выбор должны сделать сами разработчики. Если это React, отлично, все довольны.

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

Например, если вы работаете над одним проектом React, это означает одновременную работу над ОДНИМ проектом React. У каждого разработчика свое видение того, как писать код React и организовывать архитектуру приложения. И часто эти различия весьма существенны от разработчика к разработчику. Ниже вы также найдете больше практик для преодоления трудностей и улучшения работы.

Лучшие практики реагирования

Начнем с лучших практик компонентов React ? Давайте рассмотрим некоторые рекомендации по использованию этой платформы. Следуйте этим простым советам по программированию на React, чтобы сделать ваше приложение React конкурентоспособным и работать правильно. Наймите разработчиков ReactJS. Упомянутые нами практики являются успешными примерами того, как вы можете улучшить работу вашего проекта.

1. Делайте компоненты небольшими и функциональными

Каковы преимущества компонентов? Известно, что благодаря фреймворку React можно получить огромные компоненты, помогающие выполнять сразу несколько задач. Но лучший способ проектирования компонентов — это, конечно же, сделать их простыми и небольшими. Таким образом, вы можете предоставить один компонент для выполнения только одной функции. Если один компонент может отображать определенную часть страницы приложения или изменять ее поведение, вы хорошо справились со своей задачей проектирования.

Компоненты чаще всего полностью автономны. Это значительно упрощает обслуживание и тестирование на разных этапах разработки. Также важно, чтобы разработчики повторно использовали каждый компонент во многих проектах одновременно. Вы можете позаимствовать компоненты, которые выполняют общие функции, с форумов разработчиков JS сообщества. Помните, что чем меньше компонент, тем проще оптимизировать производительность и процесс обновления.

Например, мы можем вынести эту функцию в отдельный файл:

функция экспорта capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1); }

А затем импортируйте его в компонент:

импортировать {capitalizeFirstLetter} из './stringlib';

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

2. Поместите CSS в JavaScript

На первом этапе разработки проекта принято хранить все стили CSS в одном файле SCSS. Внедрив глобальный префикс, вы можете предотвратить все возможные конфликты имен. Тем не менее, есть случаи, когда это решение не подходит — например, масштабирование проекта. Чтобы разработать лучший и наиболее подходящий код для крупномасштабных веб-приложений, мы часто корректируем:

//Box.jsx
 import React from “react”;
 import “./box.css”;const Box = () => <div className=”box-text”>Wesionary Team</div>;
 export default Box;//Box.css
 .box-text {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100px;
 width: 100px;
 background-color: rgb(206, 65, 65);
 border: 2px solid rgb(0, 0, 0);
 }

Создание стиля и темы может быть очень сложной задачей при разработке крупных проектов. Однако поддержка этих больших файлов SCSS также непростая задача. Именно поэтому появилась концепция решений CSS-in-JS. На этой концепции основаны такие библиотеки: EmotionJS, Styled Components, Glamorous.

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

3. Используйте линтер

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

Например: во время настройки используйте yarn create react-app react-linting или npx create-react-app react-linting, чтобы создать приложение React для начала работы. Мы должны расширить стандартную конфигурацию Build React App, которая уже включает некоторые необходимые пакеты ESLint.

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

4.Комментируйте только там, где это необходимо

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

Например:

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

5. Используйте заглавные буквы в названиях компонентов

Если вы используете JSX для разработки, все имена новых компонентов должны начинаться с заглавных букв. Это необходимо для того, чтобы JSX мог идентифицировать и обрабатывать их иначе, чем теги HTML по умолчанию.

Вот пример, который обеспечивает правильный вывод с использованием заглавных букв:

import React, { Component } from “react”;
 import ReactDOM from “react-dom”; Класс Button расширяет компонент {

    оказывать() {

        return <button className="App-button">Эй!</button>;

    }

}

ReactDOM.render(<Button />;, document.getElementById("root"));

  

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

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

6. Отделите аспекты состояния от рендеринга

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

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

Одна из лучших передовых практик React — отделить структуру и логику загрузки внешних данных с сохранением состояния от логики рендеринга без сохранения состояния. В этом случае лучше иметь несколько или один компонент с отслеживанием состояния для загрузки данных и отдельный компонент без состояния для отображения этой информации. Это значительно снижает сложность компонентов.

Более поздние версии React имеют расширенную функцию под названием React Hooks, которая дает вам возможность создавать компоненты для функций отслеживания состояния. В результате это позволяет устранить необходимость в компонентах на основе классов.

Допустим, ваш проект получает информацию во время рендеринга. Вам нужно управлять информацией в основном компоненте, а затем передавать сложную задачу рендеринга подкомпоненту в виде свойств.

7. Код должен быть тестируемым

Код, который вы пишете как часть своего проекта, можно легко протестировать и проверить. Помните об этом простом правиле при написании кода. Кстати, вот одна из лучших практик реагирования . Дайте тестовым файлам то же имя, что и исходный файл, добавив суффикс «.test». Разработчикам будет намного проще находить файлы, которые уже были проверены ранее.

Используйте такие приложения, как Cypress.io или JEST, чтобы протестировать свой код React. Код вашего проекта должен вести себя правильно и легко и быстро тестироваться тестировщиками. Если ваш код сложно протестировать, у вас возникнут проблемы с другими этапами разработки проекта.

8.Все файлы, относящиеся к любому компоненту, должны находиться в одной папке.

Очевидный, но важный совет: все файлы, принадлежащие одному и тому же компоненту, следует хранить в одной папке. Это также относится к файлам в стиле кода. Таким образом, каждая папка компонента должна включать группу соответствующих ей файлов. Он поддерживает согласованность иерархии во всей кодовой базе. Component.js, Component.css и Component.test.js являются обязательными файлами в структуре каталогов вашего приложения:

└── /src
 ├── /assets – Contains static assets such as images, svgs, company logo etc.
 ├── /components – reusable components like navigation bar, buttons, forms
 ├── /services – JavaSript modules
 ├── /store – redux store
 ├── /utils – utilities, helpers, constants.
 ├── /views/pages – majority of the app pages would be here
 ├── index.js
 └── App.js

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

Одна папка должна содержать стили CSS, изображения, тесты и другие подкомпоненты, относящиеся к конкретному компоненту. Если вы кратко назовете файлы и логично разместите похожие и связанные файлы вместе, вам будет легче найти их позже, если потребуется.

9. Используйте defaultProps и propTypes

По мере роста вашего проекта вы можете заметить несколько ошибок с проверкой типов. Для конкретных проектов вы можете использовать приложения JavaScript, такие как Flow или TypeScript. Однако React по-прежнему имеет базовые возможности проверки типов, если вы их не используете. Чтобы инициировать проверку типов для реквизитов компонентов, вы можете назначить специальное свойство propTypes, которое вы найдете в лучших практиках служб React благодаря большому сообществу пользователей этой платформы. Пример из сообщества GitHub:

type Props = {
 size: number,
 value: Point,
 active: boolean,
 onClick?: (value: Point) => void,
 arrowDirection?: 'left' | 'top-left' | 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left',
 }; экспортировать класс по умолчанию ImageFocusPointCell extends React.PureComponent<Props>; {

    статический defaultProps = {

        активно: ложь,

        показатьстрелку: правда,

    };

// другой код не важен для этого правила

}

  

10. Поддержание чистоты кода

Последовательный подход к программированию, известный как «чистый код», упрощает написание, чтение и обслуживание вашего кода. Разработчик часто какое-то время работает над проблемой, прежде чем отправить запрос на вытягивание, как только она будет решена. Я утверждаю, что просто потому, что ваш код «работает», вы еще не закончили. Это ваше время, чтобы навести порядок, удалив любой закомментированный код, удалив код-зомби и реструктуризировав его. например:

// Dirty
 const MyComponent =() =>(
 <div>
 <OtherComponent type=”a” className=”colorful” foo={123} bar={456} />
 <OtherComponent type=”b” className=”colorful” foo={123} bar={456} />
 </div>;
 );

// Clean
 const MyOtherComponent = ({ type }) => (
 <OtherComponent type={type} className=”colorful” foo={123} bar={456} />
 );
 const MyComponent = () => (
 <div>
 <MyOtherComponent type=”a” />
 <MyOtherComponent type=”b” />
 </div>
 );

Стандарты и сложность

Ключевым моментом в React является использование философии DRY (не повторяйтесь). Поместите все свои файлы CSS в одну общую папку. По возможности избегайте использования встроенного CSS (класс CSS должен быть создан, если имеется более двух атрибутов CSS). Упростите просмотр кода с помощью линтера.

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

Является ли React сложной системой? К счастью, React прост в освоении, но только после того, как вы хорошо разберетесь в JavaScript. Конечно, у всех разное представление о том, что сложно при изучении чего-то нового. Независимо от вашего уровня опыта, существует множество доступных ресурсов, которые упростят изучение React.

Итак, React не дает никаких гарантий качества. Это позволяет слишком много нести ответственность за что-либо, а значит, у каждого разработчика есть большие возможности навредить проекту. И чем больше команда, тем сложнее ситуация. Чем больше сложность, тем быстрее она увеличивается, тем скорее все запутается и станет кошмаром как для пользователей, так и для программистов. Так что будьте осторожны с этим.

Библиотека против фреймворка

Есть смысл, что React нельзя использовать нигде, кроме как в приложении React. Всем известно, что React — это библиотека, а не фреймворк. Тот же jQuery можно без проблем использовать и с React dataflow, и с Angular, и с Vanilla JS, и с чем угодно. С другой стороны, три означает, что Angular — это полноценный фреймворк, который сам по себе является приложением. Он дает вам все, что вам нужно, и направляет каждое ваше движение. Библиотека JavaScript для создания пользовательских интерфейсов находится под рукой. Он позволяет собрать сложный пользовательский интерфейс из небольших изолированных фрагментов кода, называемых «компонентами». React предоставляет два синтаксиса для создания компонентов: класс и функция.

Однако помимо самой библиотеки специалист должен владеть такими технологиями, как HTML, CSS, JavaScript, npm, Git, Babel, WebPack, Redux. Также могут пригодиться навыки работы с другими инструментами, но это уже зависит от проекта.

«Техническое» различие между библиотекой JavaScript (например, React) и фреймворком (например, Angular или Vue.js) заключается в том, что фреймворк диктует, как разработчик создает приложение, тогда как библиотека состоит из функций, которые приложение может вызывать для выполнения. выполнить задание. Код приложения вызывается фреймворком.

Балансируя между библиотекой и фреймворком, React стремится быть и тем, и другим одновременно. С одной стороны, в базовом пакете есть библиотечные функции, в которые можно добавить все, что угодно. С другой стороны, вы не можете превратить их во что-либо, кроме приложения React. Вы застряли в системе и теперь используете React в качестве фреймворка.