5 błędów, które popełniłem rozpoczynając mój pierwszy projekt React

Wiesz, jak to jest uczyć się nowego języka lub frameworka. Czasami jest świetna dokumentacja, która pomoże ci się przez to odnaleźć. Ale nawet najlepsza dokumentacja nie obejmuje absolutnie wszystkiego. A kiedy pracujesz z czymś nowym, na pewno znajdziesz problem, który nie ma pisemnego rozwiązania.

Tak właśnie było, gdy po raz pierwszy stworzyłem projekt React — a React jest jednym z tych frameworków z niezwykłą dokumentacją, zwłaszcza teraz z dokumentacją beta. Ale wciąż walczyłem o swoją drogę. Minęło sporo czasu od tego projektu, ale lekcje, które z niego wyniosłem, wciąż są świeże w mojej pamięci. I chociaż istnieje wiele samouczków „jak to zrobić” w React, pomyślałem, że podzielę się tym, co chciałbym wiedzieć, kiedy po raz pierwszy go użyłem.

Oto czym jest ten artykuł — lista wczesnych błędów, które popełniłem. Mam nadzieję, że dzięki nim nauka React będzie dla Ciebie dużo płynniejsza.

Używanie aplikacji create-react-app do rozpoczęcia projektu

TL;DR Użyj Vite lub Parcel.

Utwórz aplikację React (CRA) to narzędzie, które pomaga skonfigurować nowy projekt React. Tworzy środowisko programistyczne z najlepszymi opcjami konfiguracji dla większości projektów React. Oznacza to, że nie musisz tracić czasu na samodzielne konfigurowanie czegokolwiek.

Jako początkujący wydawało mi się to świetnym sposobem na rozpoczęcie pracy! Brak konfiguracji! Po prostu zacznij kodować!

CRA wykorzystuje do tego dwa popularne pakiety, webpack i Babel. webpack to web bundler, który optymalizuje wszystkie zasoby w twoim projekcie, takie jak JavaScript, CSS i obrazy. Babel to narzędzie, które umożliwia korzystanie z nowszych funkcji JavaScript, nawet jeśli niektóre przeglądarki ich nie obsługują.

Oba są dobre, ale istnieją nowsze narzędzia, które mogą lepiej wykonać zadanie Zyje i Szybki kompilator sieciowy (SWC).

Te nowe i ulepszone alternatywy są szybsze i łatwiejsze w konfiguracji niż webpack i Babel. Ułatwia to dostosowanie konfiguracji, co jest trudne do wykonania w aplikacji create-react-app bez wysuwania.

Aby użyć ich obu podczas konfigurowania nowego projektu React, musisz się upewnić, że masz Node zainstalowana wersja 12 lub nowsza, a następnie uruchom następujące polecenie.

npm create vite

Zostaniesz poproszony o wybranie nazwy dla swojego projektu. Gdy to zrobisz, wybierz React z listy frameworków. Następnie możesz wybrać jedną z nich Javascript + SWC or Typescript + SWC

Wtedy będziesz musiał zmienić katalog cd do swojego projektu i uruchom następujące polecenie;

npm i && npm run dev

To powinno uruchomić serwer programistyczny dla Twojej witryny z adresem URL localhost:5173

I to takie proste.

Korzystanie z defaultProps dla wartości domyślnych

TL;DR Zamiast tego użyj domyślnych parametrów funkcji.

Dane mogą być przekazywane do komponentów React przez coś, co nazywa się props. Są one dodawane do komponentu podobnie jak atrybuty w elemencie HTML i mogą być użyte w definicji komponentu poprzez pobranie odpowiednich wartości z obiektu prop przekazanego jako argument.

// 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;

Jeśli wartość domyślna jest kiedykolwiek wymagana dla a propThe defaultProp nieruchomość może być używana:

// Card.jsx
function Card(props) { // ...
} Card.defaultProps = { title: 'Default title', description: 'Desc',
}; export default Card;

Dzięki nowoczesnemu JavaScriptowi możliwe jest zniszczenie pliku props obiekt i przypisz mu wartość domyślną w argumencie funkcji.

// Card.jsx
function Card({title = "Default title", description= "Desc"}) { return ( <div> <h1>{title}</h1> <p>{description}</p> </div> )
} export default Card;

Jest to korzystniejsze, ponieważ kod może być odczytywany przez nowoczesne przeglądarki bez konieczności dodatkowej transformacji.

Niestety, defaultProps wymagają pewnej transformacji do odczytania przez przeglądarkę, ponieważ JSX (JavaScript XML) nie jest obsługiwany po wyjęciu z pudełka. Może to potencjalnie wpłynąć na wydajność aplikacji, która dużo używa defaultProps.

Nie używaj propTypes

TL;DR Użyj TypeScriptu.

W Reakcie, propTypes można użyć do sprawdzenia, czy komponentowi jest przekazywany prawidłowy typ danych dla jego rekwizytów. Pozwalają określić typ danych, które powinny być użyte dla każdego rekwizytu, takie jak ciąg, liczba, obiekt itp. Pozwalają również określić, czy rekwizyt jest wymagany, czy nie.

W ten sposób, jeśli do komponentu zostanie przekazany zły typ danych lub jeśli wymagany atrybut nie zostanie dostarczony, React zgłosi błąd.

// Card.jsx
import { PropTypes } from "prop-types"; function Card(props) { // ...
} Card.propTypes = { title: PropTypes.string.isRequired, description: PropTypes.string,
}; export default Card;

TYPESCRIPT zapewnia poziom bezpieczeństwa typów danych przekazywanych do składników. Tak pewny, propTypes były dobrym pomysłem, kiedy zaczynałem. Jednak teraz, gdy TypeScript stał się podstawowym rozwiązaniem zapewniającym bezpieczeństwo typów, gorąco polecam używanie go zamiast czegokolwiek innego.

// Card.tsx
interface CardProps { title: string, description?: string,
} export default function Card(props: CardProps) { // ...
}

TypeScript to język programowania, który opiera się na JavaScript, dodając statyczne sprawdzanie typów. TypeScript zapewnia potężniejszy system typów, który może wychwycić więcej potencjalnych błędów i poprawia doświadczenie programistyczne.

Korzystanie z komponentów klasy

TL;DR: Pisz komponenty jako funkcje

Komponenty klasowe w React są tworzone przy użyciu klas JavaScript. Mają bardziej zorientowaną obiektowo strukturę, a także kilka dodatkowych funkcji, takich jak możliwość korzystania z this słowa kluczowe i metody cyklu życia.

// Card.jsx
class Card extends React.Component { render() { return ( <div> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </div> ) }
} export default Card;

Wolę pisać komponenty z klasami niż funkcjami, ale klasy JavaScript są trudniejsze do zrozumienia dla początkujących this może być bardzo mylące. Zamiast tego polecam pisanie komponentów jako funkcji:

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

Komponenty funkcyjne to po prostu funkcje JavaScript, które zwracają JSX. Są one znacznie łatwiejsze do odczytania i nie mają dodatkowych funkcji, takich jak this słowo kluczowe i metody cyklu życia co czyni je bardziej wydajnymi niż komponenty klasy.

Komponenty funkcyjne mają również tę zaletę, że wykorzystują haczyki. Reaguj haki umożliwiają korzystanie ze stanu i innych funkcji React bez pisania komponentu klasowego, dzięki czemu Twój kod jest bardziej czytelny, łatwiejszy w utrzymaniu i wielokrotnego użytku.

Importowanie Reaguj niepotrzebnie

TL; DR: Nie ma takiej potrzeby, chyba że potrzebujesz haczyków.

Ponieważ React 17 został wydany w 2020 roku, nie ma potrzeby importowania Reacta na początku pliku za każdym razem, gdy tworzysz komponent.

import React from 'react'; // Not needed!
export default function Card() {}

Ale musieliśmy to zrobić przed Reactem 17, ponieważ transformator JSX (rzecz, która konwertuje JSX na zwykły JavaScript) używał metody o nazwie React.createElement działałoby to tylko podczas importowania React. Od tego czasu wydano nowy transformator, który może przekształcić JSX bez createElement Metoda.

Nadal będziesz musiał zaimportować React, aby używać haków, paprochyoraz wszelkie inne funkcje lub komponenty, których możesz potrzebować z biblioteki:

import { useState } from 'react'; export default function Card() { const [count, setCount] = useState(0); // ...
}

To były moje wczesne błędy!

Może „błąd” to zbyt ostre słowo, ponieważ niektóre z lepszych praktyk pojawiły się później. Mimo to widzę wiele przypadków, w których „stary” sposób robienia czegoś jest nadal aktywnie wykorzystywany w projektach i innych samouczkach.

Szczerze mówiąc, prawdopodobnie popełniłem więcej niż pięć błędów na początku. Za każdym razem, gdy sięgniesz po nowe narzędzie, będzie to bardziej przypominało podróż edukacyjną, jak efektywnie z niego korzystać, niż przestawianie przełącznika. Ale to są rzeczy, które wciąż noszę ze sobą po latach!

Jeśli używasz Reacta od jakiegoś czasu, jakie rzeczy chciałbyś wiedzieć przed rozpoczęciem? Byłoby wspaniale zebrać kolekcję, która pomoże innym uniknąć tych samych zmagań.

• Dystrybucja treści i PR oparta na SEO. Uzyskaj wzmocnienie już dziś.
• Platoblockchain. Web3 Inteligencja Metaverse. Wzmocniona wiedza. Dostęp tutaj.
• Źródło: https://css-tricks.com/5-mistakes-starting-react/