5 помилок, яких я припустився, починаючи свій перший проект React

Ви знаєте, як це – вибрати нову мову чи фреймворк. Іноді є чудова документація, яка допоможе вам знайти свій шлях у цьому. Але навіть найкраща документація не охоплює абсолютно всього. І коли ви працюєте з чимось новим, ви обов’язково знайдете проблему, яка не має письмового рішення.

Саме так було для мене, коли я вперше створив проект React — і React є одним із тих фреймворків із чудовою документацією, особливо зараз із бета-версією документів. Але я все ще намагався пройти. Минуло досить багато часу після того проекту, але уроки, які я отримав з нього, ще свіжі в моїй пам’яті. І незважаючи на те, що існує багато практичних посібників з React, я вирішив поділитися тим, що хотів би знати, коли вперше його використав.

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

Використання create-react-app для запуску проекту

TL;DR Використовуйте Vite або Parcel.

Створіть додаток React (CRA) — це інструмент, який допоможе вам створити новий проект React. Він створює середовище розробки з найкращими параметрами конфігурації для більшості проектів React. Це означає, що вам не доведеться витрачати час на налаштування самостійно.

Як початківцю, це здавалося чудовим способом почати мою роботу! Без конфігурації! Просто почніть кодувати!

Для цього CRA використовує два популярні пакети: webpack і Babel. webpack — це веб-пакетувальник, який оптимізує всі активи у вашому проекті, такі як JavaScript, CSS і зображення. Babel — це інструмент, який дозволяє використовувати нові функції JavaScript, навіть якщо деякі браузери їх не підтримують.

Обидва хороші, але є новіші інструменти, які можуть виконувати роботу краще, зокрема Віте та Швидкий веб-компілятор (SWC).

Ці нові та покращені альтернативи швидше та легше налаштувати, ніж webpack та Babel. Це полегшує налаштування конфігурації, що важко зробити в додатку create-react-app без вилучення.

Щоб використовувати їх обидва під час налаштування нового проекту React, ви повинні переконатися, що у вас є вузол інстальовано версію 12 або новішу, а потім виконайте таку команду.

npm create vite

Вам буде запропоновано вибрати назву для вашого проекту. Зробивши це, виберіть React зі списку фреймворків. Після цього ви можете вибрати будь-який Javascript + SWC or 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> <p>{props.description}</p> </div> );
} export default Card;

Якщо для a 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> <p>{description}</p> </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> <p>{this.props.description}</p> </div> ) }
} export default Card;

Я віддаю перевагу написанню компонентів із класами, ніж функціями, але новачкам складніше зрозуміти класи JavaScript this може стати дуже заплутаним. Замість цього я б рекомендував писати компоненти як функції:

// Card.jsx
function Card(props) { return ( <div> <h1>{props.title}</h1> <p>{props.description}</p> </div> )
} export default Card;

Функціональні компоненти — це просто функції JavaScript, які повертають JSX. Їх набагато легше читати, і вони не мають додаткових функцій, подібних до this ключове слово і методи життєвого циклу що робить їх більш продуктивними, ніж компоненти класу.

Функціональні компоненти також мають перевагу використання гаків. Гаки для реагування дозволяють використовувати стан та інші функції React без написання компонента класу, що робить ваш код більш читабельним, придатним для обслуговування та повторного використання.

Імпортувати React без потреби

TL;DR: Немає потреби це робити, якщо вам не потрібні гачки.

Оскільки React 17 був випущений у 2020 році, тепер немає потреби імпортувати React у верхній частині вашого файлу, коли ви створюєте компонент.

import React from 'react'; // Not needed!
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, які речі ви хотіли б знати, перш ніж почати? Було б чудово зібрати колекцію, яка б допомагала іншим уникнути подібних проблем.

• Розповсюдження контенту та PR на основі SEO. Отримайте посилення сьогодні.
• Платоблокчейн. Web3 Metaverse Intelligence. Розширені знання. Доступ тут.
• джерело: https://css-tricks.com/5-mistakes-starting-react/