Reactの使用を開始する方法

Reactは非常に人気のあるjavascriptライブラリであり、主に単一ページのWebアプリケーションを作成するために使用されます。Reactでできることはたくさんあり、オンラインで利用できるチュートリアルもたくさんありますが、ここでは、ゼロから最初のReactコンポーネントに移行するための手順についてのみ説明します。

始める前に

NodeJの最新バージョンが必要です。nodesourceから最新バージョンをインストールできます。

また、JSX構文に慣れていない場合は、このリンクを確認してください。

開発環境のセットアップ

すぐに使用できる.jsファイルをロードするスクリプトタグをWebページに含めるだけで、すぐにReactを試すことができますが、試してみたいだけではないので、それが道ではないと思います。 、あなたはそれを使いたいです。

ツールcreate-react-appを使用すると、基本的な反応アプリがどのように見えるかを確認できるボイラープレートと、ファイルを保存するとすぐにコードの出力を表示するライブコンパイラを設定できます。

すべてがインストールされたら、appフォルダーに移動し、「npmstart」と入力します。

コンポーネントと小道具を理解する

コンポーネントの目的は、特定のイベントが発生するたびに表示するものをレンダリングすることです。再レンダリングをトリガーするイベントを定義する必要があります。コンポーネントの「状態の変更」について説明します。

propsは、html属性として変数を介してコンポーネント関数に渡されるプロパティを持つオブジェクトです。

フックを理解する

Reactは最初にクラスを使用してコンポーネントを定義していましたが、最近では関数を使用してコンポーネントを定義できるようになりました。フックを使用すると、これらの関数内でReactのさまざまな機能にアクセスできます。

状態は最も基本的な機能であるため、最初に必要なフックはuseStateです。

あなたの最初のコンポーネント

srcフォルダーでファイルapp.js（またはtypescriptを使用する場合はapp.tsx）を見つけて開きます。App（）関数が最初のコンポーネントになります。return（）内にあるものとその上にあるものを削除してから、非常に簡単なことを試してみましょう。

このコードをreturn（）内に配置します

<button onClick={showMessage}>React!</button>

function showMessage(){
    console.log("It works!")
}

ReactDOM.render（）は、ReactがWebページにコンポーネントを「書き込む」ことを可能にするものであり、index.js（またはindex.tsx）内にあります。

状態の変化を理解するために、ほとんどのチュートリアルでは、ボタンをクリックするたびに値をインクリメントするカウンターを作成する方法を示しています。

あなたの最初のプラグイン

誰でも独自のフックを作成でき、多くのカスタムフックが「プラグイン」として利用できます。それらの1つは、フォームの表示と検証を処理するreact-hook-formです。

RHFでは、useStateはuseFormに置き換えられています。これには、十分に文書化されたすぐに使用できる機能が含まれています。