Ви знаєте, що таке вивчати нову мову або фреймворк. Іноді чудова документація допоможе вам зорієнтуватися в цьому питанні. Але навіть найкраща документація не охоплює абсолютно все. І коли ви працюєте з чимось новим, ви неодмінно зіткнетеся з проблемою, яка не має письмового рішення.
Саме так було зі мною, коли я вперше створив проєкт - а React є одним з тих фреймворків, що мають чудову документацію, особливо зараз, коли є бета-документація. Але мені все одно було складно. Минуло досить багато часу від того проєкту, але уроки, які я виніс з нього, все ще свіжі в моїй пам'яті. І хоча існує безліч навчальних посібників з React, я вирішив поділитися тим, що мені хотілося б знати, коли я вперше використовував його.
Отже, ця стаття - це список перших помилок, яких я припустився. Сподіваюся, вони допоможуть вам зробити вивчення React набагато простішим.
Використання create-react-app для створення проєкту
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 для стандартних параметрів
Дані можуть бути передані до React-компонентів через так звані пропси. Вони додаються до компонента подібно до атрибутів у HTML-елементі та можуть бути використані у визначенні компонента, беручи відповідні значення з об'єкта пропсів, переданого як аргумент.
// App.jsx
export default function App() {
return <Card title="Hello" description="world" />
}
// Card.jsx
function Card(props) {
return (
<div>
<h1>{props.title}</h1>
<p>{props.description}</p>
</div>
);
}
export default Card;
Якщо для пропсу потрібне значення за замовчуванням, можна використати властивість 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>
<p>{description}</p>
</div>
)
}
export default Card;
Це є кращим варіантом, оскільки код може бути прочитаний сучасними браузерами без необхідності додаткової конвертації.
На жаль, defaultProps потребують певного перетворення для зчитування браузером, оскільки JSX (JavaScript XML) не підтримується з коробки. Це потенційно може вплинути на продуктивність програми, яка використовує багато defaultProps.
Не використовуйте propTypes
У 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 забезпечує потужнішу систему типів, що дозволяє виявити більше потенційних помилок та покращує процес розробки.
Використання компонентів класу
Компоненти класів у React створюються за допомогою класів JavaScript. Вони мають більш об'єктно-орієнтовану структуру, а також кілька додаткових можливостей, таких як можливість використання ключового слова this та методів lifecycle.
// Card.jsx
class Card extends React.Component {
render() {
return (
<div>
<h1>{this.props.title}</h1>
<p>{this.props.description}</p>
</div>
)
}
}
export default Card;
Я надаю перевагу написанню компонентів за допомогою класів, а не функцій, але початківцям важче зрозуміти JavaScript класи, і це може сильно заплутати. Замість цього я рекомендую писати компоненти як функції:
// Card.jsx
function Card(props) {
return (
<div>
<h1>{props.title}</h1>
<p>{props.description}</p>
</div>
)
}
export default Card;
Функціональні компоненти - це просто функції JavaScript, які повертають JSX. Їх набагато легше читати, і вони не мають додаткових можливостей, таких як ключове слово this та методи lifecycle, що робить їх більш продуктивними, ніж класові компоненти.
Функціональні компоненти також мають перевагу у використанні хуків. Завдяки хукам ви можете використовувати стан та інші функції React без написання класових компонентів, що робить ваш код більш читабельним, зручним для супроводу та повторного використання.
Імпорт React без потреби
Після виходу React 17 у 2020 році, тепер нема потреби імпортувати 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 вже деякий час, що з того, що ви хотіли б знати до того, як почали працювати з ним, ви б хотіли дізнатися? Було б чудово зібрати колекцію, щоб допомогти іншим уникнути тих самих труднощів.
Ще немає коментарів