mkdir <directory-name>
mkdir hello-world
/* Functional component based on hooks that toggles image when button clicked */ | |
const ToggleDivImage = () => { | |
/* Setup component state that tracks visibility of the image. Initially, we'll set | |
the image to visible (toggled true) */ | |
const [toggled, setToggled] = React.useState(true); | |
/* Define a function that toggles the visibility of the image */ | |
const toggleImage = () => setToggled(!toggled); |
The objective of this discussion is to expose you to some of the popular frameworks that are built on top of JavaScript or React. The goal is not for you to know how to use these, but simply understand what their intended usage is in case you want to use it at some point in time.
For each of these, I want you to answer the following questions for the class:
import {useCallback, useEffect, useState} from 'react'; | |
export const useStateStorage = <TType extends any>( | |
key: string, | |
defaultValue: TType | |
) => { | |
const [value, setState] = useState(defaultValue); | |
useEffect(() => { | |
const store = localStorage.getItem(key); |
import {useEffect, useState} from 'react'; | |
export const useDocVisible = () => { | |
const isVisible = () => document.visibilityState === 'visible'; | |
const [visible, setVisible] = useState(isVisible()); | |
useEffect(() => { | |
const onVisible = () => setVisible(isVisible()); | |
document.addEventListener('visibilitychange', onVisible); | |
return () => | |
document.removeEventListener('visibilitychange', onVisible); |
// # < 1200 # | |
@media (max-width: 1199px) { | |
} | |
// # < 992 # | |
@media (max-width: 991px) { | |
} | |
// # < 768 # | |
@media (max-width: 767px) { |