頁面實作：登入畫面

本節實作，將以一個登入表單作為範例

清除App.js不必要的部份

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="App">
      </div>
    );
  }
}

export default App;

一樣是在src之下創建Component檔案，劃分基本組成：

• Navigation.js
• Content.js
• Footer.js

Navigation.js

import React, { Component } from 'react';

class Navigation extends Component {
  render() {
    return (
      <div>
          Navigation
      </div>
    );
  }
}

export default Navigation;

其他兩個檔案就依樣畫葫蘆。

創建今天的主角：Login.js

import React, { Component } from 'react';

class Login extends Component {
  render() {
    return (
      <div>
         <form>
            <label>Username</label>
            <input type="text" placeholder="Enter Username" required/><br/>
            <label>Password</label>
            <input type="password" placeholder="Enter Password" required/><br/>
            <button type="submit">Login</button>
         <form/>
      </div>
    );
  }
}

export default Login;

修改Content.js將登入表單注入頁面

import React, { Component } from 'react';
import Login from './Login';

class Content extends Component {
  render() {
    return (
      <div>
          <Login/>
      </div>
    );
  }
}

export default Content;

修改App.js將三個部分引用近來並使用

import React, { Component } from 'react';
import Navigation from './Navigation';
import Content from './Content';
import Footer from './Footer';

class App extends Component {
  render() {
    return (
      <div className="App">
      </div>
    );
  }
}

export default App;

本節之後，將開始著手進行todolist也就是可供輸入代辦事項的單頁應用程式的製作，
UI設計會採用，Material-UI這套Material forReact 的函式庫，順便學習CRUD以及將資料儲存在Firebase或者LocalStorage的方法。