5分で作る基本のReactフォーム

## やりたいこと
フォームから名前を入力すると、リアルタイムで「あなたの名前は○○です。」と表示するReactアプリケーションを作ってみたいと思います。

## やり方

### Reactアプリケーションを作成

※ Nodeやnpmがインストールされていない場合は事前にインストールしてください。
[Node.js公式サイト](https://nodejs.org/en/)

ローカルの任意の場所で以下のコマンドを打つ
```
npx create-react-app my-app
cd my-app
npm start
```
表示されるアドレスにブラウザからアクセス
```
Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.2:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully
```
こういう画面が表示されればOK
![スクリーンショット 2022-04-14 3.11.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/687b80e5-bcf9-9dbd-5433-461cdb614098.png)

## フォームの編集
### フォーム要素の配置
`src/App.js`を以下のように編集
```jsx
function App() {
  return(
    <div>
    　<p>名前を入力してください。</p>
    　<input value=""/>
    　<p>あなたの名前は○○です。</p>
    </div>
  )
}

export default App;
```
画面を確認して、名前のフォーム要素が表示されていることを確認
![スクリーンショット 2022-04-14 4.02.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/57b52162-0573-eaa4-71fb-4331ccd405e6.png)

### 入力時の処理

`src/App.js`を以下のように編集する
```jsx
import { useState } from 'react';

function App() {
  const [input, setInput] = useState('太郎');

  return(
    <div>
    　<p>名前を入力してください。</p>
    　<input value={input} onInput={e => setInput(e.target.value)} />
    　<p>あなたの名前は{input}です。</p>
    </div>
  )
}

export default App;

```

ポイントは以下。
- `import { useState } from 'react';`で`useState`というReactフックをインポートする(Rectフック = クラス等を書かずにステートを管理できる仕組み)
```jsx
import { useState } from 'react';
```
- フォームの値を持つための`input`という変数を用意し、`setInput`で`input`の値が変わるように`useState`フックを使って定義。初期値は「太郎」とする。
```jsx
const [input, setInput] = useState('太郎');
```
- フォームの`onInput`イベントで`setInput`を呼び出すようにする
```jsx
<input value={input} onInput={e => setInput(e.target.value)} />
```
- 「あなたの名前は○○です。」の部分に`input`を埋め込む
```jsx
<p>あなたの名前は{input}です。</p>
```

フォームに入力し、リアルタイムで「あなたの名前は○○です。」が更新されることを確認
![ezgif.com-gif-maker (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/d1834ca5-2be2-9b99-7d5f-fd088b35141e.gif)



## スタイルの編集
必要であれば`src/App.js`に`import './App.css'`とクラスを付与して`scr/App.css`を編集
```jsx
import './App.css';
import { useState } from 'react';

function App() {
  const [input, setInput] = useState('太郎');

  return(
    <div class="wrapper">
    　<p>名前を入力してください。</p>
    　<input value={input} onInput={e => setInput(e.target.value)} />
    　<p class="result">あなたの名前は{input}です。</p>
    </div>
  )
}

export default App;
```

```css
.wrapper {
  display: flex;
  flex-direction: column;
  width: 90%;
  height: 100vh;
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 40px;
}

input {
  width: 100%;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 3px #ddd;
  border-radius: 4px;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.result {
  font-size: 100px;
  margin: auto;
}
```
CSSは[こちら](https://www.w3schools.com/css/css_form.asp)をほぼコピペしました

名前の表示をクソデカにしてみた
![ezgif.com-gif-maker (3).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/d8df957b-e299-87f6-0f94-0d75715bd694.gif)


できあがり！

## 参考
- [Create React App](https://reactjs.org/docs/create-a-new-react-app.html#create-react-app)
- [How to get the value of an input field using ReactJS?](https://stackoverflow.com/questions/36683770/how-to-get-the-value-of-an-input-field-using-reactjs)
- [Introducing Hooks](https://reactjs.org/docs/hooks-intro.html)
- [CSS Forms](https://www.w3schools.com/css/css_form.asp)