section5 create a fronend app

[SOunit]

side drawer

npm i react-transition-group

const SideDrawer = (props) => {
  const content = (
    <CSSTransition
      in={props.show}
      timeout={200}
      classNames="slide-in-left"
      mountOnEnter
      unmountOnExit
    >
      <aside className="side-drawer" onClick={props.onClick}>
        {props.children}
      </aside>
    </CSSTransition>
  );

  return ReactDOM.createPortal(content, document.getElementById("drawer-hook"));
};

get params in url

import { useParams } from "react-router-dom";

const userId = useParams().userId;

google map api

• use "Maps JavaScript API"
• create api key
• copy sample code from document

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

form validation

• use reducer

  input component

• check if it's valid
• keep value
• receive form check function from form component

form component

• keep values
• check if all values is valid
• pass check form function to input component

use hook

use context

• createContext create context
• wrap component with xxxContext.Provider
• all component which listens to context will be re-rendered
• context is connected to state

[SOunit]

document done