TypeScriptとNext.js入門 その1

// @next/app
'use client';
import React, { useState } from 'react';

const MyComponent = () => {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(event.target.value);
  };

  return (
      <div>
        <input type="text" value={inputValue} onChange={handleChange} />
      </div>
  );
};

export default MyComponent;

1行目　//でコメントアウトです。

2行目　'use client';はクライアントのブラウザで実行するという指示です。これが無い場合はサーバーで実行するという指示になります。

3行目　import React, { useState } from 'react';はJavaScriptのimportと同じです。ReactとReactのuseStateをインポートします。

5行目　const MyComponent = () => { ... }で関数コンポーネントを定義しています。関数コンポーネントはJavaScriptの関数です。JSXとしてUIを記述できます。

6行目　useStateを使用しています。この機能はReact.jsの基本機能でコンポーネントの状態を管理します。

9行目　setInputValueはuseStateに含まれる機能です。setInputValueに値が渡されることでinputValueが更新されます。

12行目　関数コンポーネントのreturnとして、仮想DOM(JSX)を返します。HTMLをJavaScriptオブジェクトとして扱っているため本物のDOMではありません。

19行目　この記述がないとMyComponentを他のモジュールから参照できません。