React 入門
TypeScript コメント掲示板アプリの開発
CreateForm コンポーネントの雛形を作る
コメントを新規投稿するためのフォームについてその雛形を作成します.まず,すでに作成しているはずの src/components/ フォルダに CreateForm.tsx という名前のファイルを作成します.このとき,ファイル名の先頭と単語の先頭が大文字になるように注意してください.Visual Studio Code では rafce
と入力した後に Tab を押して次の雛形を作成します.(その他のエディタであれば下のコードをコピーして利用してください.)
src/components/CreateForm.tsx
- import React from 'react'
-
- const CreateForm = () => {
- return (
- <div>CreateForm</div>
- )
- }
-
- export default CreateForm
今作成した CreateForm コンポーネントを CommentListPage コンポーネントに埋め込みます.まず,先頭で CreateForm
src/components/CommentListPage.tsx(抜粋)
- import React from 'react'
- import Comment from './Comment';
- import CreateForm from './CreateForm';
次に,return()
の中で,{commentItems}
の直後に <CreateForm />
を入力して埋め込みます.
src/components/CommentListPage.tsx(抜粋)
- return (
- <div className="container">
- <h1>コメント一覧</h1>
- {commentItems}
-
- <CreateForm />
- </div>
- )
ブラウザで確認すると,CreateForm コンポーネントが CommentListPage に埋め込まれていることが確認できました.
続いて CreateForm にテキストボックスなどのフォームを配置します.このとき,タイトルと本文を入力するテキストボックスには textInput
というクラス名を設定しておきます.
src/components/CreateForm.tsx
- import React from 'react'
-
- const CreateForm = () => {
- return (
- <>
- <hr />
- <article>
- <h2>コメントの新規投稿</h2>
- <form>
- <div>
- <label>
- タイトル:
- <input
- type="text"
- className="textInput"
- />
- </label>
- </div>
- <div>
- <label>
- 本文:
- <input
- type="text"
- className="textInput"
- />
- </label>
- </div>
- <div>
- <button>コメントの追加</button>
- </div>
- </form>
- </article>
- </>
- )
- }
-
- export default CreateForm
上で配置した textInput
クラスのテキストボックスについて,index.css でスタイリングします.
src/index.css
- .textInput {
- width: 100%;
- padding: 4px;
- margin: 0 0 8px;
- box-sizing: border-box;
- }
ブラウザで表示内容と動作を確認します.現時点ではテキストボックスに入力できます.一方で,ボタンを押してもまだ何も起こらないはずです.