Category: React.js

import './App.css';
import { useForm } from 'react-hook-form';

function App() {
  const { register, 
  handleSubmit,
  formState: {errors},
  } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <div className="App">
      <h1>login</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <label htmlFor="email">Email</label>
          <input id="email" {...register('email', { required: true })} />
          {errors.email && <div>入力が必須の項目です</div>}
        </div>
        <div>
          <label htmlFor="password">パスワード</label>
          <input
            id="password"
            {...register('password')} type="password" 
          />
        </div>
        <div>
          <button type="submit">Login</button>
        </div>
      </form>
    </div>
  );
}

複数のエラーメッセージ

function App() {
  const { register, 
  handleSubmit,
  formState: {errors},
  } = useForm({
    criteriaMode: 'all',
  });

<label htmlFor="password">パスワード</label>
          <input
            id="password"
            {...register('password', {
              required: {
                value: true,
                message: '入力が必須の項目です。',
              },
              pattern: {
                value: /^[A-Za-z]+$/,
                message: 'アルファベットのみ入力してください。'
              },
              minLength: {
                value: 8,
                message: '8文字以上入力してください。'
              }
            })} type="password" 
          />
          {errors.password?.type === 'required' && (<div>{errors.password.types.required}</div>)}
          {errors.password?.type === 'pattern' && (<div>{errors.password.types.pattern}</div>)}
          {errors.password?.type === 'minLength' && (<div>8文字以上入力してください。</div>)}
        </div>

バリデーションのタイミングは制御できる
reValidateMode: ‘onSubmit’,
mode: ‘onChange’,

なるほど、何となくわかってきました。
さぁ、実装していきますか…

$ yarn add react-hook-form

react-hook-formを使わずに書いた場合 1

import './App.css';
import { useState } from 'react';

function App() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log({
      email,
      password,
    });
  };

  const handleChangeEmail = (e) => {
    setEmail(e.target.value);
  };
  const handleChangePassword = (e) => {
    setPassword(e.target.value);
  };
  return (
    <div className="App">
      <h1>login</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="email">Email</label>
          <input id="email" name="email" value={email} onChange={handleChangeEmail} />
        </div>
        <div>
          <label htmlFor="password">パスワード</label>
          <input
            id="password"
            name="password"
            value={password}
            onChange={handleChangePassword}
            type="password"
          />
        </div>
        <div>
          <button type="submit">Login</button>
        </div>
      </form>
    </div>
  );
}

export default App;

react-hook-formを使わずに書いた場合 2

import './App.css';
import { useRef } from 'react';
import 

function App() {
  const emailRef = useRef(null);
  const passwordRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log({
      email: emailRef.current.value,
      password: passwordRef.current.value,
    });
  };

  // const handleChangeEmail = (e) => {
  //   setEmail(e.target.value);
  // };
  // const handleChangePassword = (e) => {
  //   setPassword(e.target.value);
  // };
  return (
    <div className="App">
      <h1>login</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="email">Email</label>
          <input id="email" name="email" ref={emailRef} />
        </div>
        <div>
          <label htmlFor="password">パスワード</label>
          <input
            id="password"
            name="password"
            ref={passwordRef} type="password" 
          />
        </div>
        <div>
          <button type="submit">Login</button>
        </div>
      </form>
    </div>
  );
}

export default App;

### react-hook-formを使った場合

import './App.css';
import { useForm } from 'react-hook-form';

function App() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <div className="App">
      <h1>login</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <label htmlFor="email">Email</label>
          <input id="email" {...register('email')} />
        </div>
        <div>
          <label htmlFor="password">パスワード</label>
          <input
            id="password"
            {...register('password')} type="password" 
          />
        </div>
        <div>
          <button type="submit">Login</button>
        </div>
      </form>
    </div>
  );
}

export default App;

registerに入っている値

const { name, ref, onChange, onBlur } = register('email');
//略
<input
  id="email"
  name={name}
  onChange={onChange}
  onBlur={onBlur}
  ref={ref}
/>

import React, { Component } from 'react';

const App = () => {
  return <Counter />
}

class Counter extends Component
{
  constructor(props)
  {
    super(props);
    this.state = {
      value : 0
    }
  }

  onIncrement = () => {
    this.setState({ value : this.state.value + 1});
  }

  onDecrement = () => {
    this.setState({ value : this.state.value - 1});
  }

  render()
  {
    return (
      <div>
        <div>
          Count value: {this.state.value}
        </div>
          
        <div>
        <button type="button" onClick={this.onIncrement}>+</button>
        <button type="button" onClick={this.onDecrement}>-</button>
        </div>
      </div>
    );
  }
}
export default App;

なるほど、面白いです^^

まず、Rectで作った簡単なjsファイル

App.js

import React from 'react';
import ReactDOM from "react-dom";

const App = () => {
  
  return (
    <div>
      <h1>hello world { 1 + 2}</h1>
    </div>
  )
  
}

export default App;

ファイルをbuidします。

$ npm run build

すると、buid/static/js にファイルが生成されているので、これを埋め込みます。
ここでは main.50873ce4.jsとなっていました。

<body>
    <h1>hello world!</h1>
    <div id="root"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="main.js" crossorigin></script>
</body>

なるほど、フッターにインラインで記述するのではなく、Node JSで開発して、それをminifyしてコンポーネントとして埋め込むのね。
何となくReactの使い方は理解しました。

$ npm -v
10.9.2
$ node -v
v22.13.1
$ yarn –version
bash: yarn: command not found

$ sudo npm install –global yarn
$ yarn –version
1.22.22

$ yarn create react-app helloworld
$ cd helloworld
$ ls
node_modules package.json public README.md src yarn.lock

$ yarn start

src/App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

修正する

import React from 'react';

const App = () => {
  return (
    <div>
      <h1>hello world</h1>
    </div>
  )
}

export default App;

ちょっと思い出してきました。

まずjsonデータを作成します。適当に株価で作ります。

{
	"stocks": [
		{"id": 4563, "name":"アンジェス", "price": 780},
		{"id": 9318, "name":"アジア開発キャピタル", "price": 9},
		{"id": 8256, "name":"プロルート丸光", "price": 283},
		{"id": 4755, "name":"楽天グループ", "price": 1132},
		{"id": 9984, "name":"ソフトバンクグループ", "price": 7179}
	]
}

### ReactのClassで書く場合

<script type="text/babel">
		class App extends React.Component{
			constructor(props){
				super(props)
				this.state = {
					isLoaded: false,
					error: null,
					stocks: []
				}
			}

			componentDidMount(){
				fetch("http://192.168.34.10:8000/data.json")
				.then(res=> res.json())
				.then(
					(result) => {
						this.setState({
							isLoaded: true,
							stocks: result.stocks
						});
					},
					(error) => {
					this.setState({
						isLoaded: true,
						error: error
					});
				})
			}

			render(){
				if(this.state.error){
					return <div>Error: {this.state.error.message}</div>
				} else if(!this.state.isLoaded) {
					return <div>Loading...</div>
				} else {
					return (
						<ul>
							{this.state.stocks.map( stock =>(
									<li key={stock.id}>
										{stock.name} {stock.price}
									</li>
								))}
						</ul>
					);
				}
			}

		}

		const target = document.getElementById('app');
		ReactDOM.render(<App />, target);
	</script>

### function(関数)で書く場合

function App(){
			const [data, setData] = React.useState([]);

			React.useEffect(() => {
				fetch("http://192.168.34.10:8000/data.json")
					.then((resoponse) => resoponse.json())
					.then((data) =>{
						setData(data.stocks);
				});
			}, []);

			return(
				<ul>
					{data.map( stock =>(
							<li key={stock.id}>
								{stock.name} {stock.price}
							</li>
						))}
				</ul>
			);
		}

		const target = document.getElementById('app');
		ReactDOM.render(<App />, target);

結果は同じですが、関数型の方が遥かに書きやすいですね。

これをbitcoinで実装する

function App(){
			const [data, setData] = React.useState([]);

			React.useEffect(() => {
				fetch("https://blockchain.info/ticker")
					.then((resoponse) => resoponse.json())
					.then((data) =>{
						setData(data.JPY);
				});
			}, []);

			console.log(data);

			return(
				<h1>ビットコイン価格(JPY):{data.last}</h1>
			);
		}

settime intervalでやりたい。

### useState
React本体に関数コンポーネント専用の保存領域を作成してもらい、そこにあるデータを読み書きできる

			const[count, setCount] = useState(0);
			return (
				<div onClick={()=>setCount(count+1)}>{count}</div>
			);

複数の値を扱うときは、複数のuseStateを使う

			const[count, setCount] = useState(0);
			const[isRed, setIsRed] = useState(false);

			return (
				<div 
					style={isRed? {color: 'red'}: null}
					onClick={() => {
						setCount(count+1);
						setIsRed((count+1)%3 === 0);
				}}
				>
			{count}
			</div>
			);

hooksをifやfor文の中で使用してはいけない

### useMemo
useMemoは単純に値を保存するためのhook

			const Calculator = () => {
				const calcResult = useMemo(() => expensiveFunc(), []);

				return <div>{calcResult}</div>
			}

### useCallback
useCallback(func, []) と省略した書き方ができる

			const Button = React.memo((props) => {
				return <button onClick={props.onClick}>Click Me</button>
			});

			const App = () => {
				const onClick = useCallback(() => alert('Hi!'), []);
				return <Button onClick={onClick}/>
			}

### useEffect
コンポーネントのレンダリング後に実行される

			const Message = () => {

				const elem = document.querySelector('#message');
				console.log(elem);

				useEffect(() => {
					const elem = document.querySelector('#message');
					console.log(elem);
					elem.innerText = "Hello!"
				});

				return <div id="message"></div>
			}

### useRef
useStateの参照版。useRefを使うことでReact本体側に値を保存でき、オブジェクトでラップされる

			const Message = () => {

				const divRef = useRef(null);

				useEffect(() => {
					divRef.current.innerText = 'Hello!';
				}, []);

				return <div ref={divRef}></div>
			}

実装したい内容に応じて、Hookを使い分けるってことか。