Psst…ここにReact開発者のための8つの最高のチートシートがあります

これ 論文 もともと公開された 。カルト に アシュトシュミシュラ。 .cultは、開発者向けのベルリンベースのコミュニティプラットフォームです。 私たちは、キャリアに関連するすべてのことについて書き、オリジナルのドキュメンタリーを作成し、世界中からのその他の未知の開発者の物語の山を共有します。

練習は、あらゆるスキルや知識分野を習得するための鍵です。 あなたは一日で物事を学ぶことはありません。 何かが上手になるには、数週間、数か月、時には数年の一貫した練習が必要です。

一般的に、Reactも広大で、よく学ぶには時間がかかります。 したがって、概念や構文を忘れたときに鏡の前で泣くのではなく、解決策を探してください。

ここでは、Reactについて少なくとも基本的な知識があることを前提としています。そうでない場合は、別のギフトを用意しています。開いてください。 ここ。

さて、あなたはすでにReactの経験があるように見えますが、概念と構文はあなたの記憶から逃れています。 その場合、以下はあなたの旅に役立つ可能性のある9つの優れた虎の巻です。

ノート： チートシートは、初心者の開発者だけでなく、経験豊富な開発者にも役立ちます。 プログラミングとは、構文を覚えていない解決策を見つけることです。そのため、基本に精通しているほど、役立つでしょう。

1.開発者のチートシート

開発者のチートシート によるWeb開発のチートシートWebサイトです レオン・ギリヤドフ。 この最小限に設計されたWebサイトには、次のチートシートが含まれています。

Web開発の歴史

• React
• Reactルーター
• 戻ってきた
• ES6

このReactチートシートにはそれほど深みはありませんが、スニペットと構文をざっと読むのに十分な表面レベルのコンテンツを提供します。 急いでいるときに構文にすばやく追いつくためにそれをチェックしてください。

2022年4月の時点で、このチートシートには（機能コンポーネントのみをカウント）：

• Reactアプリを作成する
• ステートレスコンポーネント
• ステートレスコンポーネントの小道具
• 子供
• useRefフック
• useStateフック
• 高階コンポーネント
• 小道具をレンダリングする

2. DevHints

Devhint.io は、さまざまなテクノロジーのチートシートでいっぱいの別のWebサイトです。 DevHintのReactチートシートには、DeveloperCheatsheetsよりも多くのコンテンツが含まれています。

ただし、そのコンテンツのほとんどは、レガシーコードベースで作業しない限りおそらく必要ないクラスコンポーネントに基づいています。

それでも、このチートシートには、機能コンポーネントの世界からのいくつかの有用なスニペットが含まれています。 これらは、機能コンポーネントの宣言、useStateフック、useEffectフックの宣言と例、そして最も重要なカスタムフックの作成方法です。

3.リードバーガー

このチートシート ReedBargerによるfreecodecampの記事です。 これは私のお気に入りの1つであり、初心者向けの最高のReactチートシートです。 2022年2月に公開されたため、この記事で言及されている他のチートシートの中でも最新のものです。

このチートシートの良いところは、構文のみのチートシートではなく、構文の背後にあるコンテキストを提供し、それらの概念について少し教えてくれることです。 したがって、初心者レベルの場合、これは便利です。

このチートシートには、React要素、属性、スタイル、フラグメント、コンポーネント、小道具など、useState、useEffect、useRef、useContext、useCallback、useMemoなどのさまざまなフックの基本に関するコンテンツが含まれています。

内容はよく書かれていて、初心者にやさしく、ほとんどの問題についてここであなたを保持するのに十分な深さを持っています。

個人的には、このウェブサイトがあなたのブックマークに載っていない理由はないと思います。

4.エリックザコーダー

このチートシート EricTheCoderによるdev.toの記事です。 彼は、Reactの概念と構文を忘れたときの記憶の助けとして、2021年6月にこの記事を書きました。

このチートシートの内容はそれほど深くはありませんが、他のチートシートでは見逃していた可能性のある非常に基本的なものがたくさん含まれています。 これには、基本的なJSXルール、JSXのJavaScript、キー付きリスト、さまざまなクリックイベントの詳細などが含まれます。

フックに関しては、このチートシートにはuseState、useEffect、およびuseRefが含まれています。

Ericは、Reactの初心者のときにこのチートシートを作成しました。 したがって、非常に基本的なことでさえ、適切に文書化され、強調されています（他の虎の巻ではある程度見落とされています）。

5. SheCodes

ShecodesのReactチートシート 構文のみの、完全に機能するコンポーネントベースのチートシートです。

すべてのスニペットを一度にチェックアウトするか、カテゴリごとにフィルタリングできます。 スニペットには説明がないため、さまざまな構文を簡単に確認するためにのみ使用できます。

コンテンツは他のWebサイトと同様であり、簡単かつ迅速にアクセスできるため、構文をすばやく参照するための優れたチートシートになっています。

6.TypeScriptを反応させる

最後に、TypeScript開発者にとって素晴らしいものがあります。

Typescriptに反応する はMITライセンスのオープンソースチートシートプロジェクトであり、GitHubに33,000を超えるスターがあり、プロジェクトを存続させ、高品質を維持するための素晴らしい貢献者がたくさんいます。

ReactとTypeScriptでの作業が好きなら、このチートシートもきっと気に入るはずです。 あなたは彼らのコンテンツにアクセスすることができます Webサイト またはGitHub README。

虎の巻全体は4つの部分に分かれています。

• 基本 –React開発者がReactアプリでTSを使い始めるのを支援することに焦点を当てています。
• 高度 –再利用可能な型ユーティリティ/関数/レンダリングプロップ/高階コンポーネントおよびTS+Reactライブラリを作成する人々のためのジェネリック型の高度な使用法を示して説明します。
• 移行中 – JSまたはFlowから、それを実行した人から大規模なコードベースを段階的に移行するためのアドバイスを照合するのに役立ちます。
• HOC –ReactおよびTypeScriptを使用して高階コンポーネントを作成するために利用可能なすべての知識をコンパイルします。

プロジェクト全体の品質は一流であり、必要な説明は必要に応じて提供され、何よりも、このチートシートはコミュニティによって積極的に維持および更新されています。

7. Codingcheats.io

これは、もう1つの機能コンポーネントベースの優れた機能です。 Reactチートシート。 デザインは優れていませんが、このチートシートには優れた内容が含まれています。

すべてのスニペットは、それぞれの簡単な説明とともにホームページで入手できます。

コンテンツには、基本的なコンポーネント構文、省略形、イベント処理、および6つの異なるフック（useState、useEffect、useRef、useMemo、useReducer）が含まれます。 useCallback。

適切な例が各スニペットに示され、それぞれについて簡単に説明されています。 このチートシートを少なくとも1回は必ずチェックしてください。

8.オハンスエマニュエル

このチートシート OhansEmmanuelによるLogRocketの記事です。 私たちのリストにある他のチートシートとは異なり、これはReactの基本に焦点を当てていません。

これは、ReactHooksの説明のみを扱うReactHooksのチートシートです。 構文、フックのしくみ、Reactでフックを操作するときに覚えておくべきベストプラクティスが含まれています。 すべてが例で説明されており、内容は非常によく書かれています。

次のフックがチートシートに含まれています。

• useState
• useEffect
• useContext
• useLayoutEffect
• useReducer
• useCallback
• useMemo
• useRef

現代のReact開発者として、フックの知識は不可欠であり、このチートシートは、フックのコアと日常生活での使用方法を深く理解するのに役立ちます。

Reactの学習は1日の作業ではありません。 時間はかかりますが、一貫性を保ち、知識に投資し、虎の巻を使用して賢くすることで、長期的にゲームにとどまることができます。

私はあなたの旅の幸運を祈ります。 ご不明な点がございましたら、お問い合わせください ツイッター。

私をチェックしてください ブログ 多くのための。

ハッピーコーディング！