Реагируйте на лучшие практики, чтобы улучшить свою игру в 2022 году

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

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

Также необходимо понимать определенные соглашения, которые позволят вам писать чистый код React. Это не только поможет вам лучше обслуживать своих пользователей, но и облегчит вам и другим разработчикам, работающим над проектом, поддержку базы кода. Работаете над своим следующим проектом React? Умение писать чистый код React меняет правила игры. Начните здесь ️ Нажмите, чтобы твитнуть

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

Давайте начнем!

Проблемы, с которыми сталкиваются разработчики React

В этом разделе мы обсудим некоторые из основных проблем, с которыми сталкиваются разработчики React во время и после создания веб-приложений.

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

Мы начнем с самой основной проблемы, которая затрагивает новичков.

Предпосылки для реагирования

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

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

В частности, есть основные концепции и функции JavaScript, которые вы должны знать, прежде чем погрузиться в React. Некоторые из них, которые в основном подпадают под ES6, включают:

• Стрелочные функции
• Оператор отдыха
• Оператор спреда
• Модули
• Разрушение
• Методы массива
• Литералы шаблонов
• Обещания
• let и const переменные

Перечисленные выше темы JavaScript помогут вам, как новичку, понять, как работает React.

Вы также узнаете о новых концепциях React, таких как:

• Составные части
• JSX
• Государственное управление
• Реквизит
• Отрисовка элементов
• Обработка событий
• Условный рендеринг
• Списки и ключи
• Формы и проверка формы
• Крючки
• Стайлинг

Глубокое понимание концепций React и необходимых условий для использования библиотеки поможет вам эффективно использовать ее функции.

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

Государственное управление

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

В JavaScript обновление переменной так же просто, как присвоение ей нового значения с помощью оператора равенства ( = ). Вот пример:

 var x = 300; function updateX(){ x = 100; } updateX(); console.log(x); // 100

В приведенном выше коде мы создали переменную x с начальным значением 300 .

Используя оператор равенства, мы присвоили ему новое значение 100 . Это было написано внутри функции updateX .

В React обновление состояния/значения ваших переменных работает по-другому. Вот как:

 import { useState } from 'react'; function App() { const [x, setX] = useState(300) let updateX =()=>{ setX(100); } return ( <div className="App"> <h1>{x}</h1> <button onClick={updateX}>Update X</button> </div> ); } export default App;

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

• Имя переменной
• Функция для обновления переменной
• Начальное значение/состояние переменной

В нашем примере x — это имя переменной, а setX — это функция для обновления значения x , а начальное значение ( 300 ) x передается в качестве параметра функции useState :

 const [x, setX] = useState(300)

Чтобы обновить состояние x , мы использовали функцию setX :

 import { useState } from 'react'; let updateX =()=>{ setX(100); }

Таким образом, функция updateX вызывает функцию setX , которая затем устанавливает значение x равным 100 .

Хотя это, кажется, отлично работает для обновления состояния ваших переменных, это увеличивает сложность вашего кода в очень больших проектах. Наличие множества State Hooks делает код очень сложным для поддержки и понимания, особенно по мере масштабирования вашего проекта.

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

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

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

Ремонтопригодность и масштабируемость

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

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

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

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

В этом разделе мы поговорим о некоторых лучших практиках, которым следует следовать при написании кода React. Давайте погрузимся прямо в.

1. Поддерживайте четкую структуру папок

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

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

Группировка папок по функциям или маршрутам

Группировка файлов в вашей папке в соответствии с их маршрутами и функциями помогает хранить все о конкретной функции в одном месте. Например, если у вас есть панель управления пользователя, вы можете иметь файлы JavaScript, CSS и тестовые файлы, относящиеся к панели мониторинга, в одной папке.

Вот пример, чтобы продемонстрировать это:

 dashboard/ index.js dashboard.css dashboard.test.js home/ index.js Home.css HomeAPI.js Home.test.js blog/ index.js Blog.css Blog.test.js

Как видно выше, каждая основная функция приложения имеет все свои файлы и активы, хранящиеся в одной папке.

Группировка похожих файлов

Кроме того, вы можете сгруппировать похожие файлы в одной папке. У вас также могут быть отдельные папки для хуков, компонентов и так далее. Посмотрите этот пример:

 hooks/ useFetchData.js usePostData.js components/ Dashboard.js Dashboard.css Home.js Home.css Blog.js Blog.css

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

2. Установите структурированный заказ на импорт

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

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

Взгляните на следующий пример:

 import { Routes, Route } from "react-router-dom"; import { createSlice } from "@reduxjs/toolkit"; import { Menu } from "@headlessui/react"; import Home from "./Home"; import logo from "./logo.svg"; import "./App.css";

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

Затем мы импортировали файлы, созданные локально, такие как таблицы стилей, изображения и компоненты.

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

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

Вот пример:

 import Home from "./Home"; import About from "./About" import Contact from "./Contact" import logo from "./logo.svg"; import closeBtn from "./close-btn.svg" import "./App.css"; import "Home.css"

3. Придерживайтесь соглашений об именах

Соглашения об именах помогают улучшить читаемость кода. Это применимо не только к именам компонентов, но даже к именам ваших переменных, вплоть до ваших хуков.

Документация React не предлагает никакого официального шаблона для именования ваших компонентов. Наиболее часто используемые соглашения об именах — camelCase и PascalCase.

PascalCase в основном используется для имен компонентов:

 import React from 'react' function StudentList() { return ( <div>StudentList</div> ) } export default StudentList

Вышеупомянутый компонент называется StudentList , что гораздо удобнее для чтения, чем Studentlist или studentlist .

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

 & const [firstName, setFirstName] = useState("Ihechikara"); const studentList = []; const studentObject = {}; const getStudent = () => {} const [firstName, setFirstName] = useState("Ihechikara"); const studentList = []; const studentObject = {}; const getStudent = () => {}

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

Инструмент линтера помогает улучшить качество кода. Одним из самых популярных инструментов линтера для JavaScript и React является ESlint. Но как именно это помогает улучшить качество кода?

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

Инструмент наблюдает за вашим кодом, а затем уведомляет вас, когда правило было нарушено. Ключевое слово или строка, нарушающие правило, обычно подчеркиваются красным.

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

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

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

5. Используйте библиотеки сниппетов

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

Библиотеки фрагментов могут ускорить разработку, предоставляя готовый код, который разработчики часто используют.

Хорошим примером является расширение сниппетов ES7+ React/Redux/React-Native, в котором есть много полезных команд для создания готового кода. Например, если вы хотите создать функциональный компонент React, не набирая весь код, все, что вам нужно сделать с помощью расширения, — это ввести rfce и нажать Enter .

Приведенная выше команда продолжит генерацию функционального компонента с именем, соответствующим имени файла. Мы сгенерировали приведенный ниже код, используя расширение сниппетов ES7+ React/Redux/React-Native:

 import React from 'react' function StudentList() { return ( <div>StudentList</div> ) } export default StudentList

Еще одним полезным инструментом для создания фрагментов является расширение Tailwind CSS IntelliSense, которое упрощает процесс стилизации веб-страниц с помощью Tailwind CSS. Расширение может помочь вам с автозаполнением, предлагая служебные классы, подсветку синтаксиса и функции анализа. Вы даже можете увидеть, как выглядят ваши цвета во время кодирования.

6. Комбинируйте CSS и JavaScript

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

Решение этой проблемы состоит в том, чтобы объединить код CSS и JSX. Для этого вы можете использовать фреймворки/библиотеки, такие как Tailwind CSS и Emotion.

Вот как выглядит стиль с помощью Tailwind CSS:

 <p className="font-bold mr-8">resource edge</p>

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

Вот как бы вы стилизовали элемент с помощью Emotion:

 <h1 css={css` color: black; font-size: 30px; `} > Hello World! </h1>

7. Ограничьте создание компонентов

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

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

Мы будем использовать очень простой пример, чтобы продемонстрировать это:

 function UserInfo() { return ( <div> <h1>My name is Ihechikara.</h1> </div> ); } export default UserInfo

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

Чтобы сделать наш компонент многоразовым, мы можем использовать Props. Вот как:

 function UserInfo({userName}) { return ( <div> <h1>My name is {userName}.</h1> </div> ); } export default UserInfo

После этого мы можем импортировать этот компонент и использовать его столько раз, сколько захотим:

 import UserInfo from "./UserInfo"; function App() { return ( <div className="App"> <UserInfo userName={"Ihechikara"} /> <UserInfo userName={"John"} /> <UserInfo userName={"Jane"} /> </div> ); } export default App;

Теперь у нас есть три разных экземпляра компонента UserInfo из логики, созданной в одном файле, вместо трех отдельных файлов для каждого пользователя.

8. Реализуйте ленивую загрузку

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

«Отложенная загрузка» — это термин, используемый для различных реализаций. Здесь мы связываем это с JavaScript и React, но вы также можете реализовать ленивую загрузку изображений и видео.

По умолчанию React объединяет и развертывает все приложение. Но мы можем изменить это поведение, используя ленивую загрузку, также известную как разделение кода.

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

9. Используйте многоразовые крючки

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

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

В приведенном ниже примере мы создадим хук для получения данных из внешних API:

 import { useState, useEffect } from "react"; function useFetchData(url) { const [data, setData] = useState(null); useEffect(() => { fetch(url) .then((res) => res.json()) .then((data) => setData(data)) .catch((err) => console.log(`Error: ${err}`)); }, [url]); return { data }; } export default useFetchData;

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

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

10. Регистрируйте ошибки и управляйте ими

Существуют разные способы обработки ошибок в React, такие как использование границ ошибок, блоков try and catch или использование внешних библиотек, таких как react-error-boundary .

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

С другой стороны, использование блока try и catch работает только для императивного кода, но не для декларативного кода. Это означает, что это не лучший вариант при работе с JSX.

Нашей лучшей рекомендацией было бы использовать такую ​​библиотеку, как react-error-boundary. Эта библиотека предоставляет функциональные возможности, которые можно обернуть вокруг ваших компонентов, что поможет вам обнаруживать ошибки во время рендеринга вашего приложения React.

11. Отслеживайте и тестируйте свой код

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

Хотя многие могут утверждать, что тестирование не имеет большого значения при создании веб-приложения, оно дает бесчисленные преимущества. Здесь только несколько:

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

Вы можете использовать такие инструменты, как Jest или React Testing Library, чтобы протестировать свой код. Существует множество инструментов тестирования, из которых вы можете выбирать — все сводится к тому, который лучше всего подходит для вас.

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

12. Используйте функциональные компоненты

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

С функциональными компонентами вам не нужно беспокоиться об использовании this или классов using. Вы также можете легко управлять состоянием вашего компонента, написав меньше кода благодаря хукам.

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

13. Будьте в курсе изменений версии React

Со временем будут добавлены новые функции и изменены некоторые старые. Лучший способ следить за этим — смотреть официальную документацию.

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

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

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

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

14. Используйте быстрый и безопасный хостинг-провайдер

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

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

Существует множество платформ, которые предоставляют разработчикам бесплатные услуги хостинга, такие как Firebase, Vercel, Netlify, GitHub Pages, или платные услуги, такие как Azure, AWS, GoDaddy, Bluehost и т. д.

Вы также можете использовать платформу хостинга приложений Kinsta. Все, что вам нужно сделать, это подключить репозиторий GitHub, выбрать один из 25 центров обработки данных Kinsta, расположенных по всему миру, и вперед. Вы получите доступ к быстрой настройке, круглосуточной поддержке, первоклассной безопасности, персональным доменам, расширенным инструментам отчетности и мониторинга и многому другому.

Резюме

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

Следование этим соглашениям React не только поможет вашему приложению, но и принесет пользу вам как разработчику внешнего интерфейса — вы научитесь писать эффективный, масштабируемый и удобный в сопровождении код, и вы станете профессионалом в своей области. Хотите улучшить свою игру по кодированию React? Все, что вам нужно знать, есть в этом руководстве Click to Tweet

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

Какие еще лучшие практики React вы знаете, не упомянутые в этой статье? Поделитесь ими в комментариях ниже. Удачного кодирования!