添加新页面

src/App.js

@@ -2,12 +2,16 @@ import './App.css';
 import { HashRouter, Route } from 'react-router-dom';
 import { AppContainer } from './index/index';
 import { UploadContainer } from './upload/upload';
+import { LogInContainer } from './login/login';
+import { ReviewContainer } from './review/review';
 
 function App() {
   return (
     <HashRouter>
       <Route path="/" exact component={AppContainer} />
       <Route path="/upload" component={UploadContainer} />
+      <Route path="/login" component={LogInContainer} />
+      <Route path="/review" component={ReviewContainer} />
     </HashRouter>
   );
 }

src/login/login.js

@@ -0,0 +1,63 @@
+import { Component } from 'react';
+import './login.css';
+
+export class LogInContainer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      username: '',
+      password: '',
+      error: false,
+      errorMessage: '',
+    };
+  }
+
+  handleChange(e) {
+    const { name, value } = e.target;
+    this.setState({ [name]: value });
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+    const { username, password } = this.state;
+    this.props.login(username, password);
+  }
+
+  render() {
+    const { error, errorMessage } = this.state;
+    return (
+      <div className="login">
+        <h1>Login</h1>
+        <form onSubmit={this.handleSubmit.bind(this)}>
+          <div className="form-group">
+            <label htmlFor="username">Username</label>
+            <input
+              type="text"
+              name="username"
+              className="form-control"
+              placeholder="Username"
+              onChange={this.handleChange.bind(this)}
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="password">Password</label>
+            <input
+              type="password"
+              name="password"
+              className="form-control"
+              placeholder="Password"
+              onChange={this.handleChange.bind(this)}
+            />
+          </div>
+          <button type="submit" className="btn btn-primary">
+            Login
+          </button>
+          {error &&
+            <div className="alert alert-danger">
+              {errorMessage}
+            </div>}
+        </form>
+      </div>
+    );
+  }
+}

src/review/review.js

@@ -0,0 +1,58 @@
+import { Component } from 'react';
+import './review.css';
+
+export class ReviewContainer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      rating: 0,
+      comment: '',
+      showComment: false,
+    };
+  }
+
+  handleClick(e) {
+    this.setState({
+      showComment: !this.state.showComment,
+    });
+  }
+
+  handleChange(e) {
+    this.setState({
+      rating: e.target.value,
+    });
+  }
+
+  handleCommentChange(e) {
+    this.setState({
+      comment: e.target.value,
+    });
+  }
+
+  render() {
+    return (
+      <div className="review">
+        <div className="rating">
+          <div className="star-rating">
+            <div className="star" />
+            <div className="star" />
+            <div className="star" />
+            <div className="star" />
+          </div>
+        </div>
+        <div className="comment">
+          <textarea
+            className="comment-input"
+            value={this.state.comment}
+            onChange={this.handleCommentChange.bind(this)}
+          />
+          <div className="comment-button">
+            <button onClick={this.handleClick.bind(this)}>
+              Comment
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}