[MERN⑤] Getting Started With React & The Frontend

import React, { Fragment } from 'react';
+ import Navbar from './components/layout/Navbar';
+ import Landing from './components/layout/Landing';
import './App.css';

const App = () => (
  <Fragment>
+    <Navbar />
+    <Landing />
  </Fragment>
);

export default App;

import React, { Fragment } from 'react';
+ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Navbar from './components/layout/Navbar';
import Landing from './components/layout/Landing';
+ import Register from './components/auth/Register';
+ import Login from './components/auth/Login';
import './App.css';

const App = () => (
+   <Router>
    <Fragment>
      <Navbar />
+       <Route exact path="/" component={Landing} />
+       <section className="container">
+         <Switch>
+           <Route exact path="/register" component={Register} />
+           <Route exact path="/login" component={Login} />
+         </Switch>
+       </section>
    </Fragment>
+   </Router>
);

export default App;

//① import { Link } from 'react-router-dom';
//② <a href="!#">xxx</a> を <Link to="/xxx"></Link> に変える。

import React from 'react';
+ import { Link } from 'react-router-dom';

const Navbar = () => {
  return (
    <nav className="navbar bg-dark">
      <h1>
+         <Link to="/"><i className="fas fa-code"></i> RefNote</Link>
      </h1>
      <ul>
        <li><a href="#!">Developers</a></li>
+        <li><Link to="/register">Register</Link></li>
+        <li><Link to="/login">Login</Link></li>
      </ul>
    </nav>
  );
};

export default Navbar;

////通常の書き方////
//①formDataに該当する書き方
  state = {
    formData: {
      name: '', email: '', password: '', password2: '',
    },
  };
//②setFormDataに該当する書き方
  this.setState
↓↓↓↓↓↓
////Hooks////
  const [①formData, ②setFormData] = useState({
      name: '', email: '', password: '', password2: '',
  });
//【説明】
//①formData(オブジェクト)②setFormData(関数)をuseState({オブジェクトs})に格納する。

const onChange = (e) => ②setFormData({ ③...formData, ④[e.target.name]: e.target.value });
//③ {...オブジェクト名} は「Spread Attributes」と呼ばれる。
//指定したオブジェクト名でオブジェクトのプロパティをまとめて下の階層に渡せる。
//オブジェクトのプロパティを追加したり削除したりするときに、コンポーネントのオブジェクトをいじる必要がなくなる。
//④「nameをkeyとして」データを渡しているが、[e.target.name]だといかなるname keyでも対応できる。

import React, { Fragment, useState } from 'react';

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 = (e) => {
    e.preventDefault();
    if (password !== password2) {
      console.log('Passwords do not match');
    } else {
      console.log('SUCCESS');
    }
  };

  return (
    <Fragment>
      <h1 className="large text-primary">Sign Up</h1>
      <p className="lead">
        <i className="fas fa -user"></i> Create Your Account
      </p>
+      <form className="form" onSubmit={(e) => onSubmit(e)}>
        <div className="form-group">
          <input
            type="text"
            placeholder="Name"
            name="name"
+            value={name}
+            onChange={(e) => onChange(e)}
            required
          />
        </div>
        <div className="form-group">
          <input
            type="email"
            placeholder="Email Address"
            name="email"
            value={email}
            onChange={(e) => onChange(e)}
            required
          />
          <small className="form-text">
            This site uses Gravatar so if you want a profile image, use a
            Gravatar email
          </small>
        </div>
        <div className="form-group">
          <input
            type="password"
            placeholder="Password"
            name="password"
            value={password}
            onChange={(e) => onChange(e)}
            minLength="6"
          />
        </div>
        <div className="form-group">
          <input
            type="password"
            placeholder="Confirm Password"
            name="password2"
            value={password2}
            onChange={(e) => onChange(e)}
            minLength="6"
          />
        </div>
        <input type="submit" className="btn btn-primary" value="Register" />
      </form>
      <p className="my-1">
        Already have an account? <a href="login.html">Sign In</a>
      </p>
    </Fragment>
  );
};

export default Register;