React 綜合應用 (1)：登入頁面

要來驗收學習成果，但有個範例試作總是讓人安心，從 Login 開始進入好像是不錯的開始。

參考國外部落格教學後，發現是個很好學習的小型案例，就決定動手模仿開始：

首先使用 Create-React-App 進行專案建立。

安裝：
React Router
React Bootstrap
React icons
Styled-Components

Login 元件程式碼：

import React from "react";
import { Button, Form } from "react-bootstrap";
import styled from "styled-components";

const Styles = styled.div`
  @media all and (min-width: 480px) {
    .Login {
      padding: 60px 0;
    }

    .Login form {
      margin: 0 auto;
      max-width: 320px;
    }
  }
`;

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userid: "",
      password: ""
    };
  }

  validateForm() {
    return this.state.userid.length > 0 && this.state.password.length > 0;
  }

  handleChange = event => {
    this.setState({ [event.target.id]: event.target.value });
  };

  handleSubmit = event => {
    event.preventDefault();
  };

  render() {
    return (
      <Styles>
        <div className="Login">
          <Form onSubmit={this.handleSubmit}>
            <Form.Group controlId="userid" bsSize="large">
              <Form.Label>User ID</Form.Label>
              <Form.Control
                autoFocus
                type="text"
                value={this.state.userid}
                onChange={this.handleChange}
              />
            </Form.Group>
            <Form.Group controlId="password" bsSize="large">
              <Form.Label>Password</Form.Label>
              <Form.Control
                type="password"
                value={this.state.password}
                onChange={this.handleChange}
              />
            </Form.Group>
            <Button
              block
              type="submit"
              bsSize="large"
              disabled={!this.validateForm()}
            >
              Login
            </Button>
          </Form>
        </div>
      </Styles>
    );
  }
}

export default Login;

範例中的 react-bootstrap 版本太舊，標籤稍作更新，邏輯是不變的：利用 userid 和 password 的 state 變化觸發 Button 的狀態變化。

App.js

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

function App() {
  return (
    <Router>
      <>
        <Switch>
          <Route exact path="/login" component={Login} />
        </Switch>
      </>
    </Router>
  );
}

export default App;

原範例接下來是要進行 AWS 的連接工作，而我是要來練習 DataSnap Client 整合實作。

Be to continued

See also :

• Create a Login Page
• 'ControlLabel' is not exported from 'react-bootstrap'