# 複習篇
:::info
:bulb: **小複習：**
* 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](https://lodash.com/)
* [moment](https://momentjs.com/)
* [Ant Design(ANTD)](https://ant.design/components/overview/)
* [Mantine](https://mantine.dev/)
* [ECHARTS](https://echarts.apache.org/zh/index.html)
* [SweetAlert2](https://sweetalert2.github.io/#examples)