初めて React プロジェクトを開始したときに犯した 5 つの間違い

新しい言語やフレームワークを手に入れるのがどのようなものか知っています。 場合によっては、その方法を見つけるのに役立つ優れたドキュメントがあります。 しかし、最高のドキュメントでさえ、すべてを網羅しているわけではありません。 また、何か新しいものを扱うときは、書面による解決策がない問題が必ず見つかります。

私が初めて React プロジェクトを作成したのは、まさにそのようなものでした。React は、注目に値するドキュメントを備えたフレームワークの XNUMX つであり、特に現在はベータ版のドキュメントがあります。 しかし、私はまだ苦労して通り抜けました。 そのプロジェクトからかなりの時間が経ちましたが、そこから得た教訓はまだ私の心に新鮮です. React の「ハウツー」チュートリアルはたくさんありますが、React を初めて使用したときに知りたかったことを共有したいと思います。

それがこの記事の内容です — 私が犯した初期の過ちのリスト. React の学習がよりスムーズになることを願っています。

create-react-app を使用してプロジェクトを開始する

TL;DR Vite または Parcel を使用してください。

Reactアプリを作成する (CRA) は、新しい React プロジェクトのセットアップを支援するツールです。 ほとんどの React プロジェクトに最適な構成オプションを備えた開発環境を作成します。 これは、自分で何かを構成するのに時間を費やす必要がないことを意味します。

初心者として、これは私の仕事を始めるのに最適な方法のように思えました! 設定なし！ コーディングを始めるだけです！

CRA は、webpack と Babel という XNUMX つの一般的なパッケージを使用してこれを実現します。 webpack は、JavaScript、CSS、画像など、プロジェクト内のすべてのアセットを最適化する Web バンドラーです。 Babel は、一部のブラウザーがサポートしていない場合でも、新しい JavaScript 機能を使用できるようにするツールです。

どちらも優れていますが、特に、より良い仕事をすることができる新しいツールがあります ネジ および 高速 Web コンパイラ (SWC)。

これらの新しく改善された代替手段は、webpack や Babel よりも高速で簡単に構成できます。 これにより、イジェクトせずに create-react-app で行うのが難しい構成の調整が簡単になります。

新しい React プロジェクトをセットアップするときに両方を使用するには、次のことを確認する必要があります。 Node バージョン 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;

にデフォルト値が必要な場合 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 プロパティを使用して、コンポーネントがその小道具の正しいデータ型を渡されているかどうかを確認できます。 文字列、数値、オブジェクトなど、各プロップに使用する必要があるデータのタイプを指定できます。また、プロップが必要かどうかを指定することもできます。

このように、コンポーネントに間違ったデータ型が渡された場合、または必要な props が提供されていない場合、React はエラーをスローします。

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

タイプスクリプト コンポーネントに渡されるデータに一定レベルのタイプ セーフを提供します。 だから、確かに、 propTypes 私が始めた頃は良いアイデアでした。 ただし、TypeScript がタイプ セーフの頼りになるソリューションになった今、他の何よりも 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;

関数コンポーネントは、JSX を返す単純な JavaScript 関数です。 はるかに読みやすく、次のような追加機能はありません。 this キーワードと ライフサイクルメソッド これにより、クラス コンポーネントよりもパフォーマンスが向上します。

関数コンポーネントには、フックを使用する利点もあります。 反応フック クラス コンポーネントを記述せずに状態やその他の React 機能を使用できるようにすることで、コードをより読みやすく、保守しやすく、再利用しやすくします。

不必要に React をインポートする

TL;DR: フックが必要でない限り、それを行う必要はありません。

17 年に React 2020 がリリースされたため、コンポーネントを作成するたびにファイルの先頭に React をインポートする必要がなくなりました。

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

しかし、JSX トランスフォーマー (JSX を通常の JavaScript に変換するもの) は、React 17 より前にそれを行う必要がありました。 React.createElement これは、React をインポートする場合にのみ機能します。 それ以来、JSX を変換せずに変換できる新しいトランスフォーマーがリリースされました。 createElement 方法。

フックを使用するには React をインポートする必要があります。 断片、およびライブラリから必要なその他の関数またはコンポーネント:

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

それらは私の初期の間違いでした！

より良いプラクティスのいくつかは後から出てきたので、「間違い」という言葉は厳しすぎるかもしれません。 それでも、何かを行うための「古い」方法がプロジェクトやその他のチュートリアルで積極的に使用されている例をたくさん目にします。

正直なところ、私は最初の段階で XNUMX つ以上の間違いを犯したと思います。 新しいツールにたどり着くときはいつでも、スイッチを切り替えるというよりも、効果的に使用するための学習の旅のようなものになるでしょう. しかし、これらは何年も経った今でも私が持ち歩いているものです！

React をしばらく使用している場合、始める前に知っておきたいことは何ですか? 他の人が同じ苦労を避けるのに役立つコレクションを手に入れることは素晴らしいことです.

• SEO を活用したコンテンツと PR 配信。 今日増幅されます。
• Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 こちらからアクセスしてください。
• 情報源： https://css-tricks.com/5-mistakes-starting-react/