Reaction‐Senseの意味論的UI‐Count‐Graphql‐Count‐PostgreSQLによるスラッククローン(第7部)

このシリーズのパート6では、フォルダ構造と共にアポロクライアントを設定しました.しかし、私はフォルダの構造とルートを少し変更したので、セマンティックUIを持つレジスタとログインUIに飛び込む前にそれらを修正しましょう.

リファクタフォルダの構造

ご覧の通り、改名しましたHome.js to Slack.js . それは私たちのスラックのアプリは(ちょうど世界中のテキストとして)される場所です.

プライベートフォルダには、私たちのプライベートルート(後で作成されます)

スタイルのフォルダーには、スタイルのコンポーネントがあります(後で作成されます)

インサイドApp.js ファイルは今このように見えます

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Login from "./components/auth/Login";
import Register from "./components/auth/Register";
import Slack from "./Slack";

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route exact path="/" component={Slack} />
          <Route path="/login" component={Login} />
          <Route path="/register" component={Register} />
        </Switch>
      </Router>
    </div>
  );
}
export default App;

それは、我々がシリーズでさらになるまで、現在のように見えます.

ページを意味UIで登録する

インサイドRegister.js ファイル

import React from "react";
import { Form, Header, Button } from "semantic-ui-react";
import { Link } from "react-router-dom";
import { Message } from "semantic-ui-react";
import "./auth.css";
const Register = () => {
  return (
    <div className="wrapper">
      <Header as="h2" textAlign="center">
        Join Slack{" "}
        <span>
          <i className="fab fa-slack" style={{ color: "#723975" }}></i>
        </span>
      </Header>
      <Form
        className="auth_form"
        size="large"
      >
        <Form.Group widths="equal">
          <Form.Input
            name="username"
            label="Username"
            type="text"
            placeholder="Username"
          />
          {/* END OF USERNAME FIELD */}
          <Form.Input
            name="email"
            label="Email"
            type="email"
            placeholder="Email"
          />
          {/* END OF EMIAL FIELD */}
          <Form.Input
            type="password"
            name="password"
            label="Password"
            placeholder="Password"
          />
          {/* END OF PASSWORD FIELD */}
        </Form.Group>
        <Button
          type="submit"
          formNoValidate
          style={{
            width: "100%",
            backgroundColor: "#5B2C5D",
            color: "white",
            marginBottom: "0.5em"
          }}
        >
          Submit
        </Button>
        <p style={{ textAlign: "center", fontSize: "0.8em" }}>
          <Link style={{ textDecoration: "none" }} to="/login">
            Already have an account? Log In
          </Link>
        </p>
      </Form>
    </div>
  );
};
export default Register;

私は間のトグルにリンクを追加Login 形式Register .
注意事項

私はフォント素晴らしいからアイコンを移動するので、同じ場合は、そのCDNをつかむことを確認します.

必ず作成するauth.css ファイルの内部auth フォルダ.

.wrapper {
  margin: 4em auto;
  width: 100%;
}

.wrapper .auth_form {
  margin-top: 3em;
  margin: 3em 2em;
}

あなたのデザインはこのように見えるはずです.

ログインページ

ログインの中.jsファイル.

import React from "react";
import { Form, Header, Button, Input } from "semantic-ui-react";
import "./auth.css";
const Login = () => {
  return (
    <div className="wrapper">
      <Header as="h2" textAlign="center">
        Log into Slack{" "}
        <span>
          <i className="fab fa-slack" style={{ color: "#723975" }}></i>
        </span>
      </Header>
      <Form
        className="auth_form"
        size="large"
      >
        <Form.Group widths="equal">
          <Form.Input
            name="email"
            label="Email"     
            type="email"
            placeholder="Email"
          />
          {/* END OF EMIAL FIELD */}
          <Form.Input
            type="password"
            name="password"
            label="Password"
            placeholder="Password"
          />
        </Form.Group>
        <Button
          type="submit"
          formNoValidate
          style={{
            width: "100%",
            backgroundColor: "#5B2C5D",
            color: "white",
            marginBottom: "0.5em"
          }}
        >
          Submit
        </Button>
        <p style={{ textAlign: "center", fontSize: "0.8em" }}>
          <Link style={{ textDecoration: "none" }} to="/register">
            Don't have an account? Create one here
          </Link>
        </p>
      </Form>
    </div>
  );
};
export default Login;

終了UI

これはすべて、この1つは、次のものでは、私たちは両方の上でフォームの検証を開始します.いつものように、助けが必要なら教えてください.エンジョイ.