ホームページ >ウェブフロントエンド >jsチュートリアル >React は思っているほど難しい/複雑ですか?
React は思っているほど難しい/複雑ですか?
- Linda Hamiltonオリジナル
- 2024-12-05 08:36:15606ブラウズ
React は圧倒的だと思いますか?
そうであれば、あなたは一人ではありません。
次のようなことをよく聞きます:
React は使用しないでください。代わりに Vue を使用してください。
React は難しくて役に立ちません。代わりに HTMX または Vanilla JS を使用してください。
など
しかし、Palantir で 5 年の経験を持つシニア フロントエンド エンジニアとして、私は自信を持って次のように言えます。「React は私が学ばなければならなかった最も簡単なものでした。」
この投稿では、React が世間で言われているほど複雑ではない理由と、困難な場合にその課題に取り組む方法を説明します。
準備はできましたか?それでは、詳しく見ていきましょう。
?有利にスタートするには、無料の 101 React ヒントとコツの本をダウンロードしてください。
React が難しく感じる 7 つの理由 (およびその修正方法)
理由 1: JavaScript を十分に理解していない
人々が React で苦労するのは 99% の場合、JavaScript の基礎がしっかりしていないためです。
これは私にも当てはまり、最初は React コードを理解できませんでした。何かまともなものを書くのに何ヶ月も苦労しました。 JavaScript を学んだことですべてが変わりました。
React を学ぶ前に知っておくべき最低限のことは次のとおりです。
プリミティブ データ型とオブジェクト データ型の違い
オブジェクトの構造化
範囲
閉鎖
非同期
など
? React に関して知っておくべき JavaScript の概念については、Kent C. Dodds によるこの素晴らしいガイドをご覧ください。
JavaScript のスキルが向上すると、React がはるかに簡単に感じられるようになります。
? JavaScript の学習に役立つリソースについては、私の投稿「フロントエンド スキルをレベルアップする方法」をご覧ください。
理由 2: 間違ったツールを使用している
React を初めて使用する場合は、時代遅れのツールや過度に複雑なツールを選択して失敗を覚悟しないでください。
使用しないでください Create React App: 古くて遅く、拡張性がありません。
使用しないでください Next.js (今のところ): 素晴らしいものではありますが、必要のない学習曲線が追加されます。初心者です。
代わりに、Vite から始めてください。速くてシンプルで初心者にも優しいです。後でお礼を言いますね?
理由 3: React とフレームワークを混同している
React ≠ Next.js ≠ リミックス。
Next.js と Remix は、React の上に構築されたフルスタック アプリケーションを作成するためのフレームワークです。
React を学ぶために Next.js や Remix を知る必要はありません。
しかし、それらを使用するには、React を知る必要があります 。
それでは、まず React に注目してください。フレームワークは複雑さの層を追加するため、後から導入することもできます。
理由 4: すべてをゼロから構築しようとしている
すべてをゼロから構築することは、特にアクセシビリティを考慮すると、大変な作業になる可能性があります。
しかし、一人で立ち向かう必要はありません。
React の美しさは、作業を容易にするライブラリのエコシステムです。
これらはショートカットと考えてください。すでに誰かが素晴らしい車輪を作っているのに、なぜ車輪を再発明する必要があるのでしょうか?
ここにいくつかの例があります:
ドラッグアンドドロップ機能用の dnd キット
スタイリング用の shadcn/ui
軽量データフェッチ用の SWR
など
これらのツールを活用して、時間と労力を節約します。
理由 5: 人員が不足しているのにフレームワークを使用していない
時間やリソースが不足している場合 (1 人のチームなど)、Remix や Next.js などのフレームワークが救世主となる可能性があります。
いつ使用するか:
人手不足です
フルスタック アプリを構築しています
組み込みルーティング、サーバー側レンダリングなどが必要な場合
フルスタック ソリューションが必要ない場合は、React Router といくつかの必須ライブラリを使用した React に固執してください。
理由 6: React のレンダリング プロセスを理解していない (結果的にパフォーマンスの問題が発生する)
パフォーマンスの問題を回避するには、React のレンダリング プロセスを理解することが重要です。
レンダリング: React はコンポーネント関数 (またはクラス コンポーネントのレンダリング メソッド) を呼び出して仮想 DOM を生成します。
調整: React は仮想 DOM と実際の DOM を比較して、何が変更されたかを特定します。
コミットフェーズ: React は必要な DOM 要素のみを更新します。
ペイント: ブラウザは画面を再ペイントします。
人々が犯すよくある間違い:
レンダリングが多すぎます: 状態を最小限に抑え、コンポーネント ツリー内で状態を低い位置に保ち、必要に応じてメモ化を使用することでこれを修正します (@ me を使用しないでください ?: メモ化は人生を変える可能性があります) .
? React の再レンダリングに関するこのガイドを確認してください。過剰使用 useEffect: 多くの効果は回避できます。エフェクトは必要ないかもしれません。
規則に従っていません: たとえば、リストをレンダリングするときは、バグを防ぐために常に一意のキーを使用してください。
理由 7: アプリが本番環境で中断される
アプリが開発段階では動作しても本番環境では動作しなくなる場合は、テストと型チェッカーを追加します。
わかっています、わかっています。テストと TypeScript はやりすぎのように聞こえるかもしれません。でも聞いてください。
これらは、ユーザーに届く前にバグを捕まえるセーフティ ネットです。
未来のあなたはあなたに感謝するでしょう!
私がお勧めするものは次のとおりです:
型チェッカー: TypeScript を使用します。特にこのガイドは初心者に優しいです。 Vite を使用している場合、セットアップは簡単です。
テスト: 他のセットアップには、Vite または React テスト ライブラリと一緒に Vitest を使用します。
テストと型により、何時間ものデバッグ時間が節約され、正気を保つことができます。
まとめ
React は思っているほど難しいですか? いいえ。
React は単なる JavaScript ライブラリです。複雑さのほとんどは以下に起因します:
JavaScript について十分に理解していません
React とフレームワークの混同
すべてを自分でやろうとする
React の基本の概要
すべての専門家はかつては初心者だったということを忘れないでください。
正しい考え方とツールがあれば、React は素晴らしいアプリを構築するための秘密兵器になります。
これを持っていますか?
ボーナス: 無料の電子書籍 101 React Tips & Tricks をダウンロードして、よりスムーズで高速な React アプリを構築しながら何時間ものイライラを軽減しましょう。
?思考の糧
?問題を発見する
それはラップですか?.
コメントを残しますか? React に関する最大の課題や、React を気に入った理由を共有します。
「???」を忘れずに入力してください。
React を学習している場合は、私の 101 React ヒントとコツの本を 無料
でダウンロードしてください。このような記事が気に入ったら、私の無料ニュースレター、FrontendJoy
にご参加ください。毎日のヒントが必要な場合は、X/Twitter または Bluesky で私を見つけてください。 <script> // Detect dark theme var iframe = document.getElementById('tweet-1862406693444874439-370'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1862406693444874439&theme=dark" } </script>
以上がReact は思っているほど難しい/複雑ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。