Содержание
Вы знаете, каково это - изучать новый язык или фреймворк. Иногда есть отличная документация, которая поможет вам сориентироваться. Но даже самая лучшая документация не охватывает абсолютно все. И когда вы работаете с чем-то новым, вы обязательно столкнетесь с проблемой, у которой нет письменного решения.
Так было и со мной, когда я впервые создавал проект на React - а React - один из тех фреймворков с замечательной документацией, особенно сейчас, когда вышла бета-версия документации. Но я все равно с трудом справился с задачей. Прошло уже довольно много времени с того проекта, но уроки, которые я извлек из него, все еще свежи в памяти. И хотя существует множество учебников по React, я решил поделиться с вами тем, что я хотел бы знать, когда впервые использовал его.
Итак, эта статья - список ранних ошибок, которые я совершил. Надеюсь, они помогут вам освоить React гораздо легче.
Использование create-react-app для начала проекта
TL;DR Используйте Vite или Parcel.
Create React App (CRA) - это инструмент, который поможет вам создать новый React-проект. Он создает среду разработки с оптимальными параметрами конфигурации для большинства проектов React. Это означает, что вам не придется тратить время на самостоятельную настройку.
Мне, как новичку, это показалось отличным способом начать работу! Никаких настроек! Просто начните кодить!
Для этого CRA использует два популярных пакета - webpack и Babel. webpack - это веб-пакет, который оптимизирует все активы в вашем проекте, такие как JavaScript, CSS и изображения. Babel - это инструмент, который позволяет использовать новые функции JavaScript, даже если некоторые браузеры их не поддерживают.
Оба инструмента хороши, но есть и более новые, которые справляются с этой задачей лучше, в частности Vite и Speedy Web Compiler (SWC).
Эти новые и улучшенные альтернативы быстрее и проще в настройке, чем webpack и Babel. Это облегчает настройку конфигурации, что трудно сделать в create-react-app без извлечения.
Чтобы использовать их оба при создании нового проекта React, необходимо убедиться, что у вас установлен Node версии 12 или выше, а затем выполнить следующую команду.
npm create vite
Вам будет предложено выбрать имя для проекта. Как только вы это сделаете, выберите React из списка фреймворков. После этого вы можете выбрать либо Javascript + SWC, либо Typescript + SWC.
Затем вам нужно будет изменить директорию cd в вашем проекте и выполнить следующую команду;
npm i && npm run dev
Это должно запустить сервер разработки для вашего сайта с URL localhost:5173.
И это так просто.
Использование defaultProps для значений по умолчанию
TL;DR Вместо этого используйте параметры функции по умолчанию.
Данные можно передавать компонентам React через нечто, называемое props. Они добавляются в компонент так же, как атрибуты в HTML-элемент, и могут использоваться в определении компонента, принимая соответствующие значения из объекта prop, переданного в качестве аргумента.
// App.jsx
export default function App() {
return <Card title="Hello" description="world" />
}
// Card.jsx
function Card(props) {
return (
<div>
<h1>{props.title}</h1>
{props.description}
</div>
);
}
export default Card;
Если для prop требуется значение по умолчанию, можно использовать свойство defaultProp:
// Card.jsx
function Card(props) {
// ...
}
Card.defaultProps = {
title: 'Default title',
description: 'Desc',
};
export default Card;
В современном JavaScript есть возможность деструктурировать объект props и присвоить ему значение по умолчанию в аргументе функции.
// Card.jsx
function Card({ title = 'Default title', description = 'Desc' }) {
return (
<div>
<h1>{title}</h1>
{description}
</div>
);
}
export default Card;
Это более выгодный код, который может быть прочитан современными браузерами без необходимости дополнительной трансформации.
К сожалению, defaultProps требует некоторого преобразования для чтения браузером, поскольку JSX (JavaScript XML) не поддерживается из коробки. Это может потенциально повлиять на производительность приложения, использующего большое количество defaultProps.
Не используйте propTypes.
TL;DR Используйте TypeScript.
В React свойство propTypes можно использовать для проверки того, что компоненту передается правильный тип данных для его реквизитов. Они позволяют указать тип данных, который должен использоваться для каждого реквизита, например строка, число, объект и т. д. Они также позволяют указать, является ли реквизит обязательным или нет.
Таким образом, если компоненту будет передан неверный тип данных или если не будет предоставлен требуемый реквизит, React выдаст ошибку.
// Card.jsx
import { PropTypes } from 'prop-types';
function Card(props) {
// ...
}
Card.propTypes = {
title: PropTypes.string.isRequired,
description: PropTypes.string,
};
export default Card;
TypeScript обеспечивает уровень безопасности типов в данных, передаваемых компонентам. Так что, конечно, propTypes были хорошей идеей, когда я только начинал. Однако теперь, когда TypeScript стал основным решением для обеспечения безопасности типов, я настоятельно рекомендую использовать его вместо всего остального.
// Card.tsx
interface CardProps {
title: string,
description?: string,
}
export default function Card(props: CardProps) {
// ...
}
TypeScript - это язык программирования, который опирается на JavaScript, добавляя статическую проверку типов. TypeScript предоставляет более мощную систему типов, которая позволяет отлавливать больше потенциальных ошибок и улучшает опыт разработки.
Использование компонентов классов
TL;DR: Пишите компоненты как функции
Классовые компоненты в React создаются на основе классов JavaScript. Они имеют более объектно-ориентированную структуру, а также несколько дополнительных возможностей, таких как возможность использовать ключевое слово this и методы жизненного цикла.
// Card.jsx
class Card extends React.Component {
render() {
return (
<div>
<h1>{this.props.title}</h1>
{this.props.description}
</div>
);
}
}
export default Card;
Я предпочитаю писать компоненты с помощью классов, а не функций, но классы JavaScript сложнее для понимания новичками, а this может сильно запутать. Вместо этого я бы рекомендовал писать компоненты как функции:
// Card.jsx function Card(props) { return ( <div> <h1>{props.title}</h1> {props.description} </div> ) } export default Card;
Функциональные компоненты - это просто функции JavaScript, которые возвращают JSX. Их гораздо проще читать, и у них нет дополнительных возможностей, таких как ключевое слово this и методы жизненного цикла, которые делают их более производительными, чем компоненты классов.
Преимущество функциональных компонентов также заключается в использовании хуков. React Hooks позволяют использовать состояние и другие возможности React без написания компонента класса, что делает ваш код более читаемым, поддерживаемым и многократно используемым.
Импорт React без необходимости
TL;DR: Не стоит этого делать, если только вам не нужны хуки.
С тех пор как в 2020 году вышел React 17, теперь нет необходимости импортировать React в верхней части файла, когда вы создаете компонент.
import React from 'react'; // Не нужно! export default function Card() {}.
Но до появления React 17 нам приходилось это делать, потому что JSX-трансформатор (то, что преобразует JSX в обычный JavaScript) использовал метод React.createElement, который работал только при импорте React. С тех пор был выпущен новый трансформатор, который может преобразовывать JSX без метода createElement.
Вам все равно придется импортировать React, чтобы использовать хуки, фрагменты и любые другие функции или компоненты, которые могут понадобиться вам из библиотеки:
import { useState } from 'react'; export default function Card() { const [count, setCount] = useState(0); // ... }
Это были мои ранние ошибки!
Возможно, “ошибки” - это слишком грубое слово, поскольку некоторые из лучших практик появились позже. Тем не менее, я вижу множество примеров, когда “старый” способ делать что-то до сих пор активно используется в проектах и других руководствах.
Честно говоря, когда я только начинал, я совершил, наверное, гораздо больше пяти ошибок. Каждый раз, когда вы берете в руки новый инструмент, это будет скорее путь обучения эффективному использованию, а не щелчок выключателя. Но именно эти вещи я до сих пор ношу с собой спустя годы!
Если вы уже давно используете React, какие вещи вы хотели бы знать до того, как начали работать? Было бы здорово собрать коллекцию, чтобы помочь другим избежать тех же трудностей.