95日目:React HooksのuseState Hookの使い方を学ぶ(classを使わないReact render)

2019年06月18日 2019年06月18日

キョウコ

今までのReact講座で学んだコード

今まではclassを使ってrenderするという方法でReactを学んできました。コードにするとこのようなかんじです。

class XXXXX extends React.Component {  
    ....
    render() { ... }
}

classを使わない「React Hooks」の使い方をreactjs公式ページで学ぶ（React 16.8の新機能）

今回は、React Hooksという新しい使い方が出てきたので、早速Reactの公式ページで学習しました。

⇒Introducing Hooks (reactjs公式サイト)

⇒Hooks at a Glance (reactjs公式サイト）

⇒Using the State Hook (reactjs 公式サイト)

まだ全部は読みきれていないのですが、Reactもどんどん変化していることがわかりました。（Effect Hookについてはまだ学んでいません。）

次々と新しいコードの書き方に変化しているようなので、常に最新情報を知っておく必要があると思いました。上記のサイトはもう一度読み直しておこうと思います。

実際に書いたReact Hooks useStateを使ったRegister Form のコード

import React, { Fragment, useState } from "react";
import { Link } from "react-router-dom";

const Register = () => {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: "",
    password2: ""
  });

  const { name, email, password, password2 } = formData;

  const onChange = e =>
    setFormData({ ...formData, [e.target.name]: e.target.value });

  const onSubmit = async e => {
    e.preventDefault();
    if (password !== password2) {
      console.log("Passwords do not match");
    } else {
      console.log("SUCCESS");
    }
  };

  return (
//Fragmentで囲んだhtmlコード
  );
};

export default Register;

Fragmentで囲んだhtml部分のコードはブログに上手く反映されなかったので省略しています。