Chapter 03無料公開

React コンポーネントの作成

Kei Touge
Kei Touge
2021.11.23に更新

todo(タスク)を入力するためのフォームを持った、関数コンポーネントを作成するところから始めましょう。

https://ja.reactjs.org/docs/components-and-props.html

src ディレクトリ内の main.tsxApp.tsx の2つのファイルを以下のファイルへ置き換えてください。

src/main.tsx
import ReactDOM from 'react-dom';
import { App } from './App';

ReactDOM.render(<App />, document.getElementById('root'));
src/App.tsx
export const App = () => {
  return (
    <div>
      <form onSubmit={(e) => e.preventDefault()}>
        <input type="text" value="" onChange={(e) => e.preventDefault()} />
        <input
          type="submit"
          value="追加"
          onSubmit={(e) => e.preventDefault()}
        />
      </form>
    </div>
  );
};

以降、この関数コンポーネント App をベースとして Todo アプリを作成していきます。

2021-04-24-174116.png

いまのところ onSubmitonChange などのイベントリスナーでは、イベントが発生しても preventDefault() してしまっているので特に何も起きません。

https://developer.mozilla.org/ja/docs/Web/API/Event/preventDefault