複習篇

小複習：

• JSX
• Class & Functional Component
• props & state

JSX

const show = true;
const name = "cherry";
const styleArgument = { fontSize: '100px', color: 'red' };

const elementA = <div style={styleArgument}>`Hello ${name}`</div>;

const elementB = <div className="title"> {show? "true" : "false"}</div>;

Component

• Class 寫法

import React, { Component } from "react";

class App extends Component {
    
    constructor(props) { 
        
        super(props);
        
        this.state{
            name:"cherry",
            key: 1,
        }
        
    }
    
    // 寫function的位置(上次說錯了!)
    handleButtonClick =()=>{
        this.setState({ name : "kelly" });
    }

    console.log("name", this.state.name );

  render() { 
    const { text } = this.props;
      
    return (
        <div id="App">
            <button onClick={ ()=> this.handleButtonClick}> {text} </button>);
        </div>
    )
  }
}

export default App;

• Hook 寫法

import React, { useState } from "react";

const Button = (props) => {
    const { text } = props;
    const [ name , setName ] = useState("cherry");
    const [ key , setKey ] = useState();
    
    const handleButtonClick =()=>{
        setName("kelly");
    }
    
    console.log("name", name );
    
    return (<div id="App">
            <button onClick={ ()=> this.handleButtonClick}> {text} </button>);
        </div>);
}

常用套件

• lodash
• moment
• Ant Design(ANTD)
• Mantine
• ECHARTS
• SweetAlert2