React コンポーネントの作成¶

Native

目標¶

@react.component デコレータと make 関数を含む、適切な構造の React コンポーネントファイルを素早く作成します。

手順¶

1. Create a new component file¶

Project パネルで対象ディレクトリを右クリックし、New > ReScript Component を選択します。

コンポーネント名（例: UserCard）を入力します。プラグインが基本的なコンポーネントのひな形を含む新しい .res ファイルを作成します。

2. Use the `comp` live template¶

空のファイルから始めたい場合や、既存のファイルにコンポーネントを追加したい場合は、comp と入力して Tab を押します:

// Type "comp" + Tab to expand:
@react.component
let make = () => {
  <div> {React.string("Hello")} </div>
}

カーソルが JSX 内に配置されるので、すぐに編集を開始できます。

3. Add props¶

make 関数にラベル付き引数を追加して、コンポーネントの props を定義します:

@react.component
let make = (~name: string, ~age: int, ~onClick: unit => unit) => {
  <div onClick>
    {React.string(name ++ " (" ++ Int.toString(age) ++ ")")}
  </div>
}

コード補完（Ctrl+Space）により、入力中に React API やモジュールメンバーの候補が表示されます。

4. Use JSX auto-close¶

開始タグを閉じるために > を入力すると、プラグインが対応する閉じタグを自動的に挿入します:

// Type <div> and the closing </div> is inserted automatically
<div>|</div>

期待される結果¶

以下を備えた動作する React コンポーネントファイル:

@react.component デコレータ
型付き props を持つ make 関数
適切な構造の JSX ボディ