iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 6
0
Modern Web

零基礎學習Reactjs 30天系列 第 6

利用元件製作一個頁面

頁面實作:登入畫面

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

清除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的方法。


上一篇
Props
下一篇
安裝套件
系列文
零基礎學習Reactjs 30天8

尚未有邦友留言

立即登入留言