上一章 Day 21 - React 什麼是Component? 生命週期?

今天來寫我們的第一個Component

先從網頁的導覽列開始

在專案底下新增MyNavbar.js

import React, { Component } from 'react';
import {
    Collapse,
    Nav,
    Navbar,
    NavbarBrand,
    NavbarToggler,
    NavItem,
    NavLink
} from 'reactstrap';
import {
    BrowserRouter,
    Route,
    Switch,
    Link
} from 'react-router-dom';
import logo from './logo.svg';

class MyNavbar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            collapse: true
        };
        this.toogleNavbar = this.toogleNavbar.bind(this);
    }

    toogleNavbar() {
        this.setState({
            collapse: !this.state.collapse
        });
    }

    render() {
        return (
            <Navbar color="dark" dark>
                <NavbarBrand href="/" className="mr-auto">
                    <img
                        alt=""
                        src={logo}
                        width="30"
                        height="30"
                        className="d-inline-block align-top"
                    />
                    {' Aiden'}
                </NavbarBrand>
                <NavbarToggler onClick={this.toogleNavbar} className="mr-2"/>
                <Collapse isOpen={!this.state.collapse} navbar>
                    <Nav className="ml-auto" navbar>
                            <NavItem>
                                <NavLink href="https://ithelp.ithome.com.tw/users/20119510/articles">關於我</NavLink>
                            </NavItem>
                            <NavItem>
                                <NavLink href="https://github.com/AidenYang12345">GitHub</NavLink>
                            </NavItem>
                    </Nav>
                </Collapse>
            </Navbar >
        )
    }
}

export default MyNavbar;

constructor:

當你建立一個constructor, 必須要有super(), 若沒有super()會報錯

而需不需要super(props), 則看你會不會用到props

通常我們會在constructor內設定state初始值

若要改變state, 必須使用setState()

render:

官方文件上說這是Component唯一必須回傳的function,

如果今天你只是要傳回一個Hello world,

其餘方法都可以不用寫, 但一定要有render()

下一章 Day 21 - AJAX 與 Fetch API