Лучшие рекомендации для React разработчиков в 2023 году
React – популярная библиотека JavaScript для создания пользовательских интерфейсов. В последние годы она приобрела еще большую популярность благодаря своей универсальности и возможности использования как для веб-разработки, так и для мобильных приложений. Если вы планируете использовать React в своих проектах в 2023 году, важно следовать рекомендациям, чтобы ваш код был производительным и простым для понимания. Вот некоторые рекомендации, которые следует учитывать при работе с React в 2023 году.
@react_tg – лучшие практики react в нашем телеграм канале.
1. Использование функциональных компонентов
Функциональный компонент в React — это JavaScript-функция, которая на входе получает объект с данными для отрисовки компонента (их называют props), а на выходе возвращает описание интерфейса, который нужно отобразить. Они обладают более высокой производительностью благодаря реализации в среде React.
2. Использование hooks
API React hooks был представлен в версии React 16.8. Hooks – это новый функционал, который позволяет использовать state
и другие функции React без использования классов. До появления Hooks, некоторые ключевые вещи в компонентах были возможны только с использованием классовых компонентов. API hooks также проще в освоении и использовании, поэтому рекомендуется начать использовать их как можно скорее.
Ниже указан пример “хука”, который извлекает данные из API:
import { useState, useEffect } from 'react';
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
async function fetchData() {
try {
const response = await fetch(url);
const data = await response.json();
setData(data);
} catch (error) {
setError(error);
} finally {
setLoading(false);
}
}
fetchData();
}, [url]);
return { data, loading, error };
}
Этот пользовательский “хук” использует функции useState
и useEffect
для извлечения данных из API и сохранения результата в state
.
Чтобы использовать hook, вы можете вызвать его внутри тела функции компонента:
import { useFetch } from './useFetch';
function UserList() {
const { data, loading, error } = useFetch('/api/users');
if (loading) {
return <LoadingIndicator />;
}
if (error) {
return <ErrorMessage />;
}
return (
<ul>
{data.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
3. Использование React Context
Управление состоянием может быть сложной задачей в любом приложении, а особенно в большом и сложном. Одним из способов упростить управление состоянием является использование React Context API. Context API позволяет вам создать глобальное хранилище данных, к которому может получить доступ любой компонент вашего приложения. Это позволяет легко обмениваться данными между компонентами.
Чтобы использовать контекстный API, вам сначала нужно создать контекстный объект с помощью функции createContext
:
import { createContext } from 'react';
const UserContext = createContext();
Объект UserContext состоит из двух компонентов: Provider
и Consumer
. Provider
используется для предоставления значения контекста своим дочерним элементам, а Consumer
используется для доступа к значению внутри компонента.
Вот пример того, как вы могли бы использовать UserContext
:
import { UserContext } from './UserContext';
function App() {
const user = {
name: 'John Smith',
email: 'john@example.com',
};
return (
<UserContext.Provider value={user}>
<Navbar />
<MainContent />
</UserContext.Provider>
);
}
function Navbar() {
return (
<UserContext.Consumer>
{user => (
<nav>
<p>Welcome, {user.name}</p>
</nav>
)}
</UserContext.Consumer>
);
}
function MainContent() {
return (
<div>
<Sidebar />
<Content />
</div>
);
}
function Sidebar() {
return (
<UserContext.Consumer>
{user => (
<aside>
<p>Email: {user.email}</p>
</aside>
)}
</UserContext.Consumer>
);
}
function Content() {
return (
<div>
<h1>Main Content</h1>
<p>This is the main content of the application.</p>
</div>
);
}
4. Использование React.memo
Вам необходимо использовать функцию React.memo
для оптимизации производительности работы. React.memo
– это компонент более высокого порядка, который позволяет оптимизировать производительность ваших компонентов, предотвращая ненужную повторную визуализацию. Данная функция может быть полезным инструментом для оптимизации производительности вашего приложения, особенно если у вас большое количество компонентов или сложный пользовательский интерфейс.
Ниже показан пример того, как можно использовать функцию React.memo
:
import { memo } from 'react';
function UserList({ users }) {
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
export default memo(UserList);
5. Использование библиотеки React Router
Если вы создаете одностраничное приложение (SPA) с помощью React, вам понадобится способ управления маршрутизацией на стороне клиента. Библиотека React Router является популярным выбором для этой цели, поскольку она предоставляет простой API для определения маршрутов и управления URL вашего приложения. С помощью библиотеки React Router вы можете легко создавать SPA, которые просты в навигации и обслуживании.
Для того, чтобы пользоваться библиотекой React Router, вам необходимо установить её с помощью npm:
npm install react-router-dom
Затем вы можете импортировать компонент BrowserRouter
и использовать его с вашим приложением:
import { BrowserRouter } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Navbar />
<MainContent />
</BrowserRouter>
);
}
Компонент BrowserRouter
использует HTML 5 API для управления URL вашего приложения. Это означает, что вы можете использовать компонент Link
для навигации без перезагрузки страницы:
import { Link } from 'react-router-dom';
function Navbar() {
return (
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
);
}
6. Использование расширения React Developer
Навык использования расширения для браузера React Developer Tools является обязательным для любого разработчика React. Данное расширение позволяет вам проверять компоненты и состояние вашего приложения, а также отслеживать иерархию компонентов. React Developer Tools является кроссбраузерным расширением, так что вы можете пользоваться им с любого браузера, будь то Яндекс, Google или Safari.
Чтобы его установить, просто посетите магазин расширений для вашего браузера и найдите “React Developer Tools”. Нажмите ”Добавить в Chrome“ (или ”Добавить в Firefox” и т.д.), чтобы установить расширение.
Как только расширение будет установлено, вы можете получить к нему доступ, щелкнув значок React на панели инструментов вашего браузера. Это откроет панель инструментов разработчика React, которая позволяет вам проверять компоненты и состояние вашего приложения.
Ниже представлен пример того, как вы можете исправить проблему в вашем приложении с помощью React Developer Tools:
- Откройте React Developer Tools, щелкнув значок React на панели инструментов.
- Перейдите к компоненту, который вы хотите проверить.
- Щелкните на компоненте, чтобы увидеть его состояние.
- Используйте вкладку “Elements” для проверки элементов DOM, сгенерированных компонентом.
- Используйте вкладку “Profiler” для исправления ошибок (если это возможно).
Расширение React Developer Tools – бесценный инструмент для отладки и оптимизации ваших приложений на React, поэтому неплохо было бы ознакомиться с его функциями.
7. Использование линтера для соблюдения стиля кода
Общий стиль кода важен для любого проекта, и это особенно важно при работе с командой. Линтер может помочь вам обеспечить согласованный стиль кода, обнаруживая и выделяя такие проблемы, как пропущенные точки с запятой, неиспользуемые переменные и другие распространенные ошибки.
Чтобы использовать линтер в вашем проекте React, вам сначала нужно установить его с помощью npm:
npm install eslint
Затем вы можете создать файл конфигурации для линтера, выполнив следующую команду:
npx eslint --init
На этом этапе вы пройдете через серию подсказок по настройке линтера для вашего проекта. Как только настройка будет завершена, вы можете запустить этот инструмент, используя следующую команду:
npx eslint .
После запуска линтера, он сообщит о любых обнаруженных проблемах. Вы также можете использовать специальные плагины для вашего текстового редактора, чтобы автоматически выделять возникающие проблемы во время работы.
8. Использование фреймворка для тестирования
Тестирование является неотъемлемой частью процесса разработки, и это особенно важно при работе с React. Фреймворки для тестирования позволяют производить автоматические тесты, которые проверяют поведение вашего кода. Это может помочь вам своевременно выявлять ошибки.
Существует несколько фреймворков для тестирования, например: Jest, Enzyme и React Testing Library.
Чтобы начать тестирование в React, необходимо установить фреймворк для тестирования с использованием npm:
npm install jest
Затем вы можете создать файл для тестирования ваших программ, например:
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Button from './Button';
test('Button should render with text', () => {
const { getByText } = render(<Button>Click me</Button>);
expect(getByText('Click me')).toBeInTheDocument();
});
test('Button should call onClick handler when clicked', () => {
const onClick = jest.fn();
const { getByText } = render(<Button onClick={onClick}>Click me</Button>);
fireEvent.click(getByText('Click me'));
expect(onClick).toHaveBeenCalled();
});
В этом примере компонент Button
тестируется с использованием функций render
и fireEvent
из библиотеки @testing-library/react library
. Первый тест проверяет правильность отображения текста, а второй тест проверяет то, что вызывается при нажатии на кнопку.
Для запуска тестов вы можете использовать следующую команду:
npx jest
Это позволит запустить все тесты в вашем проекте и сообщить о результатах тестирования.
9. Использование исорщиков модулей
Перед тем, как выложить в открытый доступ своё приложение на React, вам нужно будет оптимизировать его. Для этого вам могут помочь сборщики модулей, использовав которые, вы сможете убедиться в том, что ваше приложение готово к публикации.
Вот несколько популярных инструментов сборки: Webpack, Rollup, Parcel.
Чтобы начать работу с Webpack, вам нужно установить его с помощью npm:
npm install webpack
Затем вы можете создать файл конфигурации, добавив файл webpack.config.js
в корень вашего проекта. В файле конфигурации должна быть указана точка входа для вашего приложения и любые другие параметры, которые вы хотите настроить.
Вот пример простой конфигурации Webpack для приложения на React:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|jpg|gif)$/,
use: 'file-loader',
},
],
},
};
В этом примере конфигурация определяет точку входа для приложения (./src/index.js ), выходной файл (bundle.js ), а также загрузчики для обработки JavaScript, CSS и файлов с изображениями.
Чтобы запустить Webpack, вам необходимо прописать следующий код:
"scripts": {
"build": "webpack --mode production"
}
Затем вы можете запустить скрипт сборки, используя следующую команду:
npm run build
10. Использование IDE (редактора кода) для повышения производительности
Хороший редактор кода или IDE может значительно повысить вашу производительность при работе с React. Эти инструменты обычно предоставляют такие функции, как подсветка синтаксиса, запуск кода и проверка ошибок, которые, в свою очередь, могут сэкономить ваше время и снизить риск ошибок. Некоторые популярные редакторы кода и IDE для разработки React: Visual Studio Code, Sublime Text и WebStorm.
Чтобы выбрать лучший редактор кода (крайне субъективный момент), вам необходимо придерживаться нескольких факторов:
- Поддержка языков. Убедитесь, что инструмент поддерживает все языки, которые вы используете в своем проекте.
- Плагины. Ищите IDE, который имеет хороший выбор плагинов для разработки на React, таких как подсветка синтаксиса, форматирование кода и линтеры.
- Производительность. Рассмотрите производительность каждого редактора, особенно если вы работаете над большим проектом. Вам нужен быстрый и отзывчивый инструмент с низким уровнем использования процессора и памяти.
- Цена. Определите свой бюджет и выберите инструмент, который соответствует ему. Некоторые инструменты бесплатны, в то время как за другие взимается лицензионная плата.
Следуя этим рекомендациям, вы можете улучшить качество ваших приложений React и создать лучшее ПО для своих пользователей!
Отличные у вас статьи по React